<template>
  <div class="page">
    <pageTitle title="企业责任人变更" />
    <steps :data="dict.personChangeSteps" :index="0" margin="0 160px" />
    <page-module name="企业基本信息" icon="info">
      <EnterpriseInfo ref="enterpriseInfo" :data="enterpriseData" />
    </page-module>
    <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">
      <FileInfo ref="fileInfo" :data="fileData" label="企业实名认证授权书"/>
    </page-module>
    <page-module name="新责任人联系信息" icon="tel">
      <CompConcatInfo ref="concatInfo" :data="concatData" biz-type="enterprise_change" />
    </page-module>
    <div class="next-step">
      <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 EnterpriseInfo from './components/enterprise-info'
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: 'PersonChangeStep1',
  components: {
    EnterpriseInfo,
    CompBasicInfo,
    CompCertificateInfo,
    FileInfo,
    CompConcatInfo
  },
  mixins: [Common],
  data() {
    return {
      pageData: {
        enterpriseData: {},
        baseData: {},
        certData: {},
        fileData: {},
        concatData: {}
      }
    }
  },
  computed: {
    ...mapGetters(['dict']),
    enterpriseData() {
      return this.pageData.enterpriseData || {}
    },
    baseData() {
      return this.pageData.baseData || {}
    },
    certData() {
      return this.pageData.certData || {}
    },
    fileData() {
      return this.pageData.fileData || {}
    },
    concatData() {
      return this.pageData.concatData || {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getCacheData()
      if (this.$route.params.from === 'prev') {
        this.restoreCacheData()
      } else {
        this.resetStepData()
      }
    },

    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 = {
        enterpriseData: {},
        baseData: {},
        certData: {},
        fileData: {},
        concatData: {}
      }
    },

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

    async onNextStep() {
      try {
        await Promise.all([
          this.$refs.enterpriseInfo.validate(),
          this.$refs.baseInfo.validate(),
          this.$refs.certInfo.validate(),
          this.$refs.fileInfo.validate(),
          this.$refs.concatInfo.validate()
        ])

        const enterpriseData = this.$refs.enterpriseInfo.getPendingCacheData()
        const baseData = this.$refs.baseInfo.getPendingCacheData()
        const certData = this.$refs.certInfo.getPendingCacheData()
        const fileData = this.$refs.fileInfo.getPendingCacheData()
        const concatData = this.$refs.concatInfo.getPendingCacheData()

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

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

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