<template>
  <div class="home">
   <div class="top"></div>
    <van-form ref='form'>
       <div class="line">
        <van-field
            v-model="shopName"
            required
            label="门店名称"
            placeholder="请输入"
            :rules="shopNameRules"
          />
       </div>
       <div class="line line2" @click="showArea=true">
        <van-field
            v-model="address"
            required
            label="门店地区"
            placeholder="请选择"
            :rules="addressRules"
            :readonly="readonlyf"
            :disabled="!readonlyf"
          />
          <div class="jtBOx">
            <img src="../../assets/icon_jiantou@2x.png" class="jtImg">
          </div>

       </div>
       <div class="line">
        <van-field
            v-model="contactor"
            required
            label="联系人"
            placeholder="请输入"
            :rules="contactorRules"
          />
       </div>
       <div class="line">
        <van-field
            v-model="contactorPhone"
            required
            label="联系方式"
            placeholder="请输入"
            :rules="contactorPhoneRules"
          />
       </div>
       <div class="line3">
         <div class="linetop">
           <span class="spanxx">*</span> <span>营业执照</span>
         </div>
         <div class="lineBot">
           <van-uploader
             v-model="file"
             :max-count="1"
             :after-read="afterRead"
             :before-read="beforeRead"
             :before-delete="deleteimg"
           />
         </div>

       </div>
   </van-form>
   <van-popup v-model="showArea" position="bottom">
     <van-area
       :area-list="areaList"

       @confirm="onConfirm"
       @cancel="showArea = false"
     />
   </van-popup>
   <div class="bottomBtn" @click="donext">保存</div>
  </div>
</template>
<script>
import { uploads,addSuperShopApplication } from '@/api/main.js'
import area from '../../utils/area.json'
import lrz from 'lrz'
export default {
  data() {
    return {
      shopName: '',
      contactor: '',
      contactorPhone: '',
      provinceName:'',
      cityName:'',
      areaName:'',
      province:'',
      city:'',
      area:'',
      address:'',
      loading: false,
      showArea:false,
      areaList:area,
      readonlyf:false,
      businessLicense:'',
      shopNameRules:[{
          required: true,
          message: '门店名称不能为空',
          trigger: 'onBlur'
       }],
       addressRules:[{
          required: true,
          message: '请选择门店地区',
          trigger: 'onBlur'
       }],
       contactorRules:[{
          required: true,
          message: '联系人不能为空',
          trigger: 'onBlur'
       }],
       contactorPhoneRules:[{
            required: true,
            message: '联系方式不能为空',
            trigger: 'onBlur'
         },
         { pattern: /^[0-9]*$/, message: '手机号码格式错误！'}],
         file: [],
         go:true,
    }
  },
  methods: {
    onConfirm(e){
      console.log(e)
      this.province=e[0].code
      this.city=e[1].code
      this.area=e[2].code
      this.provinceName=e[0].name
      this.cityName=e[1].name
      this.areaName=e[2].name
      this.address=this.provinceName+this.cityName+this.areaName
      this.readonlyf=true
      this.showArea=false;
    },
    donext(){

      this.$refs.form.validate().then(() => {
         if(!this.businessLicense){
           this.$toast.fail('请上传营业执照')
         }else{
           var params={
             shopName:this.shopName,
             province:this.province,
             city:this.city,
             area:this.area,
             contactor:this.contactor,
             contactorPhone:this.contactorPhone,
             provinceName:this.provinceName,
             cityName:this.cityName,
             areaName:this.areaName,
             businessLicense:this.businessLicense,
           }

           if(!this.go){
             return false;
           }
           this.$toast.loading({
             duration: 0, // 持续展示 toast
             forbidClick: true,
             message: '提交中'
           })
           this.go=false;
          // console.log("55")
           var that=this;
         
            addSuperShopApplication(params).then(res => {
                this.$toast.clear()
                setTimeout(function() {
                    that.go=true;
                 }, 2000);
               // this.$toast.success('提交成功')
                this.$dialog.alert({
                  title: '提示',
                  message: '我们已收到您的申请，销售经理会尽快联系您',
                  confirmButtonText: "我知道了",
                  confirmButtonColor:'#3F90F7',
                }).then(() => {
                   that.shopName=''
                   that.contactor=''
                   that.contactorPhone=''
                   that.address=''
                   that.file=[]
                   that.businessLicense=''
                });
            }, err => {
              this.$toast.clear()
                this.go=true;
            })
         }
           //
        }).catch(() => {
            //
        })

    },
    beforeRead(file) {
      if (file.type.indexOf('image/') === -1) {
        this.$toast('请选择图片类型')
        return false
      }
      return true
    },
    deleteimg(){
      console.log("删除")
      this.file=[]
      this.businessLicense=''
    },
    afterRead(file) {
      /* lrz(file.file).then(lrzFile => {
        file.file = lrzFile.file
      }, err => {
        console.log(err)
      }).always(res => {
        file.status = 'uploading'
        file.message = '上传中...'

      }) */
      console.log(file)
      const params = new FormData()
      params.append('file', file.file)
      console.log(params)
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '上传中'
      })

      uploads(params, {
        timeout: 864000,
        headers: { 'Content-Type': 'multipart/form-data', id: this.$store.getters.id }
      }).then(res => {
        this.$toast.clear()
        this.businessLicense=res.data.data[0];
        console.log(this.businessLicense)
        /* if (res.data.code === 1) {
          file.status = 'failed'
          file.message = res.data.msg || res.data.message
        } else {
          file.url = res.data.data.path
          file.status = 'done'
          file.message = '' */

          //this.value = res.data.data
       // }
      }, err => {
        this.$toast.clear()
        file.status = 'failed'
        file.message = '上传失败'
      })
    },

  }
}
</script>
<style lang="scss" scoped="">
.line{
  border-bottom: 1px solid #EEEEEE;
}
 .bottomBtn{
   width: 351px;
   height: 44px;
   background: #3F90F7;
   border-radius: 5px;
   position: fixed;
   left: 12px;
   bottom: 11px;
   line-height:44px ;
   text-align: center;
   font-size:15px ;
   color: #FFFFFF;
 }
 .jtImg{
   width: 7px;
   height: 12px;
 }
 .line2{
   display: flex;
 }
 .jtBOx{
   padding-right: 12px;
   display: flex;
   align-items: center;
 }
 .linetop{
    padding: 10px;font-size: 13px;display: flex;color: #323233;
 }
 .spanxx{
   color: #ee0a24;
 }
 .lineBot{
   padding-left: 10px;
 }
</style>
