<template>
  <div class="shopInfo">
    <div class="shopInfo_main">
      <div class="head">
        <!-- <img class="bg" src="../../assets/images/bg.png" alt=""> -->
        <!-- <img class="logo" src="../../assets/images/logo_1.png" alt=""> -->
        <!-- <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="brandList" v-if="stepStatus === 1">
          <Form
            ref="merchantDTO"
            :model="merchantDTO"
            :rules="addRules"
            :label-width="120"
          >
            <FormItem label="申请人姓名：" prop="applyName" class="shopList">
              <Input
                placeholder="请输入申请人姓名"
                v-model="merchantDTO.applyName"
                :maxlength="25"
              />
            </FormItem>
            <FormItem label="申请人身份证号：" prop="idCard" class="shopList">
              <Input
                placeholder="请输入申请人身份证号"
                v-model="merchantDTO.idCard"
                :maxlength="30"
              />
            </FormItem>
            <FormItem label="申请人联系方式：" prop="applyPhone" class="shopList">
              <Input
                placeholder="请输入申请人联系方式"
                v-model="merchantDTO.applyPhone"
                :maxlength="30"
              />
            </FormItem>
            <FormItem label="申请人邮寄地址：" prop="postAddress" class="shopList">
              <Input
                placeholder="请输入申请人邮寄地址"
                v-model="merchantDTO.postAddress"
                :maxlength="30"
              />
            </FormItem>
            <FormItem label="证件照正面：" prop="frontCardImg" class="shopList">
              <file-upload
                        v-model="addForm.addForm"
                        :maxNum="1"
                        :defaultList="addForm.defaultFrontCardImg"
                    />
            </FormItem>
            <FormItem label="证件照反面：" prop="afterCardImg" class="shopList">
              <file-upload
                        v-model="addForm.afterCard"
                        :maxNum="1"
                        :defaultList="addForm.defaultAfterCardImg"
                    />
            </FormItem>
            <FormItem label="商户类型：" class="shopList">
              <RadioGroup v-model="merchantDTO.type">
                <Radio :label="1">
                  <span>个人</span>
                </Radio>
                <Radio :label="2">
                  <span>企业</span>
                </Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="企业名称：" v-if="merchantDTO.type == 2" prop="enterpriseName" class="shopList">
              <Input
                placeholder="请输入企业名称"
                v-model="merchantDTO.enterpriseName"
                :maxlength="50"
              />
            </FormItem>
            <FormItem label="社会统一信用码：" v-if="merchantDTO.type == 2" prop="creditCode" class="shopList">
              <Input
                placeholder="请输入社会统一信用码"
                v-model="merchantDTO.creditCode"
                :maxlength="50"
              />
            </FormItem>
            <FormItem label="营业执照：" v-show="merchantDTO.type == 2" prop="businessLicense" class="shopList">
              <file-upload
                v-model="addForm.business"
                :maxNum="1"
                :defaultList="addForm.defaultBusinessLicense"
              />
            </FormItem>
          </Form>

          <Row type="flex" justify="center" slot="footer">
            <Button @click="handleAddSubmit" type="primary" class="btn"
              >提 交</Button
            >
          </Row>
        </div>
        <div class="underReview" v-if="stepStatus === 2">
          <!-- <Button  to="/login" type="primary" size="large" style="width: 100px;height: 46px;margin-bottom: 10px;line-height: 46px">回到首页</Button> -->
          <p>您好，您的入驻申请资料正在审核中，1-2个工作日会出结果!</p>
          <p>如果您想及时了解审核细节，请选择：</p>
          <div class="contact">
            <!-- <Button  class="btn_one">电话咨询</Button>
            <Button class="btn_two">联系客服</Button> -->
            <!-- <Button  to="/login" type="primary" style="width: 100px;height: 46px;margin-bottom: 10px;">回到首页</Button> -->
            <Button to="/login" type="primary" class="btn_two"  style="padding-top:15px">回到首页</Button>
          </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 '_c/file-upload'
import { put, signatureUrl, getFileNameUUID } from '@/libs/ali-oss'

export default {
  inject: ['reload'],
  components: {
    Tables,
    FileUpload
  },
  data () {
    const validateFront = (rule, value, callback) => {
      if (this.addForm.addForm && this.addForm.addForm.length === 0) {
        callback(new Error('请上传证件照正面！'))
      } else {
        callback()
      }
    }
    const validateAfter = (rule, value, callback) => {
      if (this.addForm.afterCard && this.addForm.afterCard.length === 0) {
        callback(new Error('请上传证件照反面！'))
      } else {
        callback()
      }
    }
    const validateBusiness = (rule, value, callback) => {
      if (this.addForm.business && this.addForm.business.length === 0) {
        callback(new Error('请上传营业执照！'))
      } else {
        callback()
      }
    }
    const phoneValidatePass = (rule, value, callback) => {
      if (value != this.phoneUpdatePwdForm.pwd) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      statu: '',
      addRules: {
        applyName: { required: true, message: '请填写申请人姓名！', trigger: 'blur' },
        idCard: { required: true, message: '请填写申请人身份证号！', trigger: 'blur' },
        applyPhone: { required: true, message: '请填写申请人联系方式！', trigger: 'blur' },
        postAddress: { required: true, message: '请填写申请人邮寄地址！', trigger: 'blur' },
        frontCardImg: {
          required: true,
          validator: validateFront,
          trigger: 'change'
        },
        afterCardImg: {
          required: true,
          validator: validateAfter,
          trigger: 'change'
        },
        enterpriseName: {
          required: true,
          message: '请填写企业名称！',
          trigger: 'blur'
        },
        creditCode: { required: true, message: '请填写社会统一信用码！', trigger: 'blur' }
        // businessLicense: {
        //   required: true,
        //   validator: validateBusiness,
        //   trigger: 'change'
        // }
      },
      merchantDTO: {
        token: '', // token
        applyName: '', // 申请人姓名：
        idCard: '', // 申请人身份证号：
        applyPhone: '', // 申请人联系方式：
        postAddress: '', // 申请人邮寄地址：
        frontCardImg: '', // 申请人证件照正面
        afterCardImg: '', // 申请人证件照反面
        type: '', // 商户类型：
        enterpriseName: '', // 企业名称：
        creditCode: '', // 社会统一信用码：
        businessLicense: '', // 营业执照：
        registerPhone: ''
      },
      addForm: {
        addForm: [], // 申请人证件照正面
        afterCard: [], // 申请人证件照反面
        business: [], // 营业执照：
        defaultFrontCardImg: [], // 默认申请人证件照正面
        defaultAfterCardImg: [], // 默认申请人证件照反面
        defaultBusinessLicense: [] // 默认营业执照
      },
      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' }
        ]
      }
    }
  },
  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)
  },
  computed: {
    status: {
      get () {
        // console.log(this.statu)
        return Number(this.statu)
      },
      set () {}
    }
  },
  methods: {
    // handleSubmit () {
    //   document.forms[0].submit()
    // },
    handleUpdatePwd () {
      this.$refs.phoneUpdatePwdForm.validate((valid) => {
        if (valid) {
          this.handlePay()
          setTimeout(() => {
            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
              }
            })
          }, 500)
        }
      })
    },
    handleAddSubmit () {
      this.$refs.merchantDTO.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          let merchantDTO = this.merchantDTO
          merchantDTO.token = this.code
          merchantDTO.registerPhone = this.phone
          merchantDTO.type = JSON.parse(merchantDTO.type)
          merchantDTO.frontCardImg = this.addForm.addForm[0]
          merchantDTO.afterCardImg = this.addForm.afterCard[0]
          merchantDTO.businessLicense = this.addForm.business[0]
          // console.log('addForm', merchantDTO)
          this.api({
            apiName: 'improveInfo',
            postdata: merchantDTO,
            success: (res) => {
              if (res) {
                // console.log('成功了')
                this.submitLoading = false
                this.info(this.code, this.phone)
              }
            }
          })
        }
      })
    },
    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 = 1
                break
            }
            if (res.data.merchant) {
              let {
                afterCardImg,
                applyName,
                applyPhone,
                businessLicense,
                creditCode,
                enterpriseName,
                frontCardImg,
                idCard,
                postAddress,
                type
              } = res.data.merchant
              this.merchantDTO.applyName = applyName
              this.merchantDTO.idCard = idCard
              this.merchantDTO.applyPhone = applyPhone
              this.merchantDTO.postAddress = postAddress
              this.merchantDTO.type = type
              this.addForm.addForm.push(frontCardImg)
              this.addForm.afterCard.push(afterCardImg)
              this.merchantDTO.enterpriseName = enterpriseName
              this.merchantDTO.creditCode = creditCode
              this.addForm.business.push(businessLicense)
              // console.log('1111', this.addForm.business)
            }
          }
        }
      })
    },
    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)
          // console.log('1111haha')
          // 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;
            top: 78px;
            left: 368px;
        }
        .logo_title{
            width: 280px;
            height: 30px;
            font-size: 32px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 46px;
            position: absolute;
            top: 86px;
            left: 20%;
        }
      }
      .main{
        width: 1200px;
        min-height:650px;
        background: #FFFFFF;
        border-radius: 10px;
        position: absolute;
        top:160px;
        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;
          }
        }
        .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;
            }
          }
        }
        .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>
