<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="page">
    <pageTitle title="企业责任人变更" />
    <steps :data="dict.personChangeSteps" :index="1" margin="0 160px" />
    <PageModuleTabs
      :tabs="TABS"
      v-if="device.showTakePhoto"
      v-model="tabName"
    >
      <CompFaceRecognition ref="faceInfo" :type="livenessType" :take="tabName == 'carmer'" :data="faceData"/>
    </PageModuleTabs>
    <page-module v-else name="活体视频上传" icon="video">
      <CompFaceRecognition ref="faceInfo" :type="livenessType" :data="faceData"/>
    </page-module>
    <div class="next-step">
      <el-button size="small" plain @click="onPrevStep">上一步</el-button>
      <el-button size="small" type="primary" @click="onSubmit">提交</el-button>
    </div>
    <comp-confirm
      :show.sync="visible"
      :desc="content"
      :show-cancel-btn="false"
      type="success"
      @on-sure="onSure"
    />
    <comp-confirm
      :show.sync="showErrorConfirm"
      :desc="errorConfirmDesc"
    />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import PageModuleTabs from '@/components/PageModule/tabs'
import { submitEnterpriseChange, getLivenessCode } from '@/api/person-change'
import CompFaceRecognition from '@/components/CompFaceRecognition'
import CompConfirm from '@/components/CompConfirm'
import Common from '@/components/Common'

const TABS = [
  {
    label: '活体视频上传',
    value: 'video',
    icon: require('@/assets/image/video@2x.png')
  },
  {
    label: '在线拍摄视频',
    value: 'carmer',
    icon: require('@/assets/image/icon_user@2x.png')
  }
]

export default {
  name: 'PersonChangeStep1',
  components: {
    CompFaceRecognition,
    CompConfirm,
    PageModuleTabs
  },
  mixins: [Common],
  data() {
    return {
      TABS,
      fullscreenLoading: false,
      visible: false,
      content: '已转入人工审核，请注意查询认证进度',
      pageData: {},
      showErrorConfirm: false,
      livenessType: '',
      errorConfirmDesc: '',
      tabName: 'video'
    }
  },
  computed: {
    ...mapGetters(['dict', 'device']),
    faceData() {
      return this.pageData.faceData || {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    errorTips(errMsg) {
      this.showErrorConfirm = true
      this.errorConfirmDesc = errMsg
    },

    onPrevStep() {
      this.$router.push({ name: 'PersonChangeStep1', params: { from: 'prev' }})
    },

    getSubmitData() {
      const step1Data = this.cacheGetStepData('PersonChangeStep1')
      const ret = {
        companyName: step1Data.enterpriseData.companyName,
        corporationCertAddress: step1Data.certData.address,
        corporationCertExpirationDate: step1Data.certData.validDate,
        corporationCertEffectiveDate: step1Data.certData.certEffectiveDate,
        corporationCertPic: step1Data.certData.photoUrls.filter(item => item.url.id !== null).map(item => item.url.id),
        corporationCertNumber: step1Data.certData.no,
        corporationCertType: step1Data.certData.type,
        corporationContactAddress: step1Data.certData.connectAddress,
        corporationGender: step1Data.baseData.sex,
        corporationName: step1Data.baseData.name,
        corporationPhone: step1Data.concatData.phone,
        captcha: step1Data.concatData.veCode,
        corporationVideo: this.$refs.faceInfo.getFormData().fileList[0].uuid,
        authorizationLetterPic: step1Data.fileData.fileList.map(item => item.uuid),
        origCorporationName: step1Data.enterpriseData.corporationName,
        requestId: this._remoteLiveData.requestId
      }
      return ret
    },

    async init() {
      this.fullscreenLoading = true
      this._remoteLiveData = await this.getLivenessCode()
      this.fullscreenLoading = false
      this.livenessType = this._remoteLiveData ? this._remoteLiveData.livenessType : ''
      this.pageData = {
        faceData: {
          number: this._remoteLiveData ? this._remoteLiveData.livenessCode : ''
        }
      }
    },

    async onSubmit() {
      if (this.faceData.number === '') {
        this.errorTips('获取活体数字验证码失败，请刷新页面重试')
        return
      }
      try {
        await this.$refs.faceInfo.validate()
        this.fullscreenLoading = true
        const respData = await this.submitEnterpriseChange(this.getSubmitData())
        this.fullscreenLoading = false
        if (!respData.isOk) {
          this.errorTips(respData.data.message || '责任人变更失败')
          return
        }
        this.visible = true
      } catch (e) {
        e.anchor()
      }
    },

    async getLivenessCode() {
      try {
        const ret = await getLivenessCode()
        return ret
      } catch (e) {
        return null
      }
    },

    async submitEnterpriseChange(params) {
      try {
        const respData = await submitEnterpriseChange({
          data: {
            ...params
          },
          hideToast: true
        })
        return {
          isOk: true,
          data: respData
        }
      } catch (e) {
        return {
          isOk: false,
          data: e
        }
      }
    },

    onSure() {
      sessionStorage.clear()
      this.$router.push({ name: 'HomePage' })
    }
  }
}
</script>
