<template>
  <div class="page special-business-card-binding">
    <pageTitle title="卡解绑" />
    <owner-type ref="ownerType" :step-index="1" :cur-type="onwnerType" />
    <page-module name="新车主基本信息" icon="info">
      <el-form ref="formRef" :model="form" :rules="formRules" size="small" label-position="top">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="车主姓名" prop="fullName">
              <el-input v-model="form.fullName" placeholder="请输入车主姓名" clearable maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车主性别" prop="gender">
              <el-select v-model="form.gender" placeholder="请选择车主性别" clearable>
                <el-option key="1" value="1" label="男" />
                <el-option key="2" value="2" label="女" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </page-module>
    <page-module name="新车主证件信息" icon="idcard">
      <comp-certificate-info ref="compCertificate" :data="certData" @read-cert="onReadCert" />
    </page-module>
    <page-module name="新车主文件信息" icon="folder">
      <file-info ref="fileinfo1" :data="fileData1" :limit="3" label="购车合同" />
      <file-info ref="fileinfo2" :data="fileData2" :limit="3" label="过户证明" />
    </page-module>
    <page-module name="新车主联系信息" icon="tel">
      <comp-concat-info ref="compConcatInfo" :data="concatData" biz-type="rnr" />
    </page-module>
    <div class="next-step">
      <el-button size="small" plain @click="handlePrev">上一步</el-button>
      <el-button size="small" type="primary" @click="handleNext">下一步</el-button>
    </div>
  </div>
</template>

<script>
import { checkSmsCaptcha } from '@/api/realname-person'
import Common from '@/components/Common'
import OwnerType from './components/owner-type'
import CompCertificateInfo from '@/components/CompCertificateInfo'
import FileInfo from '@/components/FileInfo'
import CompConcatInfo from '@/components/CompConcatInfo'
export default {
  name: 'CardUnbindingStepTwoSnd',
  components: {
    OwnerType,
    CompCertificateInfo,
    FileInfo,
    CompConcatInfo
  },
  mixins: [Common],
  data() {
    return {
      onwnerType: 1,
      form: {
        fullName: '',
        gender: ''
      },
      formRules: {
        fullName: [
          { required: true, message: '请输入车主姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择车主性别', trigger: 'change' }
        ]
      },
      cacheData: null,
      concatData: null,
      certData: null,
      fileData1: {},
      fileData2: {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    /**
    * 初始化
    * @time 2022-04-24 16:50:27
    */
    init() {
      if (this.$route.params.from) {
        // 表明是返回上一步 读缓存
        this.cacheData = this.cacheGetStepData(this.cacheKey)
        if (this.cacheData) {
          const { onwnerType, formData, concatData, fileList1, fileList2, certData } = this.cacheData
          this.onwnerType = onwnerType
          this.form = formData
          this.concatData = concatData
          this.certData = certData
          this.fileData1 = fileList1
          this.fileData2 = fileList2
        }
      }
    },

    onReadCert(data) {
      this.$set(this.form, 'fullName', data.name)
      this.$set(this.form, 'gender', data.gender)
    },

    /**
    * 返回上一步
    * @time 2022-04-23 15:59:56
    */
    handlePrev() {
      this.$router.push({
        name: 'CardUnbindingStepOne',
        params: {
          from: 'prev'
        }
      })
    },

    handleNext() {
      const curForm = this.$refs.formRef
      const certObj = this.$refs.compCertificate.$refs.formRef
      const fileObj1 = this.$refs.fileinfo1.$refs.form
      const fileObj2 = this.$refs.fileinfo2.$refs.form
      const conactObj = this.$refs.compConcatInfo.$refs.formRef
      const refArr = [curForm, certObj, fileObj1, fileObj2, conactObj]
      const formArr = []
      for (let i = 0; i < refArr.length; i++) {
        formArr[i] = new Promise((resolve, reject) => {
          refArr[i].validate((valid) => {
            if (valid) {
              resolve()
            } else {
              reject()
            }
          })
        })
      }
      Promise.all(formArr)
        .then(async() => {
          this.cacheSetStepData(this.cacheKey, {
            onwnerType: this.$refs.ownerType.ownerType,
            formData: this.form,
            concatData: this.$refs.compConcatInfo.form,
            fileList1: this.$refs.fileinfo1.form,
            fileList2: this.$refs.fileinfo2.form,
            certData: this.$refs.compCertificate.form
          })
          // 取出当前输入的手机号和验证码
          const { phone, veCode } = this.$refs.compConcatInfo.form
          // 校验手机号输入是否正确
          await checkSmsCaptcha({ phone, captcha: veCode })
          // 前往下一步
          this.$router.push({
            name: 'CardUnbindingStepThree'
          })
        })
        .catch(() => {
          console.log('fail')
        })
    }
  }
}
</script>
