<template>
  <div class="page">
    <pageTitle title="车企实名认证" />
    <steps :data="dict.enterpriseRealnameSteps" :index="2" />
    <page-module name="责任人基本信息" icon="info">
      <CompBasicInfo ref="baseInfo" :data="baseData" type="enterprise" />
    </page-module>
    <page-module name="证件信息" icon="idcard">
      <CompCertificateInfo ref="certInfo" :data="certData" @read-cert="onReadCert" />
    </page-module>
    <page-module name="文件信息" icon="folder">
      <el-row>
        <el-col :span="12">
          <FileInfo ref="contractInfo" :sign="true" :data="contractData" :upload-type="['camera', 'sign']" sign-key="companyAgreement" label="入网协议"/>
        </el-col>
        <el-col :span="12">
          <FileInfo ref="fileInfo" label="企业实名认证授权书"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <FileInfo ref="dutyInfo" :sign="true" :data="dutyData" :upload-type="['camera', 'sign']" sign-key="realnameNotice" label="责任告知书"/>
        </el-col>
      </el-row>
    </page-module>
    <page-module name="联系信息" icon="tel">
      <CompConcatInfo ref="concatInfo" :data="concatData" />
    </page-module>
    <div class="next-step">
      <el-button size="small" plain @click="onPrevStep">上一步</el-button>
      <el-button size="small" type="primary" @click="onNextStep">下一步</el-button>
    </div>
  </div>
</template>
<script>
import { checkSmsCaptcha } from '@/api/realname-person'
import { mapGetters } from 'vuex'
import CompBasicInfo from '@/components/CompBasicInfo'
import CompCertificateInfo from '@/components/CompCertificateInfo'
import CompConcatInfo from '@/components/CompConcatInfo'
import FileInfo from '@/components/FileInfo'
import Common from '@/components/Common'

export default {
  name: 'CarEnterpriseRealnameStep3',
  components: {
    CompBasicInfo,
    CompCertificateInfo,
    FileInfo,
    CompConcatInfo
  },
  mixins: [Common],
  data() {
    return {
      pageData: {
        baseData: {},
        certData: {},
        fileData: {},
        concatData: {}
      }
    }
  },
  computed: {
    ...mapGetters(['dict', 'deviceType']),
    baseData() {
      return this.pageData.baseData || {}
    },
    certData() {
      return this.pageData.certData || {}
    },
    fileData() {
      return this.pageData.fileData || {}
    },
    dutyData() {
      return this.pageData.dutyData || {}
    },
    concatData() {
      return this.pageData.concatData || {}
    },
    contractData() {
      return this.pageData.contractData || {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getCacheData()
      if (this.$route.params.from === 'prev') {
        this.restoreCacheData()
      } else {
        this.resetStepData()
      }

      // 从缓存中取出数据
      const stepPc = this.cacheGetStepData('CarEnterpriseRealnameStep1') || {}
      this.attachment = {
        fileId: stepPc.checkData ? stepPc.checkData.fileId : ''
      }
    },

    getCacheData() {
      this.cacheData = this.cacheGetStepData(this.cacheKey)
    },

    restoreCacheData() {
      if (this.isValidObject(this.cacheData)) {
        this.pageData = this.cloneObject(this.cacheData)
      } else {
        this.resetStepData()
      }
    },

    resetStepData() {
      this.pageData = {
        baseData: {},
        certData: {},
        fileData: {},
        dutyData: {},
        concatData: {},
        contractData: {}
      }
    },

    onReadCert(data) {
      this.$set(this.pageData.baseData, 'name', data.name)
      this.$set(this.pageData.baseData, 'sex', data.gender)
      this.$refs.baseInfo.validate()
    },

    /**
    * 上一步
    * @time 2022-04-23 16:33:24
    */
    onPrevStep() {
      this.$router.push({ name: 'CarEnterpriseRealnameStep2', params: { from: 'prev' }})
    },

    /**
    * 下一步
    * @time 2022-04-23 15:50:05
    */
    async onNextStep() {
      try {
        const valid = [
          this.$refs.baseInfo.validate(),
          this.$refs.certInfo.validate(),
          this.$refs.contractInfo.validate(),
          this.$refs.fileInfo.validate(),
          this.$refs.dutyInfo.validate(),
          this.$refs.concatInfo.validate()
        ]
        await Promise.all(valid)

        const baseData = this.$refs.baseInfo.getPendingCacheData()
        const certData = this.$refs.certInfo.getPendingCacheData()
        const contractData = this.$refs.contractInfo.getPendingCacheData()
        const fileData = this.$refs.fileInfo.getPendingCacheData()
        const dutyData = this.$refs.dutyInfo.getPendingCacheData()
        const concatData = this.$refs.concatInfo.getPendingCacheData()

        // 校验手机号输入是否正确
        await checkSmsCaptcha({
          phone: concatData.phone,
          captcha: concatData.veCode
        })

        this.cacheSetStepData(this.cacheKey, { baseData, certData, fileData, contractData, dutyData, concatData })

        this.$router.push({ name: 'CarEnterpriseRealnameStep4' })
      } catch (e) {
        e.anchor()
      }
    }
  }
}
</script>
