<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="page-loading" class="page special-business-card-binding">
    <pageTitle title="卡解绑" />
    <owner-type ref="ownerTypeRef" :step-index="2" :cur-type="onwnerType" />
    <PageModuleTabs
      :tabs="TABS"
      v-if="device.showTakePhoto"
      v-model="tabName"
    >
      <CompFaceRecognition ref="faceRecognition" :type="livenessType" :take="tabName == 'carmer'" :data="faceData"/>
    </PageModuleTabs>
    <page-module v-else name="活体视频上传" icon="video">
      <CompFaceRecognition ref="faceRecognition" :type="livenessType" :data="faceData"/>
    </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>
    <comp-confirm
      :show.sync="tipVisible"
      :show-cancel-btn="false"
      :desc="unbindData.msg"
      :type="unbindData.type"
      @on-sure="closeVisible"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PageModuleTabs from '@/components/PageModule/tabs'
import Common from '@/components/Common'
import CompConfirm from '@/components/CompConfirm'
import OwnerType from './components/owner-type'
import CompFaceRecognition from '@/components/CompFaceRecognition'
import { cardUnbindSecondHandPersonal, getLivenessCode } from '@/api/special-business'

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: 'CardUnbindingStepThree',
  components: {
    CompConfirm,
    OwnerType,
    CompFaceRecognition,
    PageModuleTabs
  },
  mixins: [Common],
  data() {
    return {
      TABS,
      fullscreenLoading: false,
      onwnerType: 1,
      unbindStatus: false, // 解绑状态, 默认失败
      livenessType: '',
      unbindData: {
        msg: '',
        type: ''
      },
      tipVisible: false,
      faceData: null,
      tabName: 'video'
    }
  },
  computed: {
    ...mapGetters(['device'])
  },
  mounted() {
    this.initFuc()
  },
  methods: {
    /**
    * 初始化
    * @time 2022-05-04 12:35:20
    */
    initFuc() {
      this.fullscreenLoading = true
      getLivenessCode()
        .then((res) => {
          this.faceData = res
          this.faceData.number = res.livenessCode
          this.fullscreenLoading = false
          this.livenessType = res.livenessType
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('获取活体数字验证码失败，请刷新页面重试')
          this.fullscreenLoading = false
        })
    },

    /**
    * 返回上一步
    * @time 2022-04-23 15:59:56
    */
    handlePrev() {
      const ownerType = this.$refs.ownerTypeRef.ownerType
      if (ownerType === 0) {
        this.$router.push({
          name: 'CardUnbindingStepTwo',
          params: {
            from: 'prev'
          }
        })
      } else {
        this.$router.push({
          name: 'CardUnbindingStepTwoSnd',
          params: {
            from: 'prev'
          }
        })
      }
    },

    /**
    * 提交审核
    * @time 2022-04-24 16:00:12
    */
    handleNext() {
      // 二手车解绑
      const fileObj = this.$refs.faceRecognition.$refs.file.$refs.formRef
      const cacheData1 = this.cacheGetStepData('CardUnbindingStepOne')
      const cacheData2 = this.cacheGetStepData('CardUnbindingStepTwoSnd')
      fileObj.validate((valid) => {
        if (valid) {
          const iccidArr = []
          if (cacheData1 && cacheData1.iccidList) {
            cacheData1.iccidList.forEach(ele => {
              if (ele.iccid !== '') {
                iccidArr.push(ele.iccid)
              }
            })
          }
          const { formData, concatData, fileList1, fileList2, certData } = cacheData2
          const certPicArr = []
          if (certData && certData.photoUrls) {
            certData.photoUrls.forEach(ele => {
              certPicArr.push(ele.url.id)
            })
          }
          const contractPic = []
          if (fileList1) {
            fileList1.fileList.forEach(ele => {
              contractPic.push(ele.uuid)
            })
          }
          const certificatePic = []
          if (fileList2) {
            fileList2.fileList.forEach(ele => {
              certificatePic.push(ele.uuid)
            })
          }
          const videoList = this.$refs.faceRecognition.$refs.file.form.fileList
          const videoArr = []
          videoList.forEach(ele => {
            videoArr.push(ele.uuid)
          })
          // 组装整体数据
          const reqData = {
            customerType: 1,
            isConsigner: false,
            vin: cacheData1.vin,
            iccidList: iccidArr,
            // 新车主基本
            fullName: formData.fullName,
            gender: formData.gender,
            // 新车主证件
            certType: certData.type,
            certPic: certPicArr,
            certNumber: certData.no,
            certAddress: certData.address,
            certExpirationDate: certData.validDate,
            certEffectiveDate: certData.certEffectiveDate,
            contactAddress: certData.connectAddress,
            // 新车主文件
            purchaseContractPic: contractPic,
            transferCertificatePic: certificatePic,
            // 新车主联系
            phone: concatData.phone,
            verificationCode: concatData.veCode,
            // 人脸识别地址
            requestId: this.faceData.requestId,
            liveVerificationVideo: videoArr[0]
          }
          this.fullscreenLoading = true
          cardUnbindSecondHandPersonal(reqData)
            .then((res) => {
              this.fullscreenLoading = false
              this.unbindStatus = true
              this.unbindData.msg = '已转入人工审核, 请注意查询认证进度'
              this.unbindData.type = 'success'
              this.tipVisible = true
            })
            .catch((err) => {
              this.fullscreenLoading = false
              this.unbindStatus = false
              this.unbindData.msg = err.message || '校验失败, 请重试'
              this.unbindData.type = 'info'
              this.tipVisible = true
            })
        }
      })
    },

    /**
    * 关闭解绑成功弹出
    * @time 2022-04-23 15:59:13
    */
    closeVisible() {
      if (this.unbindStatus) {
        // 成功
        this.$router.replace({
          name: 'Home'
        })
      } else {
        // 失败
        this.tipVisible = false
      }
    }
  }
}
</script>
