<template>
  <div class="fill-store-inf">
    <div class="logo-bg">
      <img 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-step title="提交入驻审核"></el-step>
        </el-steps>
      </div>
      <div class="main-con">
        <el-form ref="mainForm" :model="mainForm" :rules="mainRules" label-width="180px">
          <el-form-item label="主体类型：">
            <el-radio-group v-model="mainForm.organization_type">
              <el-radio :label="1">企业/公司</el-radio>
              <el-radio :label="2">个体工商户</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="执照类型：" prop="license_type">
            <el-select v-model="mainForm.license_type" placeholder="请选择..." style="width: 400px;">
              <el-option
                v-for="item in zzOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </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"
                  action="#"
                  list-type="picture-card"
                  :http-request="uploadLicenseImages"
                  :limit="2"
                  :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:380px;line-height: 24px;padding-top: 6px;">
                <span class="tips-text">图片大小在2MB以内，支持png,jpg格式，最多可上传2张</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="organization_address">
            <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 :gutter="20" label="营业期限：" prop="license_expires_time">
            <el-date-picker type="date" placeholder="选择日期" v-model="periodConcreteTime"
                            style="width: 300px;" :disabled="isConcretePeriod" @change="periodConcrete"></el-date-picker>
            <el-checkbox v-model="periodLongTermVal" :disabled="isPeriodDisabled"
                         style="padding-left:15px;" @change="periodLongTerm">长期
            </el-checkbox>
            <span class="tips-text"><i class="el-icon-warning h-warning"></i>具体时间和长期，二者必填一个</span>
          </el-form-item>

          <el-form-item label="法定代表人证件类型：" prop="idcard_type">
            <el-select v-model="mainForm.idcard_type" placeholder="请选择..." style="width: 400px;">
              <el-option
                v-for="item in idcardTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </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 type="date" placeholder="选择日期" v-model="validityConcreteTime"
                            style="width: 300px;" @change="validityConcrete"></el-date-picker>
            <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;"
                         @change="validityLongTerm">长期
            </el-checkbox>
          </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-right:6px;">
                <el-upload
                  class="uploadData"
                  list-type="picture-card"
                  action="#"
                  :limit="2"
                  :on-exceed="showTip"
                  :before-upload = "beforeUpImg"
                  :http-request="uploadIdcardImages"
                  :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>
              <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">请按顺序分别上传正面（照片面）和反面（国徽面）电子版图片,文件大小在 2MB以内，支持png,jpg格式，最多可上传2张</span>
              </div>
            </div>
          </el-form-item>

          <el-form-item style="padding-top:20px;">
            <el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button>
            <el-button type="primary" @click="next('mainForm')">下一步</el-button>
          </el-form-item>

        </el-form>
      </div>

    </el-card>


  </div>
</template>

<script>
  import { getMainInf,addMain,upLoadImg } from '@/api/module/entry';
  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 === null && this.periodLongTermVal === false) {
          callback(new Error("营业期限具体时间和长期必须填写其中一个"));
        } else {
          callback();
        }
      };
      let idCardTimeValidator = (rule, value, callback) => {
        if (this.validityConcreteTime === null && this.validityLongTermVal === false) {
          callback(new Error("有效期具体时间和长期必须填写其中一个"));
        } else {
          callback();
        }
      };
      return {
        licenseImgFileList: [], // 营业执照图片
        idcardImgFileList: [], // 法人证件照图片
        dialogImageUrl: '',
        dialogVisible: false,
        dialogImageUrl2: '',
        dialogVisible2: false,
        // 执照类型
        zzOptions: [
          {label: "多证合一营业执照（统一社会信用代码）", value: 1},
          {label: "多证合一营业执照（非统一社会信用代码）", value: 2},
        ],
        // 法人执照类型
        idcardTypeOptions: [
          {label: "大陆身份证", value: 1},
          {label: "护照", value: 2},
          {label: "港奥台居民通行证", value: 3},
          {label: "台湾居民通行证", value: 4},
        ],
        // 营业期限
        periodConcreteTime: null,
        periodLongTermVal: false,
        // 证件有效期
        validityConcreteTime: null,
        validityLongTermVal: false,
        isConcretePeriod: false,
        isPeriodDisabled: false,
        isValidity: true, // 有效期至 是否填写
        // 主体信息
        mainForm: {
          organization_type: 2,
          license_type: '',
          license: '',
          organization_name: '',
          organization_address: '',
          license_expires_time: '',
          idcard_type: '',
          real_name: '',
          idcard_number: '',
          idcard_expires_time: '',
          idcard_front: '',
          idcardback: 'jiazhuangwshifanmian'
        },
        // 主体信息校验
        hasLicense: false,
        mainRules: {
          license_type: [{required: true, message: '营业执照类型不能为空', trigger: 'change'}],
          license: [{required: true, message: '请上传营业执照电子版',validator: licenseValidator}],
          organization_name: [{required: true, message: '企业名称不能为空', trigger: 'blur'}],
          organization_address: [{required: true, message: '营业执照地址不能为空', trigger: 'blur'}],
          idcard_type: [{required: true, message: '证件类型不能为空', trigger: 'change'}],
          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' }]
        }
      }
    },
    created() {
      this.getMain();
    },
    mounted() {

    },
    methods: {
      periodConcrete() {
        if (this.periodConcreteTime) {
          this.periodLongTermVal = false;
        }
      },
      periodLongTerm() {
        if (this.periodLongTermVal) {
          this.periodConcreteTime = null;
        }
      },
      validityConcrete() {
        if (this.validityConcreteTime) {
          this.validityLongTermVal = false;
        }
      },
      validityLongTerm() {
        if (this.validityLongTermVal) {
          this.validityConcreteTime = null;
        }
      },
      // 上传图片格式和大小的校验
      beforeUpImg(file) {
        let isImgSize = (file.size / 1024 /1024) > 2;
        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: '上传图片大小不能超过2M',
            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};
          upLoadImg(data).then((res) => {
            //console.log('上传图片新接口返回：', res);
            if(res && res.code ===  1){
              this.licenseImgFileList.push({'url':res.data.image_url});
              this.$message({type: 'success',message:'上传成功'});
              this.$refs.mainForm.clearValidate('license');
            }
          });
        });
      },
      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);
          }
        }
      },
      // 上传法人证件照
      uploadIdcardImages(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img};
          upLoadImg(data).then((res) => {
            if(res && res.code ===  1){
              this.idcardImgFileList.push({'url':res.data.image_url});
              this.$message({type:'success',message:'上传成功'});
              this.$refs.mainForm.clearValidate('idcard_front');
            }
          });
        });
      },
      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);
          }
        }
      },
      // 获取主体信息接口
      getMain() {
        getMainInf().then(res => {
          //console.log("获取主体数据：",res);
          if(res.code === 1) {
            this.resetForm('mainForm');
            this.mainForm = res.data;
            this.mainForm.idcardback = "jzwsfm";

            // 处理证件照
            let licenseList = {};
            let licenseArr = [];

            if(this.mainForm.license.indexOf(",") > 0) {
              licenseArr = this.mainForm.license.split(",");
              for(let a = 0; a < licenseArr.length; a++){
                licenseList = {};
                licenseList.url = licenseArr[a];
                this.licenseImgFileList.push(licenseList);
              }
            }else {
              licenseList.url = this.mainForm.license;
              this.licenseImgFileList = [];
              this.licenseImgFileList.push(licenseList);
            }


            // 处理法人证件照
            let idcardList = {};
            let idcardArr = [];
            if(this.mainForm.idcard_front.indexOf(",") > 0) {
              idcardArr = this.mainForm.idcard_front.split(",");
              for(let a = 0; a < idcardArr.length; a++){
                idcardList = {};
                idcardList.url = idcardArr[a];
                this.idcardImgFileList.push(idcardList);
              }
            }else {
              idcardList.url = this.mainForm.idcard_front;
              this.idcardImgFileList = [];
              this.idcardImgFileList.push(idcardList);
            }


            if(this.mainForm.idcard_expires_time === 0) {
              this.validityLongTermVal = true;
            }else {
              this.validityConcreteTime = this.toStandTime(this.mainForm.idcard_expires_time);
            }

            //
            if(this.mainForm.license_expires_time === 0) {
              this.periodLongTermVal = true;
            }else {
              this.periodConcreteTime = this.toStandTime(this.mainForm.license_expires_time);
            }


          }
        });
      },
      resetForm(formName) {
        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);
          };
        });
      },
      // 时间戳转换为 标准时间格式
      toStandTime(val) {
        let date = new Date(val * 1000)
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
        const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
        const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
        const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
        return Y + M + D + h + m + s;
      },
      showTip(files,fileList) {
        this.$message({message: '最多上传2张图片', type: 'warning'});
      },

      back() {
        this.$router.push("/agreement");
      },
      next(form) {
        // 营业期限
        if(this.periodLongTermVal) {
          this.mainForm.license_expires_time = (this.periodLongTermVal - 0 - 1); // 布尔值减0得到对应数字
        } else if(this.periodLongTermVal === false && this.periodConcreteTime) {
          this.mainForm.license_expires_time = new Date(this.periodConcreteTime).getTime() / 1000;
        }else {
          this.mainForm.license_expires_time = '';
        }
        // 法人证件期限
        if(this.validityLongTermVal) {
          this.mainForm.idcard_expires_time = (this.validityLongTermVal - 0 -1);
        }else if(this.validityLongTermVal === false && this.validityConcreteTime) {
          this.mainForm.idcard_expires_time = new Date(this.validityConcreteTime).getTime() / 1000;
        }else {
          this.mainForm.idcard_expires_time = '';
        }

        // 处理营业执照
        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;
            }
          }
        }

        this.$refs[form].validate((valid) => {
          if (valid) {
            addMain(this.mainForm).then(res => {
              //console.log(441,res);
              this.$router.push("/fillBrandInf");
            });
          }
        });
      },
    }
  }
</script>

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

    .box-card {
      width: 80%;
      margin: 30px auto 30px;
      height: calc(100% - 120px);
      /deep/.el-card__body{
        height: calc(100% - 120px);
        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 50px;
    overflow-y: scroll;
    // 重置 提示图标颜色
    .tips-text {
      font-size: 14px;
      color: #C9C9C9;
      word-break: break-all;
    }
    .h-warning:before {
      color: #e3c300;
    }
    // 上传图片样式
    .uploadData {
      display: inline-block;
      /deep/ .el-upload--picture-card{
        width: 100px;
        height: 100px;
      }
      /deep/ .el-upload{
        width: 100px;
        height: 100px;
        line-height: 100px;
      }
      /deep/ .el-upload-list--picture-card .el-upload-list__item{
        width: 100px;
        height: 100px;
        line-height: 100px;
      }
      /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail{
        width: 100px;
        height: 100px;
        line-height: 100px;
      }
      /deep/ .avatar{
        width: 100px;
        height: 100px;
      }
    }
  }
</style>