<template>
  <div class="fill-store-inf">
    <div class="logo-bg">
      <img v-if="false" src="../../../public/images/logo_white_sm.png" alt="">
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix steps">
        <el-steps :active="1" align-center finish-status="success">
          <el-step title="注册账号"></el-step>
          <el-step title="填写主体信息"></el-step>
          <el-step title="填写店铺信息"></el-step>
          <el-step title="提交入驻审核"></el-step>
        </el-steps>
      </div>
      <div class="main-con">
        <el-form ref="mainForm" :model="mainForm" :rules="mainRules" label-width="180px" class="main-form-con" size="small">
          <el-form-item>
            <p class="main-form-title">企业资质信息</p>
          </el-form-item>

          <el-form-item label="营业执照:" prop="license" >
            <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
              <div style="padding-right:6px;">
                <el-upload
                  :class="['uploadData',{ 'hiden-dom': licenseImgFileList.length >= 1 }]"
                  action="#"
                  list-type="picture-card"
                  :http-request="uploadLicenseImages"
                  :limit="1"
                  :on-exceed="showTip"
                  :before-upload = "beforeUpImg"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :file-list = 'licenseImgFileList'
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
              <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
              </div>
              <div style="width:400px;line-height: 24px;padding-top: 6px;">
                <span class="tips-text">图片大小为500KB以内,支持png/jpg,限一张,请确保图片清晰</span></br>
                <span class="tips-text">请确保营业执照在有效期内</span>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="企业名称:" prop="organization_name" inline-message="true">
            <el-input v-model="mainForm.organization_name" style="width: 400px;"></el-input>
            <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整名称填写</span>
          </el-form-item>

          <el-form-item label="统一社会代码:" prop="license_number" inline-message="true">
            <el-input v-model="mainForm.license_number" style="width: 400px;"></el-input>
            <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整名称填写</span>
          </el-form-item>

          <el-form-item :gutter="20" label="营业期限:" prop="license_expires_time">
            <el-date-picker
              style="width:400px;"
              v-model="periodConcreteTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="periodLongTermChange"
              :clearable="false"
            />
            <el-checkbox v-model="periodLongTermVal" :disabled="isPeriodDisabled"
                         style="padding-left:15px;" @change="periodConcreteChange">长期
            </el-checkbox>
            <span class="tips-text"><i class="el-icon-warning h-warning"></i>具体时间和长期,二者必填一个</span>
          </el-form-item>

          <el-form-item label="企业地址:" prop="organization_address" inline-message="true">
            <el-input v-model="mainForm.organization_address" style="width: 400px;"></el-input>
            <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整地址填写</span>
          </el-form-item>

          <el-form-item>
            <p class="main-form-tips">请核对营业执照信息,若信息不符合,可手动修改</p>
          </el-form-item>
          <el-divider></el-divider>

          <el-form-item>
            <p class="main-form-title">企业法人信息</p>
          </el-form-item>

          <el-form-item label="法人身份证:" prop="idcard_front">
            <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
              <!-- 身份证正面 -->
              <div style="padding: 0 20px;">
                <el-upload
                  :class="['uploadData',{ 'hiden-dom': idcardImgFileList.length >= 1 }]"
                  list-type="picture-card"
                  action="#"
                  :limit="1"
                  :on-exceed="showTip"
                  :before-upload = "beforeUpImg"
                  :http-request="uploadIdcardPositive"
                  :on-preview="handlePictureCardPreview2"
                  :on-remove="handleRemove2"
                  :file-list = 'idcardImgFileList'
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible2">
                  <img width="100%" :src="dialogImageUrl2" alt="">
                </el-dialog>
              </div>
              <!-- 身份证反面 -->
              <div style="padding: 0 20px;">
                <el-upload
                  :class="['uploadData',{ 'hiden-dom': idcardBackImgFileList.length >= 1 }]"
                  list-type="picture-card"
                  action="#"
                  :limit="1"
                  :on-exceed="showTip"
                  :file-list = 'idcardBackImgFileList'
                  :before-upload = "beforeUpImg"
                  :on-preview="handleBackPictureCardPreview2"
                  :on-remove="handleBackRemove2"
                  :http-request="uploadIdcardBack"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogBackVisible2">
                  <img width="100%" :src="dialogBackImageUrl2" alt="">
                </el-dialog>
              </div>
              <div>
                <span class="tips-text">
                  <i class="el-icon-warning h-warning"></i>
                </span>
              </div>
              <div style="width:380px;line-height: 24px;padding-top: 6px;">
                <span class="tips-text">图片大小为500KB以内,支持png/jpg,每个上传框限一张,请确保图片清晰</span>
              </div>
            </div>
            <div class="idcard-tips-con">
              <p>请上传身份证正面</p>
              <p>请上传身份证国徽面</p>
            </div>
          </el-form-item>

          <el-form-item label="法定姓名:" prop="real_name">
            <el-input v-model="mainForm.real_name" style="width: 400px;"></el-input>
            <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的法人填写</span>
          </el-form-item>

          <el-form-item label="法定代表人证件号:" prop="idcard_number">
            <el-input v-model="mainForm.idcard_number" style="width: 400px;"></el-input>
          </el-form-item>

          <el-form-item label="有效期至:" prop="idcard_expires_time">
            <el-date-picker
              style="width:400px;"
              v-model="validityConcreteTime"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="validityConcreteTimeChange"
              :clearable="false"
            />
            <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;" @change="validityLongTermValChange">长期
            </el-checkbox>
          </el-form-item>

          <el-form-item>
            <p class="main-form-tips">请核对企业法人信息,若信息不符合,可手动修改</p>
          </el-form-item>

          <div class="confirm-btn">
            <p>
              <el-button type="primary" style="padding: 8px 30px;"  @click="next('mainForm')">下一步</el-button>
            </p>
          </div>

        </el-form>
      </div>
    </el-card>
    <!-- 图片识别 对话框 -->
    <el-dialog title="提示" :visible.sync="isReadFailVisible" class="read-fail-dialog" width="600px" center
               :close-on-click-modal="false" :show-close="false">
      <p>未能识别有效信息,请重新上传正确的图片或者手动输入相关信息</p>
      <p>该弹窗<span class="read-time-m">{{ readTime }}</span>S后自动关闭,无需手动关闭</p>
    </el-dialog>
  </div>
</template>

<script>
  import { getInfo,getMainInf,addMain,upLoadImg,getLicenseImgInfoData,getIdcardImgInfoData } from '@/api/module/entry';
  import { dateFormat } from '@/utils'
  export default {
    name: "FillMainInf",
    data() {
      let authTimeValidator = (rule, value, callback) => {
        if(this.brandForm.brand_type === 2) {
          if (this.validityConcreteTime === null && this.validityLongTermVal === false) {
            callback(new Error("授权有效期具体时间和长期必须填写其中一个"));
          } else {
            callback();
          }
        }else {
          callback();
        }
      };
      let licenseValidator = (rule, value, callback) => {
        if(this.licenseImgFileList.length > 0) {
          callback();
        }else if(this.licenseImgFileList.length === 0) {
          callback(new Error("营业执照图片至少上传一张"));
        }
      };
      let idCardValidator = (rule, value, callback) => {
        if(this.idcardImgFileList.length > 0) {
          callback();
        }else if(this.idcardImgFileList.length === 0) {
          callback(new Error("法人证件照图片至少上传一张"));
        }
      };
      let checkIdCard = (rule, value, callback) => {
        const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(!reg.test(value)){
          callback(new Error('法人证件号格式有误'));
        }else {
          callback();
        }
      };
      let licenseTimeValidator = (rule, value, callback) => {
        if ( (this.periodConcreteTime.length == 0 || !this.periodConcreteTime) && this.periodLongTermVal === false) {
          callback(new Error("营业期限具体时间和长期必须填写其中一个"));
        } else {
          callback();
        }
      };
      let idCardTimeValidator = (rule, value, callback) => {
        if ((this.validityConcreteTime.length == 0 || !this.validityConcreteTime) && this.validityLongTermVal === false) {
          callback(new Error("有效期具体时间和长期必须填写其中一个"));
        } else {
          callback();
        }
      };
      return {
        licenseImgFileList: [], // 营业执照图片
        idcardImgFileList: [], // 身份证件照图片
        idcardBackImgFileList: [], // 身份证国徽面
        dialogImageUrl: '',
        dialogVisible: false,
        dialogImageUrl2: '',
        dialogVisible2: false,
        dialogBackImageUrl2: '',
        dialogBackVisible2: false,
        // 营业期限
        periodConcreteTime: [],
        periodLongTermVal: false,
        // 证件有效期
        validityConcreteTime: [],
        validityLongTermVal: false,
        isConcretePeriod: false,
        isPeriodDisabled: false,
        isValidity: true, // 有效期至 是否填写
        submitTime: [],
        // 主体信息
        mainForm: {
          license: '',
          organization_name: '',
          license_number: '',
          organization_address: '',
          // 法人信息
          idcard_front: '',
          idcard_back: '',
          real_name: '',
          idcard_number: '',
          idcard_start_time: '',
          idcard_expires_time: '',
          license_expires_time: '',
          license_start_time: ''
        },
        // 主体信息校验
        hasLicense: false,
        mainRules: {
          license: [{required: true, message: '请上传营业执照电子版',validator: licenseValidator}],
          organization_name: [{required: true, message: '企业名称不能为空', trigger: 'blur'}],
          license_number: [{required: true, message: '统一社会代码不能为空', trigger: 'blur'}],
          organization_address: [{required: true, message: '企业地址不能为空', trigger: 'blur'}],
          real_name: [{required: true, message: '法人姓名不能为空', trigger: 'blur'}],
          idcard_number: [
            {required: true, message: '法人证件号不能为空', trigger: 'blur'},
            {required: true, message: '法人证件号码格式有误', validator: checkIdCard,trigger: 'blur' }
          ],
          idcard_front: [{required: true, message: '请上传法人证件电子版图片',validator: idCardValidator}],
          license_expires_time: [{ validator:licenseTimeValidator,required: true,trigger: 'change' }],
          idcard_expires_time: [{ validator:idCardTimeValidator,required: true,trigger: 'change' }]
        },
        readTime: 5,
        isReadFailVisible: false,
        TIMER: null,
      }
    },
    created() {
      // 根据 用户信息,判断是否请求 回显接口
      getInfo().then(res=> {
        if (res.code == 1 && res.data.user) {
          let isRrequest = false;
          if (res.data.user.state == 0) {
            if (res.data.user.status == 1) {
              isRrequest = true;
            }else {
              isRrequest = false;
            }
          }else if (res.data.user.state == 1 || res.data.user.state == 2 || res.data.user.state == 3) {
            isRrequest = true;
          }

          if (isRrequest) {
            this.getMain();
          }
        } // if end
      }); // getInfo end
    },
    destroyed() {
      clearInterval(this.TIMER);
      this.TIMER = null;
    },
    mounted() {},
    methods: {
      /** 营业期限 选择区间时间时 */
      periodLongTermChange() {
        if (Array.isArray(this.periodConcreteTime) && this.periodConcreteTime.length == 2) {
          this.periodLongTermVal = false;
        }
      },
      /** 营业期限 选择 长期时 */
      periodConcreteChange() {
        if (this.periodLongTermVal) {
          this.periodConcreteTime = [];
        }
      },
      /** 身份证有效期  选择区间时间时 */
      validityConcreteTimeChange() {
        if (Array.isArray(this.validityConcreteTime) && this.validityConcreteTime.length == 2) {
          this.validityLongTermVal = false;
        }
      },
      /** 身份证有效期 选择 长期时 */
      validityLongTermValChange() {
        if (this.validityLongTermVal) {
          this.validityConcreteTime = [];
        }
      },
      /** 上传 图片大小和格式校验 */
      beforeUpImg(file) {
        // let isImgSize = (file.size / 1024 / 100) > 5;
        let isImgSize = (file.size / 1024 ) > 500;
        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
          this.$message({
            message: '上传图片格式只支持png/png格式',
            type: "warning"
          });
          return false;
        }
        if(isImgSize) {
          this.$message({
            message: '上传图片大小不能超过500k',
            type: "warning"
          });
          return false;
        }
      },
      /** 上传 营业执照图片 */
      uploadLicenseImages(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img,"type":2};
          upLoadImg(data).then((res) => {
            if( res.code == 1){
              this.licenseImgFileList.push({'url':res.data.image_url});
              this.$message({type: 'success',message:'上传成功'});
              this.$refs.mainForm.clearValidate('license');
              // 图片识别
              this.readLicenseImgInfo(this.licenseImgFileList);
            }else {
              this.$message({type:'error',message:res.message ? res.message : '上传失败'});
            }
          });
        });
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleRemove(file,fileList) {
        for(let i = 0; i < this.licenseImgFileList.length; i++) {
          if(file.uid === this.licenseImgFileList[i].uid) {
            this.licenseImgFileList.splice(i,1);
          }
        }
      },
      /** 识别 营业执照信息 */
      readLicenseImgInfo(fileList) {
        // debugger
        if ( !Array.isArray(fileList) || !fileList[0].url) return
        let data = {img: fileList[0].url}
        // let data = {img: 'http://excel.jxhh.com/1626058781.jpg'}
        getLicenseImgInfoData(data).then(res=> {
          // console.log(369,res);
          if (res.code == 1 ) {
            this.mainForm.organization_name = res.data.words_result['单位名称'].words ? res.data.words_result['单位名称'].words : '';
            this.mainForm.license_number = res.data.words_result['社会信用代码'].words ? res.data.words_result['社会信用代码'].words : '';
            this.mainForm.organization_address = res.data.words_result['地址'].words ? res.data.words_result['地址'].words : '';
            // 营业期限处理
            if (res.data.words_result['有效期'].words == '长期' || res.data.words_result['有效期'].words == '年月日') {
              this.periodConcreteTime = [];
              this.periodLongTermVal = true;
              // this.isConcretePeriod = true;
            }else {
              // 营业期限 日期处理 XXXX年XX月XX日 => xx-xx-xx
              let beginTimeStr = res.data.words_result['成立日期'].words ? res.data.words_result['成立日期'].words : '';
              let endTimeStr = res.data.words_result['有效期'].words
              let beginTime = beginTimeStr.replace(/年|月|日/g,"-").substr(0,beginTimeStr.length - 1)
              let endTime = endTimeStr.replace(/年|月|日/g,"-").substr(0,endTimeStr.length - 1)
              this.periodConcreteTime = [];
              this.periodConcreteTime.push(beginTime);
              this.periodConcreteTime.push(endTime);
              // this.isConcretePeriod = false;
              this.periodLongTermVal = false;
            }
          }else {
            this.isReadFailVisible = true;
            this.readTime = 5;
            clearInterval(this.TIMER);
            this.TIMER = setInterval(() => {
              if (this.readTime && 0 < this.readTime <= 5 ) {
                this.readTime--
              } else {
                this.readTime = 0;
                this.isReadFailVisible = false;
              }
            }, 1000)

          }
        });
      },
      /** 上传身份证 正面 */
      uploadIdcardPositive(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img,"type":2};
          upLoadImg(data).then((res) => {
            if (res.code ==  1){
              this.idcardImgFileList.push({'url':res.data.image_url});
              this.$message({type:'success',message:'上传成功'});
              this.$refs.mainForm.clearValidate('idcard_front');
              this.readIdcardPositive(this.idcardImgFileList);
            }else {
              this.$message({type:'error',message:res.message ? res.message : '上传失败'});
            }
          });
        });
      },
      /** 识别 身份证 正面 */
      readIdcardPositive(fileList) {
        if ( !Array.isArray(fileList) || !fileList[0].url) return
        let data = {img: fileList[0].url}
        getIdcardImgInfoData(data).then(res=> {
          if (res.code == 1 ) {
            if (res.data.words_result) {
              try {
                this.mainForm.real_name = res.data.words_result['姓名'].words ? res.data.words_result['姓名'].words : '';
                this.mainForm.idcard_number = res.data.words_result['公民身份号码'].words ? res.data.words_result['公民身份号码'].words : '';
              } catch (e) {
                this.isReadFailVisible = true;
                this.readTime = 5;
                clearInterval(this.TIMER);
                this.TIMER = setInterval(() => {
                  if (this.readTime && 0 < this.readTime <= 5 ) {
                    this.readTime--
                  } else {
                    this.readTime = 0;
                    this.isReadFailVisible = false;
                  }
                }, 1000)
              }

            }
          }else {
            this.isReadFailVisible = true;
            this.readTime = 5;
            clearInterval(this.TIMER);
            this.TIMER = setInterval(() => {
              if (this.readTime && 0 < this.readTime <= 5 ) {
                this.readTime--
              } else {
                this.readTime = 0;
                this.isReadFailVisible = false;
              }
            }, 1000)
          }
        });
      },
      handlePictureCardPreview2(file) {
        this.dialogImageUrl2 = file.url;
        this.dialogVisible2 = true;
      },
      handleRemove2(file,fileList) {
        for(let i = 0; i < this.idcardImgFileList.length; i++) {
          if(file.uid === this.idcardImgFileList[i].uid) {
            this.idcardImgFileList.splice(i,1);
          }
        }
      },

      /** 上传身份证 反面 */
      uploadIdcardBack(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img,"type":2};
          upLoadImg(data).then((res) => {
            if (res.code ==  1){
              this.idcardBackImgFileList.push({'url':res.data.image_url});
              this.$message({type:'success',message:'上传成功'});
              this.$refs.mainForm.clearValidate('idcard_back');
              this.readIdcardBack(this.idcardBackImgFileList);
            }else {
              this.$message({type:'error',message:res.message ? res.message : '上传失败'});
            }
          });
        });
      },
      /** 识别 身份证 反面 */
      readIdcardBack(fileList) {
        if ( !Array.isArray(fileList) || !fileList[0].url) return
        let data = {img: fileList[0].url}
        getIdcardImgInfoData(data).then(res=> {
          if (res.code == 1 ) {
            // 身份证 有效 XXXXXXXX日 => xx-xx-xx
            if (res.data.words_result['签发日期'] && res.data.words_result['失效日期'] ) {
              let beginStr = res.data.words_result['签发日期'].words;
              let endStr = res.data.words_result['失效日期'].words;
              if (endStr == '长期') {
                this.validityConcreteTime = [];
                this.validityLongTermVal = true;
              }else {
                let reg = /^(\d{4})(\d{2})(\d{2})$/;
                let begin = beginStr.replace(reg, "$1-$2-$3");
                let end = endStr.replace(reg, "$1-$2-$3");
                this.validityConcreteTime = [];
                this.validityConcreteTime.push(begin);
                this.validityConcreteTime.push(end);
                this.validityLongTermVal = false;
              }
            }else {
              this.isReadFailVisible = true;
              this.readTime = 5;
              clearInterval(this.TIMER);
              this.TIMER = setInterval(() => {
                if (this.readTime && 0 < this.readTime <= 5 ) {
                  this.readTime--
                } else {
                  this.readTime = 0;
                  this.isReadFailVisible = false;
                }
              }, 1000)
            }
          }else {
            this.isReadFailVisible = true;
            this.readTime = 5;
            clearInterval(this.TIMER);
            this.TIMER = setInterval(() => {
              if (this.readTime && 0 < this.readTime <= 5 ) {
                this.readTime--
              } else {
                this.readTime = 0;
                this.isReadFailVisible = false;
              }
            }, 1000)
          }
        });
      },
      handleBackPictureCardPreview2(file) {
        this.dialogBackImageUrl2 = file.url;
        this.dialogBackVisible2 = true;
      },
      handleBackRemove2(file) {
        for(let i = 0; i < this.idcardBackImgFileList.length; i++) {
          if(file.uid === this.idcardBackImgFileList[i].uid) {
            this.idcardBackImgFileList.splice(i,1);
          }
        }
      },
      // 获取主体信息接口
      getMain() {
        getMainInf().then(res => {
          if(res.code == 1) {
            this.resetForm('mainForm');
            this.mainForm = res.data;

            // 营业执照电子图片处理
            let licenseImgArr = [];
            let licenseImgUrl = {};
            licenseImgArr = this.mainForm.license.split(",");
            if (licenseImgArr.length > 0) {
              licenseImgArr.forEach(item=> {
                licenseImgUrl = {};
                if (item) {
                  licenseImgUrl.url = item
                  this.licenseImgFileList.push(licenseImgUrl)
                }
              });
            }else {
              this.licenseImgFileList = [];
            }

            // 身份证 正面数据处理
            let idcardFrontImgArr = [];
            let idcardFrontImgUrl = {};
            idcardFrontImgArr = this.mainForm.idcard_front.split(",");
            if (idcardFrontImgArr.length > 0) {
              idcardFrontImgArr.forEach(item=> {
                idcardFrontImgUrl = {};
                if (item) {
                  idcardFrontImgUrl.url = item
                  this.idcardImgFileList.push(idcardFrontImgUrl)
                }
              });
            }else {
              this.idcardImgFileList = [];
            }

            // 身份证 反面数据处理
            let idcardBackImgArr = [];
            let idcardBackImgUrl = {};
            idcardBackImgArr = this.mainForm.idcard_back.split(",");
            if (idcardBackImgArr.length > 0) {
              idcardBackImgArr.forEach(item=> {
                idcardBackImgUrl = {};
                if (item) {
                  idcardBackImgUrl.url = item
                  this.idcardBackImgFileList.push(idcardBackImgUrl)
                }
              });
            }else {
              this.idcardBackImgFileList = [];
            }

            // 营业期限 日期格式处理
            if (this.mainForm.license_expires_time == 0) {
              this.periodLongTermVal = true
              this.periodConcreteTime = [];
            } else if (this.mainForm.license_expires_time > 0) {
              this.periodLongTermVal = false;
              this.periodConcreteTime = [];
              let start = this.formatterTime(this.mainForm.license_start_time)
              let end = this.formatterTime(this.mainForm.license_expires_time);
              this.periodConcreteTime.push(start)
              this.periodConcreteTime.push(end)
            }

            // 身份证 有效期 日期格式处理
            if (this.mainForm.idcard_expires_time == 0) {
              this.validityLongTermVal = true
              this.validityConcreteTime = [];
            } else if (this.mainForm.idcard_expires_time > 0) {
              this.validityLongTermVal = false;
              this.validityConcreteTime = [];
              let start = this.formatterTime(this.mainForm.idcard_start_time)
              let end = this.formatterTime(this.mainForm.idcard_expires_time);
              this.validityConcreteTime.push(start)
              this.validityConcreteTime.push(end)
            }
          } else {
            this.$message({type:'error',message:res.message ? res.message : '获取主体信息失败'});
          }
        });
      },
      resetForm(formName) {
        this.periodConcreteTime = [];
        this.validityConcreteTime = [];
        this.$refs[formName].resetFields();
      },
      // 图片转换为base64位
      getBase64(file) {
        return new Promise(function(resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function() {
            imgResult = reader.result;
          };
          reader.onerror = function(error) {
            reject(error);
          };
          reader.onloadend = function() {
            resolve(imgResult);
          };
        });
      },
      // 时间戳转换为 标准时间格式
      formatterTime(time) {
        return dateFormat(time *1000, 'Y-m-d')
      },
      /** 图片上传 数量限制 1张 */
      showTip2() {
        this.$message({message: '最多上传2张图片', type: 'warning'});
      },
      showTip() {
        this.$message({message: '最多上传1张图片', type: 'warning'});
      },

      back() {
        this.$router.push("/agreement");
      },
      next(form) {
        // 营业期限 数据处理
        if (this.periodLongTermVal) {
          this.mainForm.license_expires_time = 0;
          this.mainForm.license_start_time = 0;
        } else {
          if( Array.isArray(this.periodConcreteTime) && this.periodConcreteTime.length == 2) {
            this.mainForm.license_start_time = new Date(this.periodConcreteTime[0]).getTime() / 1000;
            this.mainForm.license_expires_time = new Date(this.periodConcreteTime[1]).getTime() / 1000;
          }
        }

        // 身份证有效期 数据处理
        if (this.validityLongTermVal) {
          this.mainForm.idcard_expires_time = 0;
          this.mainForm.idcard_start_time = 0;
        } else {
          if( Array.isArray(this.validityConcreteTime) && this.validityConcreteTime.length == 2) {
            this.mainForm.idcard_start_time = new Date(this.validityConcreteTime[0]).getTime() / 1000;
            this.mainForm.idcard_expires_time = new Date(this.validityConcreteTime[1]).getTime() / 1000;
          }
        }

        // 处理营业执照
        if(this.licenseImgFileList.length > 0) {
          //console.log(445,this.licenseImgFileList)
          for(let i = 0; i < this.licenseImgFileList.length; i++) {
            if(i === 0) {
              this.mainForm.license = this.licenseImgFileList[i].url;
            }else {
              this.mainForm.license += ',' + this.licenseImgFileList[i].url;
            }
          }
        }

        // 身份证 正面 数据处理
        if(this.idcardImgFileList.length > 0) {
          for(let i = 0; i < this.idcardImgFileList.length; i++) {
            if(i === 0) {
              this.mainForm.idcard_front = this.idcardImgFileList[i].url;
            }else {
              this.mainForm.idcard_front += ',' + this.idcardImgFileList[i].url;
            }
          }
        }

        // 身份证 反面 数据处理
        if(this.idcardBackImgFileList.length > 0) {
          for(let i = 0; i < this.idcardBackImgFileList.length; i++) {
            if(i === 0) {
              this.mainForm.idcard_back = this.idcardBackImgFileList[i].url;
            }else {
              this.mainForm.idcard_back += ',' + this.idcardBackImgFileList[i].url;
            }
          }
        }

        this.$refs[form].validate((valid) => {
          if (valid) {
            addMain(this.mainForm).then(res => {
              if(res.code == 1) {
                this.$router.push("/fillShopInf");
              }else {
                this.$message({type:'error',message:res.message ? res.message : '保存失败'});
              }
            });
          }
        });
      },
    }
  }
</script>
<style scoped>
 .main-con  /deep/ .uploadData .el-upload-list--picture-card .el-upload-list__item{
    line-height: 20px !important;
  }
</style>

<style lang="scss" type="text/stylus" scoped>
  .fill-store-inf {
    font-size : 16px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;

    .box-card {
      width: 80%;
      margin: 30px auto 30px;
      height: calc(100% - 140px);
      ::v-deep .el-card__body{
        height: calc(100% - 140px);
        overflow-x: hidden;
        overflow-y: scroll;
      }
    }
  }

  .logo-bg {
    height: 60px;
    background: #1890ff;

    img {
      height: 44px;
      margin: 8px 0 8px 20px;
    }
  }

  .steps {
    height: 70px;
    width: 60%;
    margin: 20px auto;
  }

  .steps >>> .el-step__title {
    font-size: 16px;
    line-height: 18px;
    padding-top: 20px;
  }

  .el-step >>> .el-step__head.is-process {
    color: #1890ff;
    border-color: #1890ff;
    .el-step__icon.is-text {
      background-color: #1890ff;
      .el-step__icon-inner {
        color: #fff;
      }
    }
  }

  .el-step >>> .el-step__title.is-process {
    color: #000;
    font-weight : normal;
  }

  .el-step >>> .el-step__head.is-success {
    color: #1890ff;
    border-color: #1890ff;

    .el-step__line {
      background-color: #1890ff;
    }
  }
  .el-step >>> .el-step__title.is-success {
    color: #000;
  }
  // 主体信息
  .main-con {
    width: 70%;
    margin: 30px auto;
    overflow-y: scroll;
    // 重置 提示图标颜色
    .tips-text {
      font-size: 14px;
      color: #C9C9C9;
      word-break: break-all;
    }
    .h-warning:before {
      color: #e3c300;
    }
    // 上传图片样式
    .uploadData {
      display: inline-block;
      ::v-deep  .el-upload--picture-card{
        width: 100px;
        height: 100px;
      }
      ::v-deep  .el-upload{
        width: 100px;
        height: 100px;
        line-height: 100px;
      }
      ::v-deep  .el-upload-list--picture-card .el-upload-list__item{
        width: 100px;
        height: 100px;
        line-height: 100px;
      }
      ::v-deep  .el-upload-list--picture-card .el-upload-list__item-thumbnail{
        width: 100px;
        height: 100px;
        line-height: 100px;
      }
      ::v-deep  .avatar{
        width: 100px;
        height: 100px;
      }
    }
  }

   .hiden-dom >>> .el-upload--picture-card {
     display :none!important;
   }

   .idcard-tips-con {
     display: flex;
     flex-direction: row;
     justify-content: normal;
     justify-items : center;
   }

  .idcard-tips-con > p {
    margin: 0;
    padding: 0 15px;
  }

  .main-form-con {
    margin-left: 100px;
  }

  .main-form-title {
    color: #666;
    font-size: 18px;
    font-weight: 600;
    padding: 0;
    margin: 10px 0 10px -180px;
  }

  .main-form-tips {
    color: #aaa;
    font-size: 14px;
    font-weight: 400;
    padding: 0;
  }
  .confirm-btn {
    width: 50%;
    margin: 40px auto 0;
    p {
      text-align: center;
    }
  }
  .read-fail-dialog >>> .el-dialog > .el-dialog__body > p{
    text-align : center;
    font-size: 16px;
  }

  .read-fail-dialog >>> .read-time-m {
    color: #F56C6C;
    font-size: 18px;
    padding: 0 5px;
  }
</style>