<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="page-person-real-step1">
    <page-title title="自然人实名认证"/>
    <steps :data="stepData"/>
    <page-module name="业务类型" icon="star">
      <CompBusType ref="busType" :data="busTypeData" @change="userType => (isBind = userType === 'old')" />
    </page-module>
    <page-module name="车卡信息" icon="car">
      <CompCarCard ref="carCard" :data="carCardData" @on-canenable="carCardLoading = !$event" :is-bind="isBind" />
    </page-module>
    <div class="next-step">
      <el-button :disabled="carCardLoading" size="small" type="primary" @click.stop="clickNextStep">下一步</el-button>
    </div>
  </div>
</template>

<script>
import { checkVinCard } from '@/api/iccid'
import PageTitle from '@/components/PageTitle'
import Steps from '@/components/Steps'
import CompBusType from '@/components/CompBusType'
import CompCarCard from '@/components/CompCarCard'
import Common from '@/components/Common'
import SelfCommon from './components/common'

export default {
  name: 'PersonRealnameStep1',
  components: {
    PageTitle,
    Steps,
    CompBusType,
    CompCarCard
  },
  mixins: [Common, SelfCommon],
  data() {
    return {
      stepData: ['车卡信息录入', '填写客户信息', '完成人脸识别'],
      pageData: {},
      isBind: false,
      carCardLoading: false,
      fullscreenLoading: false
    }
  },
  computed: {
    busTypeData() {
      return this.pageData.busTypeData || {}
    },
    carCardData() {
      return this.pageData.carCardData || {}
    }
  },
  methods: {
    init() {
      this.initStepCachePageData()
      this.initRenderPage()
    },
    show() {
      // todo
    },

    // 初始化空页面数据
    initEmptyPageData() {
      this.pageData = this.makeEmptyPageDataTemplate()
    },
    // 从缓存恢复数据
    restorePageDataFromCache() {
      const _step1CachePageData = this._step1CachePageData
      if (this.isValidObject(_step1CachePageData)) {
        this.pageData = this.cloneObject(_step1CachePageData)
      } else {
        this.initEmptyPageData()
      }
    },
    // 获取缓存的 step page data
    initStepCachePageData() {
      this._step1CachePageData = this.cacheGetStepData(this.cacheKey)
    },

    // 下一步
    async clickNextStep() {
      try {
        await Promise.all([
          this.$refs.busType.validate(),
          this.$refs.carCard.validate()
        ])
        this.nextStepHandler()
      } catch (e) {
        e.anchor()
      }
    },
    async nextStepHandler() {
      // 校验车卡关系
      this.fullscreenLoading = true
      const retData = await this.verifyVinCardsInfo()
      this.fullscreenLoading = false
      if (retData === null) {
        return
      }

      const step1CachePageData = this.makeEmptyPageDataTemplate()
      step1CachePageData.busTypeData = this.$refs.busType.getPendingCacheData()
      step1CachePageData.carCardData = this.$refs.carCard.getPendingCacheData()
      this.cacheSetStepData(this.cacheKey, step1CachePageData)
      this.$router.push({
        name: 'PersonRealnameStep2'
      })
    },

    async verifyVinCardsInfo() {
      try {
        return await checkVinCard(this.getVerifyVinCardsInfoParams(this.$refs.carCard.getPendingCacheData(), { businessType: this.isBind ? 2 : 1 }))
      } catch (e) {
        return null
      }
    },

    makeEmptyPageDataTemplate() {
      return {
        busTypeData: null,
        carCardData: null
      }
    }
  }
}
</script>

<style lang="scss">
.page-person-real-step1 {
  padding-bottom: 64px;
  .next-step {
    z-index: 5;
  }
}
</style>
