     <template>
  <div class="shopInfo">
    <div class="shopInfo_main">
      <div class="head">
        <!-- <img class="bg" src="../../assets/images/bg.png" alt=""> -->
        <div class="logo">
          <!-- <img src="../../assets/images/组 1@2x.png" alt=""> -->
        </div>
        <!-- <p class="logo_title">上链购商户平台</p> -->
      </div>
      <div class="main">
        <h3 class="title">商户入驻申请</h3>
        <Steps :current="stepStatus" class="step">
          <Step title="注册账号"></Step>
          <Step title="完善信息"></Step>
          <Step title="签约激活"></Step>
          <!-- <Step title="缴纳费用"></Step> -->
          <Step title="设置密码"></Step>
          <Step title="完成"></Step>
        </Steps>
        <div class="shop_main_info" v-if="stepStatus === 1">
          <shop-title title="申请信息">
            <div class="shop-info">
              <label class="label">姓名：</label>
              <Input v-model="merchantDTO.applyName"  placeholder="请输入申请人真实姓名" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">身份证号：</label>
              <Input v-model="merchantDTO.idCard"  placeholder="请输入申请人的身份证号，必须与姓名匹配" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">联系手机号：</label>
              <Input v-model="merchantDTO.applyPhone"  placeholder="请输入申请人的手机号" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">联系邮箱：</label>
              <Input v-model="merchantDTO.linkMail"  placeholder="请输入申请人的常用邮箱" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">联系地址：</label>
              <Input v-model="merchantDTO.postAddress"  placeholder="请输入申请人的邮寄地址" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">身份证件照：</label>
              <div style="width:400px;display:flex;justify-content: space-between;">
                <div>
                  <file-upload
                    type="vx"
                    v-model="addForm.frontCard"
                    :maxNum="1"
                    :width="150"
                    :maxSize="2"
                    :defaultList="addForm.defaultFrontCard"
                    @wxId="upWxId($event,'wxFrontCardImg')"
                  />
                  <p class="tip">人面像</p>
                </div>
                <div>
                  <file-upload
                    type="vx"
                    v-model="addForm.afterCard"
                    :maxNum="1"
                    :width="150"
                    :maxSize="2"
                    :defaultList="addForm.defaultAfterCard"
                    @wxId="upWxId($event,'wxAfterCardImg')"
                  />
                  <p class="tip">国徽面</p>
                </div>
              </div>
            </div>
            <div class="shop-info">
              <label class="label">证件有效期(结束)：</label>
              <DatePicker type="date"
                v-model="merchantDTO.certificateValidity"
                placeholder="若为长期请勾选右侧，有效期限必须大于当前日期60天以上"
                style="width: 400px"
                ></DatePicker>
              <p style="margin-left:5px;">
                <Checkbox v-model="isCertificateValidity" @on-change="getCertificateValidity">长期</Checkbox>
              </p>
            </div>
            <div class="shop-info">
              <label class="label">申请人用途
              <Tooltip max-width="200" :content=purposeInfo>
                  <Icon type="md-information-circle"  size='20'/>：
              </Tooltip>
              </label>
              <CheckboxGroup v-model="merchantDTO.purpose">
                <Checkbox label="1" style="width:200px">经营者/法人</Checkbox>
                <Checkbox label="2" style="width:200px">超级管理员</Checkbox>
              </CheckboxGroup>
            </div>
            <div class="shop-info">
              <label class="label">商户类型：</label>
              <RadioGroup v-model="merchantDTO.type" @on-change="changeType">
                <Radio :label="2401" style="width:150px">
                  <span>小微商户</span>
                </Radio>
                <Radio :label="4" style="width:150px">
                  <span>个体工商户</span>
                </Radio>
                <Radio :label="2" style="width:150px">
                  <span>企业</span>
                </Radio>
              </RadioGroup>
            </div>
            <div class="shop-info">
              <label class="label">商户简称：</label>
              <Input v-model="merchantDTO.shortName"  placeholder="请填写商户简称，将会在用户订单中显示" style="width: 400px" />
            </div>
          </shop-title>
          <shop-title title="营业执照信息" v-if="merchantDTO.type != 2401">
            <div class="shop-info">
              <label class="label">证件注册号：</label>
              <Input v-model="merchantDTO.creditCode"  placeholder="请输入营业执照上的证件号，如果是企业类型，则填写统一社会信用代码" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">商户名称：</label>
              <Input v-model="merchantDTO.enterpriseName"  placeholder="请填写证件上的个人姓名或企业名称" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">经营者/法人姓名：</label>
              <Input v-model="merchantDTO.legalPerson"  placeholder="请填写经营者或法人姓名" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">营业期限(开始)：</label>
              <DatePicker type="date" v-model="merchantDTO.businessStartTime" placeholder="请选择营业开始日期" style="width: 400px"></DatePicker>
            </div>
            <div class="shop-info">
              <label class="label">营业期限(结束)：</label>
              <DatePicker type="date" v-model="merchantDTO.businessTime" placeholder="请选择营业结束日期，若为长期，请勾选右侧长期" style="width: 400px"></DatePicker>
              <p style="margin-left:5px;">
                <Checkbox v-model="isBusinessTime" @change="getBusinessTime">长期</Checkbox>
              </p>
            </div>
            <div class="shop-info">
              <label class="label">营业执照：</label>
              <file-upload
                type="vx"
                v-model="addForm.business"
                :maxNum="1"
                :width='150'
                :maxSize="2"
                :defaultList="addForm.defaultBusinessLicense"
                @wxId="upWxId($event,'wxBusinessLicense')"
              />
            </div>
          </shop-title>
          <shop-title title="银行结算信息">
            <div class="shop-info">
              <label class="label">账户类型：</label>
              <Select
                placeholder="请选择账户类型"
                class="search-input"
                v-model="merchantDTO.bankAccountType"
                style="width: 400px"
              >
                <Option
                  v-for="(item, index) of accountTypeList"
                  :value="item.id"
                  :key="'series-option-' + index"
                  :disabled='item.disabled'
                  >{{item.label }}</Option
                >
              </Select>
            </div>
            <div class="shop-info">
              <label class="label">开户银行：</label>
              <Select
                placeholder="请选择银行"
                class="search-input"
                v-model="merchantDTO.accountBank"
                style="width: 400px"
              >
                <Option
                  v-for="(item, index) of bankList"
                  :value="item.id"
                  :key="'series-option-' + index"
                  >{{item.label}}</Option
                >
              </Select>
            </div>
            <div class="shop-info">
              <label class="label">开户银行所在地：</label>
              <Select
                placeholder="请选择省"
                class="search-input"
                v-model="provinceCode"
                style="width: 100px"
                @on-change="getCity"
              >
                <Option
                  v-for="(item, index) of provinceList"
                  :value="item.code"
                  :key="'series-option-' + index"
                  >{{item.areaName }}</Option
                >
              </Select>
              <Select
                placeholder="请选择市"
                class="search-input"
                v-model="cityCode"
                style="width: 100px;margin:0 50px;"
                @on-change="getArea"
              >
                <Option
                  v-for="(item, index) of cityList"
                  :value="item.code"
                  :key="'series-option-' + index"
                  >{{item.areaName }}</Option
                >
              </Select>
              <Select
                placeholder="请选择区"
                class="search-input"
                v-model="merchantDTO.bankAddressCode"
                style="width: 100px"
              >
                <Option
                  v-for="(item, index) of areaList"
                  :value="item.code"
                  :key="'series-option-' + index"
                  >{{item.areaName }}</Option
                >
              </Select>
            </div>
            <div class="shop-info">
              <label class="label">开户银行全称(含支行)：</label>
              <Input v-model="merchantDTO.bankName"  placeholder="请输入开户银行名称(含支行)" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">开户名称：</label>
              <Input v-model="merchantDTO.accountName"  placeholder="请根据实际情况填写个人或企业名称" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">银行账号：</label>
              <Input v-model="merchantDTO.accountNumber"  placeholder="请填写银行账号" style="width: 400px" />
            </div>
          </shop-title>
          <shop-title title="经营者/法人信息" v-if="merchantDTO.purpose.length !=2 && merchantDTO.purpose[0] != 1">
            <div class="shop-info">
              <label class="label">姓名：</label>
              <Input v-model="merchantDTO.idCardName"  placeholder="请填写经营者/法人姓名" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">身份证号：</label>
              <Input v-model="merchantDTO.idCardNumber"  placeholder="请填写经营者/法人身份证号" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">有效期：</label>
              <DatePicker
                type="date"
                v-model="merchantDTO.idCardValidTime"
                placeholder="请选择营业结束日期，若为长期，请勾选右侧长期"
                style="width: 400px"
              ></DatePicker>
              <p style="margin-left:5px;">
                <Checkbox v-model="isIdCardValidTime" @on-change="getCertificateValidity">长期</Checkbox>
              </p>
            </div>
            <div class="shop-info">
              <label class="label">证件照：</label>
              <div style="width:400px;display:flex;justify-content: space-between;">
                <div>
                  <file-upload
                    type="vx"
                    v-model="addForm.idCardCopyImg"
                    :maxNum="1"
                    :width="150"
                    :maxSize="2"
                    :defaultList="addForm.defaultIdCardCopyImg"
                    @wxId="upWxId($event,'wxIdCardCopy')"
                  />
                  <p class="tip">人面像</p>
                </div>
                <div>
                  <file-upload
                    type="vx"
                    v-model="addForm.idCardNationalImg"
                    :maxNum="1"
                    :width="150"
                    :maxSize="2"
                    :defaultList="addForm.defaultIdCardNationalImg"
                    @wxId="upWxId($event,'wxIdCardNational')"
                  />
                  <p class="tip">国徽面</p>
                </div>
              </div>
            </div>
          </shop-title>
          <shop-title title="超级管理员信息" v-if="merchantDTO.purpose.length !=2 && merchantDTO.purpose[0] != 2">
            <div class="shop-info">
              <label class="label">姓名：</label>
              <Input v-model="merchantDTO.contactName"  placeholder="请填写超级管理员的姓名" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">身份证号：</label>
              <Input v-model="merchantDTO.contactIdCardNumber"  placeholder="请填写超级管理员的身份证号" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">手机号：</label>
              <Input v-model="merchantDTO.mobilePhone"  placeholder="请填写超级管理员的联系手机号" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">邮箱：</label>
              <Input v-model="merchantDTO.contactEmail"  placeholder="请填写超级管理员的邮箱" style="width: 400px" />
            </div>
          </shop-title>
          <shop-title title="店铺信息">
            <div class="shop-info">
              <label class="label">店铺名称：</label>
              <Input v-model="merchantDTO.storeName"  placeholder="请填写店铺名称" style="width: 400px" />
            </div>
            <div class="shop-info">
              <label class="label">店铺链接：</label>
              <Input v-model="merchantDTO.storeUrl"  placeholder="请填写店铺链接" style="width: 400px" />
            </div>
          </shop-title>
          <div class="submit-con">
            <Button
              type="primary"
              @click="handleAddSubmit"
              :loading="submitLoading"
              >提交申请信息</Button
            >
          </div>
        </div>
        <div class="wx-contract" v-show="stepStatus === 2">
          <p v-if="this.vxStatus=='AUDITING'||this.vxStatus=='DEFAULT'" style="margin-top:150px;font-size:20px;text-align:center">您已经签约完成，正在审核中，请您耐心等待!</p>
          <div v-else>
            <p class="wx-contract-title">微信支付二级商户签约激活:</p>
            <div class="wx-contract-qr">
              <div class="qrcode" ref="qrCodeUrl"></div>
            </div>
            <p class="wx-contract-bottom" v-if="this.vxStatus=='ACCOUNT_NEED_VERIFY'">请使用企业法人的微信账号扫码签约</p>
            <p class="wx-contract-bottom" v-if="this.vxStatus=='NEED_SIGN'">请使用超级管理员的微信账号扫码签约</p>
          <div class="contact">
            <Button  class="btn_one">联系客服</Button>
            <Button class="btn_two" @click="handelConfirm">已完成签约</Button>
            <!-- <Button to="/login" type="primary" class="btn_two"  style="padding-top:15px">回到首页</Button> -->
          </div>
        </div>

        </div>
        <!-- <div v-if="stepStatus === 3" class="underReview">
          <p>您好，您的入驻申请已经通过，请尽快缴纳费用!</p>
          <div class="contact">
            <Button class="btn_one">联系客服</Button>
            <Button class="btn_two" @click="handlePay">去缴费</Button>
          </div>
        </div> -->
        <div class="brandList" v-if="stepStatus === 3">
        <Form
        :model="phoneUpdatePwdForm"
        ref="phoneUpdatePwdForm"
        :rules="phoneUpdatePwdRules"
        :label-width="100"
      >
        <FormItem label="登录账号">
          <span>{{this.phoneUpdatePwdForm.phone}}</span>
        </FormItem>
        <FormItem label="登录密码" prop="pwd" key="1">
          <Input
            type="password"
            v-model="phoneUpdatePwdForm.pwd"
            :maxlength="16"
            placeholder="长度为6至16个字符"
          />
        </FormItem>
        <FormItem label="确认登录密码" prop="pwd2" key="2">
          <Input
            type="password"
            v-model="phoneUpdatePwdForm.pwd2"
            :maxlength="16"
            placeholder="长度为6至16个字符"
          />
        </FormItem>
      </Form>
        <Row type="flex" justify="center" slot="footer">
            <Button @click="handleUpdatePwd" type="primary" class="btn" :loading="submitLoading"
              >设置密码</Button
            >
        </Row>
      <!-- <Button class="login" @click="handleUpdatePwd">设置密码</Button> -->
        </div>
        <div class="tologin" v-if="stepStatus === 4">
          <p>您好，您已成功入驻上链购商户平台，快去登录发布商品吧！</p>
          <Button to="/login" class="login">去登录</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import FileUpload from './upload.vue'
import ShopTitle from './shop-title'
import { put, signatureUrl, getFileNameUUID } from '@/libs/ali-oss'
import QRCode from 'qrcodejs2'
import { deepCopy } from '@/utils/common'
export default {
  inject: ['reload'],
  components: {
    Tables,
    FileUpload,
    ShopTitle
  },
  data () {
    const phoneValidatePass = (rule, value, callback) => {
      if (value != this.phoneUpdatePwdForm.pwd) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      statu: '',
      merchantDTO: {
        token: '', // 商户注册token
        accountBank: '', // 开户银行
        accountName: '', // 开户名称
        accountNumber: '', // 银行账号
        afterCardImg: '', // 申请人证件照_国徽面
        wxAfterCardImg: '', // 申请人证件照_国徽面ID
        applyName: '', // 申请人姓名
        applyPhone: '', // 申请人联系手机号
        bankAccountType: '', // 账户类型
        bankAddressCode: '', // 开户行所在地
        bankName: '', // 开户银行全称
        businessLicense: '', // 营业执照
        wxBusinessLicense: '', // 营业执照ID
        businessStartTime: '', // 营业期限(开始)
        businessTime: '', // 营业期限(结束)
        certificateValidity: '', // 证件有效期
        contactEmail: '', // 超级管理员邮箱
        contactIdCardNumber: '', // 超级管理员身份证件号码
        contactName: '', // 超级管理员姓名
        creditCode: '', // 证件注册号
        enterpriseName: '', // 商户名称
        frontCardImg: '', // 申请人证件照_人像面
        wxFrontCardImg: '', // 申请人证件照_人像面ID
        idCard: '', // 申请人身份证号
        idCardCopy: '', // 经营者/法人身份证人像面照片
        wxIdCardCopy: '', // 经营者/法人身份证人像面照片ID
        idCardName: '', // 经营者/法人身份证姓名
        idCardNational: '', // 经营者/法人身份证国徽面照片
        wxIdCardNational: '', // 经营者/法人身份证国徽面照片Id
        idCardNumber: '', // 经营者/法人身份证号码
        idCardValidTime: '', // 经营者/法人身份证有效期限 2026-06-06/长期
        legalPerson: '', // 经营者/法人姓名
        linkMail: '', // 联系邮箱
        mobilePhone: '', // 超级管理员手机
        postAddress: '', // 申请人联系地址
        purpose: [], // 1-经营者/法人 2-超级管理员
        registerPhone: '', // 注册手机号
        shortName: '', // 商户简称
        storeName: '', // 店铺名称
        storeUrl: '', // 店铺链接
        type: '' // 商户类别

      },
      addForm: {
        frontCard: [], // 申请人证件照_人像面
        afterCard: [], // 申请人证件照_国徽面
        business: [], // 营业执照：
        idCardCopyImg: [], // 经营者/法人身份证人像面照片
        idCardNationalImg: [], // 经营者/法人身份证国徽面照片
        defaultFrontCard: [], // 默认申请人证件照正面
        defaultAfterCard: [], // 默认申请人证件照反面
        defaultBusinessLicense: [], // 默认营业执照
        defaultIdCardCopyImg: [], // 默认经营者/法人身份证人像面照片
        defaultIdCardNationalImg: [] // 默认经营者/法人身份证国徽面照片
      },
      token: '',
      phone: '',
      stepStatus: 1,
      submitLoading: false,
      phoneUpdatePwdForm: {
        token: '',
        phone: '',
        pwd: '',
        pwd2: ''
      },
      phoneUpdatePwdRules: {
        pwd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        pwd2: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: phoneValidatePass, trigger: 'blur' }
        ]
      },
      purposeInfo: '如果选中“经营者/法人”，则将申请人信息同时作为经营者/法人信息， 如果选中“超级管理员“，则将申请人信息同时作为”超级管理员“',
      isIdCardValidTime: false,
      isCertificateValidity: false,
      isBusinessTime: false,
      accountTypeList: [
        {
          id: '74',
          label: '对公账户'
        },
        {
          id: '75',
          label: '对私账户'
        }
      ],
      bankList: [
        {
          id: '工商银行',
          label: '工商银行'
        },
        {
          id: '交通银行',
          label: '交通银行'
        },
        {
          id: '招商银行',
          label: '招商银行'
        },
        {
          id: '民生银行',
          label: '民生银行'
        },
        {
          id: '中信银行',
          label: '中信银行'
        },
        {
          id: '兴业银行',
          label: '兴业银行'
        },
        {
          id: '光大银行',
          label: '光大银行'
        },
        {
          id: '广发银行',
          label: '广发银行'
        },
        {
          id: '平安银行',
          label: '平安银行'
        },
        {
          id: '北京银行',
          label: '北京银行'
        },
        {
          id: '华夏银行',
          label: '华夏银行'
        },
        {
          id: '农业银行',
          label: '农业银行'
        },
        {
          id: '建设银行',
          label: '建设银行'
        },
        {
          id: '邮政储蓄银行',
          label: '邮政储蓄银行'
        },
        {
          id: '中国银行',
          label: '中国银行'
        },
        {
          id: '宁波银行',
          label: '宁波银行'
        },
        {
          id: '其他银行',
          label: '其他银行'
        }
      ],
      provinceList: [],
      provinceCode: '',
      cityList: [],
      cityCode: '',
      areaList: [],
      vxStatus: '',
      vxSignContract: ''
    }
  },
  created () {
    this.code = this.$route.query.code
    this.phone = this.$route.query.phone
    this.phoneUpdatePwdForm.phone = this.$route.query.phone
    this.phoneUpdatePwdForm.token = this.$route.query.code
    this.info(this.code, this.phone)
    this.getprovince()
  },
  // mounted () {
  //   this.creatQrCode()
  // },
  computed: {
    status: {
      get () {
        // console.log(this.statu)
        return Number(this.statu)
      },
      set () {}
    }
  },
  watch: {
    vxSignContract (val) {
      // console.log('old', val)
      // console.log('newVal', newVal)
      if (val) {
        this.creatQrCode()
      }
    },
    'merchantDTO.type': {
      handler: function (val) {
        this.accountTypeList.forEach(item => {
          item.disabled = false
          if (item.label == '对私账户' && val == 2) {
            item.disabled = true
          } else if (item.label == '对公账户' && val == 2401) {
            item.disabled = true
          }
        })
      },
      deep: true
    }
  },
  methods: {
    upWxId (data, key) {
      // console.log('data', data)
      this.merchantDTO[key] = data
      // console.log(this.merchantDTO.wxFrontCardImg)
    },
    changeType () {
      this.merchantDTO.bankAccountType = ''
    },
    handelConfirm () {
      this.submitLoading = true
      let phone = this.phone
      let token = this.code
      this.api({
        apiName: 'merchantApply',
        postdata: { phone, token },
        success: (res) => {
          if (res) {
            // console.log('成功了', res)
            // if (res.data.type == 'NEED_SIGN') {
            //   return this.$Notice.warning({ title: '请您先完成签约' })
            // } else if (res.data.type == 'ACCOUNT_NEED_VERIFY') {
            //   return this.$Notice.warning({ title: '请您先完成验证' })
            // }
            this.submitLoading = false
            // if (!res.data.status && res.data.message) {
            //   return this.$Message.warning({ content: res.data.message, duration: 4 })
            // }
            this.info(this.code, this.phone)
          }
        },
        complete: () => {
          this.submitLoading = false
        }
      })
    },
    creatQrCode () {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.vxSignContract, // 需要转换为二维码的内容
        width: 132,
        height: 132,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    handleUpdatePwd () {
      this.$refs.phoneUpdatePwdForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          this.api({
            apiName: 'pwdset',
            postdata: this.phoneUpdatePwdForm,
            success: (res) => {
              this.submitLoading = false
              this.info(this.code, this.phone)
            },
            complete: () => {
              this.submitLoading = false
            }
          })
        }
      })
    },
    // handleDateChange (createTime) {
    //   if (createTime && createTime.length == 2 && createTime[0] && createTime[1]) {
    //     this.searchContent.addTimeHead = new Date(createTime[0]).getTime()
    //     this.searchContent.addTimeTail =
    //       new Date(createTime[1]).getTime() + 24 * 60 * 60 * 1000 - 1
    //   } else {
    //     this.searchContent.addTimeHead = ''
    //     this.searchContent.addTimeTail = ''
    //   }
    // },
    getCertificateValidity () {
      if (this.isCertificateValidity) {
        this.merchantDTO.certificateValidity = '长期'
      } else {
        this.merchantDTO.certificateValidity = ''
      }
    },
    getBusinessTime () {
      if (this.isBusinessTime) {
        this.merchantDTO.businessTime = '长期'
      } else {
        this.merchantDTO.businessTime = ''
      }
    },
    getIdCardValidTime () {
      if (this.isIdCardValidTime) {
        this.merchantDTO.idCardValidTime = '长期'
      } else {
        this.merchantDTO.idCardValidTime = ''
      }
    },
    handleAddSubmit () {
      // this.submitLoading = true
      let merchantDTO = deepCopy(this.merchantDTO)
      // if (!merchantDTO.applyName) {
      //   return this.$Notice.warning({ title: '请输入申请人真实姓名' })
      // }
      if (!merchantDTO.idCard) {
        return this.$Notice.warning({ title: '请输入申请人的身份证号' })
      }
      if (!merchantDTO.applyPhone) {
        return this.$Notice.warning({ title: '请输入申请人的手机号' })
      }
      if (!merchantDTO.linkMail) {
        return this.$Notice.warning({ title: '请输入申请人的常用邮箱' })
      }
      if (!merchantDTO.postAddress) {
        return this.$Notice.warning({ title: '请输入申请人的邮寄地址' })
      }
      if (this.addForm.frontCard.length === 0) {
        return this.$Notice.warning({ title: '请选择身份证件照人面像' })
      }
      merchantDTO.frontCardImg = this.addForm.frontCard[0]
      if (this.addForm.afterCard.length === 0) {
        return this.$Notice.warning({ title: '请选择身份证件照国徽像' })
      }
      merchantDTO.afterCardImg = this.addForm.afterCard[0]
      if (!merchantDTO.certificateValidity && !this.isCertificateValidity) {
        return this.$Notice.warning({ title: '请选择证件有效期限' })
      }
      if (merchantDTO.purpose.length === 0) {
        return this.$Notice.warning({ title: '请选择申请人用途' })
      }

      if (!merchantDTO.type) {
        return this.$Notice.warning({ title: '请选择商户类型' })
      }
      merchantDTO.type = JSON.parse(merchantDTO.type)
      if (!merchantDTO.shortName) {
        return this.$Notice.warning({ title: '请填写商户简称' })
      }
      if (!merchantDTO.creditCode && merchantDTO.type != 2401) {
        return this.$Notice.warning({ title: '请输入营业执照上的证件号' })
      }
      if (!merchantDTO.enterpriseName && merchantDTO.type != 2401) {
        return this.$Notice.warning({ title: '请输入商户名称' })
      }
      if (!merchantDTO.legalPerson && merchantDTO.type != 2401) {
        return this.$Notice.warning({ title: '请输入经营者/法人姓名' })
      }
      if (!merchantDTO.businessStartTime && merchantDTO.type != 2401) {
        return this.$Notice.warning({ title: '请输入营业期限(开始)' })
      }
      if (!merchantDTO.businessTime && merchantDTO.type != 2401 && !this.isBusinessTime) {
        return this.$Notice.warning({ title: '请输入营业期限(结束)' })
      }
      if (this.addForm.business.length === 0 && merchantDTO.type != 2401) {
        return this.$Notice.warning({ title: '请上传营业执照' })
      }
      merchantDTO.businessLicense = this.addForm.business[0]
      if (!merchantDTO.bankAccountType) {
        return this.$Notice.warning({ title: '请选择对公账户' })
      }
      if (!merchantDTO.accountBank) {
        return this.$Notice.warning({ title: '请选择开户银行' })
      }
      if (!merchantDTO.bankAddressCode) {
        return this.$Notice.warning({ title: '请选择开户银行所在地' })
      }
      if (!merchantDTO.bankName) {
        return this.$Notice.warning({ title: '请输入开户银行名称(含支行)' })
      }
      if (!merchantDTO.accountName) {
        return this.$Notice.warning({ title: '请输入开户名称' })
      }
      if (!merchantDTO.accountNumber) {
        return this.$Notice.warning({ title: '请填写银行账号' })
      }
      if (!merchantDTO.accountNumber) {
        return this.$Notice.warning({ title: '请填写银行账号' })
      }
      if (!merchantDTO.idCardName && merchantDTO.purpose.length != 2 && merchantDTO.purpose[0] != 1) {
        return this.$Notice.warning({ title: '请填写经营者/法人姓名' })
      }
      if (!merchantDTO.idCardNumber && merchantDTO.purpose.length != 2 && merchantDTO.purpose[0] != 1) {
        return this.$Notice.warning({ title: '请填写经营者/法人身份证号' })
      }
      if (!merchantDTO.idCardNumber && merchantDTO.purpose.length != 2 && merchantDTO.purpose[0] != 1) {
        return this.$Notice.warning({ title: '请填写经营者/法人身份证号' })
      }
      if (!merchantDTO.idCardValidTime && !this.isIdCardValidTime && merchantDTO.purpose.length != 2 && merchantDTO.purpose[0] != 1) {
        return this.$Notice.warning({ title: '请选择营业结束日期' })
      }
      if (this.addForm.idCardCopyImg.length === 0 && merchantDTO.purpose.length != 2 && merchantDTO.purpose[0] != 1) {
        return this.$Notice.warning({ title: '请填写经营者/法人人面像' })
      }
      merchantDTO.idCardCopy = this.addForm.idCardCopyImg[0]
      if (this.addForm.idCardNationalImg.length === 0 && merchantDTO.purpose.length != 2 && merchantDTO.purpose[0] != 1) {
        return this.$Notice.warning({ title: '请填写经营者/法人国徽面' })
      }
      merchantDTO.idCardNational = this.addForm.idCardNationalImg[0]
      if (!merchantDTO.contactName && merchantDTO.purpose.length != 2 && merchantDTO.purpose[0] != 2) {
        return this.$Notice.warning({ title: '请填写超级管理员姓名' })
      }
      if (!merchantDTO.contactIdCardNumber && merchantDTO.purpose.length != 2 && merchantDTO.purpose[0] != 2) {
        return this.$Notice.warning({ title: '请填写超级管理员身份证号' })
      }
      if (!merchantDTO.mobilePhone && merchantDTO.purpose.length != 2 && merchantDTO.purpose[0] != 2) {
        return this.$Notice.warning({ title: '请填写超级管理员手机号' })
      }
      if (!merchantDTO.contactEmail && merchantDTO.purpose.length != 2 && merchantDTO.purpose[0] != 2) {
        return this.$Notice.warning({ title: '请填写超级管理员邮箱' })
      }
      if (!merchantDTO.storeName) {
        return this.$Notice.warning({ title: '请输入店铺名称' })
      }
      if (!merchantDTO.storeUrl) {
        return this.$Notice.warning({ title: '请输入店铺链接' })
      }
      merchantDTO.token = this.code
      merchantDTO.registerPhone = this.phone
      if (!this.isCertificateValidity && merchantDTO.certificateValidity) {
        merchantDTO.certificateValidity = formatTime(merchantDTO.certificateValidity, 'yyyy-MM-dd')
      }
      if (!this.isBusinessTime && merchantDTO.businessTime) {
        merchantDTO.businessTime = formatTime(merchantDTO.businessTime, 'yyyy-MM-dd')
      }
      if (!this.isIdCardValidTime && merchantDTO.idCardValidTime) {
        merchantDTO.idCardValidTime = formatTime(merchantDTO.idCardValidTime, 'yyyy-MM-dd')
      }
      merchantDTO.purpose = JSON.stringify(merchantDTO.purpose)
      this.submitLoading = true
      this.api({
        apiName: 'improveInfo',
        postdata: merchantDTO,
        success: (res) => {
          if (res.code !== '00000') {
            if (res.msg) {
              return this.$Notice.warning({ title: res.msg })
            } else {
              return this.$Notice.warning({ title: '信息填写错误，请重新核对' })
            }
          } else {
            this.$Notice.success({ title: '申请单提交成功,请等待审核！' })
            this.info(this.code, this.phone)
          }
        },
        failed: () => {
          this.submitLoading = false
        },
        error: (error) => {
          this.submitLoading = false
          this.$Notice.warning({ title: error.msg })
        }
      })
    },
    info (code, phone) {
      this.api({
        apiName: 'applyStatusByToken',
        postdata: {
          token: code,
          phone
        },
        success: (res) => {
          if (res) {
            // console.log('成功了')
            this.statu = res.data.status
            switch (this.statu) {
              case 2:
                this.stepStatus = 1
                break
              case 3:
                this.stepStatus = 2
                break
              case 5:
                this.stepStatus = 3
                break
              case 0:
                this.stepStatus = 4
                break
              case 7:
                this.stepStatus = 3
                break
              case 4:
                this.stepStatus = 2
                break
            }
            if (res.data.merchant) {
              let {
                accountBank,
                accountName,
                accountNumber,
                afterCardImg,
                applyName,
                applyPhone,
                bankAccountType,
                areaCode,
                cityCode,
                princeCode,
                bankName,
                businessLicense,
                businessStartTime,
                businessTime,
                certificateValidity,
                contactEmail,
                contactIdCardNumber,
                contactName,
                creditCode,
                enterpriseName,
                frontCardImg,
                idCard,
                idCardCopy,
                idCardName,
                idCardNational,
                idCardNumber,
                idCardValidTime,
                legalPerson,
                linkMail,
                mobilePhone,
                postAddress,
                purpose,
                shortName,
                storeName,
                storeUrl,
                type,
                wxAfterCardImg,
                wxBusinessLicense,
                wxFrontCardImg,
                wxIdCardCopy,
                wxIdCardNational
              } = res.data.merchant
              this.merchantDTO.accountBank = accountBank
              this.merchantDTO.accountName = accountName
              this.merchantDTO.accountNumber = accountNumber
              this.merchantDTO.applyName = applyName
              this.merchantDTO.applyPhone = applyPhone
              this.provinceCode = princeCode
              if (cityCode) {
                this.getCity()
              }
              this.cityCode = cityCode
              if (areaCode) {
                this.getArea()
              }
              this.merchantDTO.bankAddressCode = areaCode
              this.merchantDTO.bankAccountType = bankAccountType
              this.merchantDTO.bankName = bankName
              this.merchantDTO.businessStartTime = businessStartTime
              this.merchantDTO.businessTime = businessTime
              this.merchantDTO.certificateValidity = certificateValidity
              this.merchantDTO.contactEmail = contactEmail
              this.merchantDTO.contactIdCardNumber = contactIdCardNumber
              this.merchantDTO.contactName = contactName
              this.merchantDTO.creditCode = creditCode
              this.merchantDTO.enterpriseName = enterpriseName
              this.merchantDTO.idCard = idCard
              // this.merchantDTO.idCardCopy = idCardCopy
              this.merchantDTO.idCardName = idCardName
              // this.merchantDTO.idCardNational = idCardNational
              this.merchantDTO.idCardNumber = idCardNumber
              this.merchantDTO.idCardValidTime = idCardValidTime
              this.merchantDTO.legalPerson = legalPerson
              this.merchantDTO.linkMail = linkMail
              this.merchantDTO.mobilePhone = mobilePhone
              this.merchantDTO.postAddress = postAddress
              this.merchantDTO.purpose = JSON.parse(purpose)
              this.merchantDTO.shortName = shortName
              this.merchantDTO.storeName = storeName
              this.merchantDTO.storeUrl = storeUrl
              this.merchantDTO.type = JSON.parse(type)
              this.merchantDTO.wxAfterCardImg = wxAfterCardImg
              this.merchantDTO.wxBusinessLicense = wxBusinessLicense
              this.merchantDTO.wxFrontCardImg = wxFrontCardImg
              this.merchantDTO.wxIdCardCopy = wxIdCardCopy
              this.merchantDTO.wxIdCardNational = wxIdCardNational
              this.addForm.frontCard.push(frontCardImg)
              this.addForm.afterCard.push(afterCardImg)
              this.addForm.business.push(businessLicense)
              this.addForm.idCardCopyImg.push(idCardCopy)
              this.addForm.idCardNationalImg.push(idCardNational)
            // console.log('1111', this.addForm.business)
            }
            if (res.data.sign) {
              this.vxSignContract = res.data.sign.url
              this.vxStatus = res.data.sign.type
            }

            // console.log('1111', this.vxSignContract)
          }
        }
      })
    },
    getprovince () {
      this.api({
        apiName: 'getProvincelist',
        success: (res) => {
          if (res) {
            this.provinceList = res.data
          }
        }
      })
    },
    getCity () {
      if (!this.provinceCode) {
        return this.$Notice.warning({ title: '请先选择省！' })
      }
      this.cityCode = ''
      this.merchantDTO.bankAddressCode = ''
      this.api({
        apiName: 'getCityList',
        postdata: this.provinceCode,
        success: (res) => {
          if (res) {
            this.cityList = res.data
          }
        }
      })
    },
    getArea () {
      if (!this.cityCode) {
        return this.$Notice.warning({ title: '请先选择市！' })
      }
      this.api({
        apiName: 'getAreaList',
        postdata: this.cityCode,
        success: (res) => {
          if (res) {
            this.areaList = res.data
          }
        }
      })
    },
    handlePay () {
      this.submitLoading = true
      this.api({
        apiName: 'registerPay',
        postdata: this.phone,
        success: (res) => {
          // console.log('res', res.data)
          this.submitLoading = false
          const div = document.createElement('div')
          // div.innerHTML = JSON.parse(res.data)
          div.innerHTML = res.data
          // console.log('div', div)
          document.body.appendChild(div)
          this.$Notice.success({ title: '获取缴费地址成功正在为您跳转请稍后!' })
          setTimeout(() => {
            document.forms[0].submit()
          }, 1000)
          this.info(this.code, this.phone)
        },
        complete: () => {
          this.submitLoading = false
        }

      })
    }

  }
}
</script>

<style lang="less" scoped>
// * {
//   margin: 0;
//   padding: 0;
// }

.shopInfo {
    background: #F7F7F7 url('../../assets/images/bg.png') no-repeat 0 0 scroll;
    width: 100%;
    // min-width: 1200px;
    height: 100%;
    // height: 2000px;
    overflow-y: scroll;
    // position: relative;
    .shopInfo_main{
      min-width: 1300px;
      position: relative;
      min-height: 800px;
      .head{
        position: relative;
        min-width: 1200px;
        .bg{
            display: block;
            width: 100%;
            height: 10%;

        }
        .logo{
            position: absolute;
            width:1200px;
            top: 88px;
            left: 50%;
            transform: translate(-50%);
            >img{
              width: 180px;
            }
        }
        .logo_title{
            width: 240px;
            height: 30px;
            font-size: 32px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 46px;
            position: absolute;
            top: 86px;
            left: 493px;
        }
      }
      .main{
        width: 1200px;
        min-height:650px;
        background: #FFFFFF;
        border-radius: 10px;
        position: absolute;
        top:200px;
        left: 50%;
        transform: translate(-50%);
        // overflow:scroll;
        .title {
          padding-top: 77px;
          font-size: 34px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          line-height: 46px;
          text-align: center;
        }
        .step {
            width: 80%;
            margin: 0 auto;
            padding: 50px 0 0 9%;
        }
        /deep/
      .ivu-steps-title{
        line-height: 26px;
      }
        .brandList {
          padding: 30px;
          display: block;
          width: 500px;
          margin: 0 auto;
          .shopList {
            padding-bottom: 20px;
          }
          .btn {
            width: 90px;
            height: 48px;
            margin-bottom: 50px;
          }
        }
        .shop_main_info{
          width: 80%;
          margin: 0 auto;
          padding: 50px 0 0 0;
          .shop-info{
            width: 80%;
            display: flex;
            align-items: center;
            margin-bottom: 18px;
            .label{
              display: block;
              width: 200px;
              text-align: right;
              font-size: 14px;
            }
            .tip{
              width:150px;
              text-align:center;
              font-size:13px;
              // color: #ed4014;
            }

          }
          .submit-con {
              text-align: center;
              margin: 20px 0 40px 0;
            }
        }
        .underReview {
          font-size: 20px;
          text-align: center;
          margin: 150px;

          .contact {
            padding: 50px 0;
            width: 300px;
            display: flex;
            margin: 0 auto;
            flex-direction: row;
            justify-content: space-around;
            .btn_one{
              width: 90px;
              height: 48px;
            }
            .btn_two{
              width: 90px;
              height: 48px;
            }
          }
        }
        .wx-contract{
          // font-size: 16px;
          margin: 60px;
          .wx-contract-title{
            font-size: 18px;
            margin-left: 440px;
            font-family: Source Han Sans CN;
            // font-weight: 500;
            color: #333333
          }
          .wx-contract-qr{
            margin:20px 0 0 480px;
            // width: 150px;
            .qrcode {
              display: inline-block;
              img {
                  text-align: center;
                  margin: 10px 120px;
                  width: 132px;
                  height: 132px;
                  background-color: #fff; //设置白色背景色
                  padding: 6px; // 利用padding的特性，挤出白边
              }
            }
          }
          .wx-contract-bottom{
            margin:20px 0 0 440px;
          }
          .contact {
            padding: 50px 0;
            width: 300px;
            display: flex;
            margin: 0 auto;
            flex-direction: row;
            justify-content: space-around;
            .btn_one{
              width: 90px;
              height: 48px;
            }
            .btn_two{
              width: 90px;
              height: 48px;
            }
          }
        }
        .tologin{
          font-size: 20px;
          text-align: center;
          margin: 150px;
          .login{
            margin: 50px;
            width: 90px;
              height: 48px;
              padding: 15px;
          }
        }
      }
    }
}
.phonePas{
      // width: 30%;
      color: #333333;
      font-size: 11px;
      // text-align: right;
      margin-left: 69%;
      cursor:pointer;

  }
  .phonePas:hover{
        color: #2d8cf0;
      }
  .phone{
    /deep/.ivu-input-group-append{
        // width: 90px;
        // height: 48px;
        background-color: #2d8cf0;
        border-color:#2d8cf0;
        color:#fff
    }
  }
</style>
