<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="0" :cur-type="onwnerType" @change-type="handleOwnerType" />
    <page-module name="车卡信息" icon="car">
      <comp-car-card v-if="isExit" ref="compCarCard" :data="cacheData" :is-bind="true" :souce-page="soucePage" />
    </page-module>
    <div class="next-step">
      <el-button size="small" type="primary" @click="handleNext">下一步</el-button>
    </div>
  </div>
</template>

<script>
import Common from '@/components/Common'
import OwnerType from './components/owner-type'
import CompCarCard from '@/components/CompCarCard'
import { checkVinCard } from '@/api/iccid'

export default {
  name: 'CardUnbindingStepOne',
  components: {
    OwnerType,
    CompCarCard
  },
  mixins: [Common],
  data() {
    return {
      fullscreenLoading: false,
      onwnerType: 0,
      cacheData: null,
      isExit: true,
      soucePage: 'SPECIAL'
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    /**
    * 初始化
    * @time 2022-04-24 16:50:27
    */
    init() {
      if (this.$route.params.owner) {
        this.onwnerType = this.$route.params.owner
        this.soucePage = this.onwnerType !== 1 ? 'SPECIAL' : 'UNBIND'
      }
      if (this.$route.params.from) {
        // 表明是返回上一步 读缓存
        this.cacheData = this.cacheGetStepData(this.cacheKey)
        if (this.cacheData) {
          this.onwnerType = this.cacheData.onwnerType
          this.soucePage = this.onwnerType !== 1 ? 'SPECIAL' : 'UNBIND'
        }
      }
    },

    /**
    * 重置组件
    * @time 2022-05-05 10:19:20
    */
    handleOwnerType(val) {
      this.onwnerType = val
      this.soucePage = this.onwnerType !== 1 ? 'SPECIAL' : 'UNBIND'
      this.cacheData = null
      this.isExit = false
      this.$nextTick(() => {
        this.isExit = true
      })
    },

    /**
    * 前往下一步
    * @time 2022-05-05 10:20:40
    */
    async handleNext() {
      try {
        await this.$refs.compCarCard.validate()
        const data = this.$refs.compCarCard.getPendingCacheData()
        // 校验车卡关系
        const verifyData = {
          iccidList: [],
          vin: data.vin,
          rnrId: data.rnrId,
          businessType: +this.$refs.ownerTypeRef.ownerType === 1 ? 7 : 6
        }
        data.iccidList.forEach(item => {
          if (item.iccid !== '') {
            verifyData.iccidList.push(item.iccid)
          }
        })
        this.fullscreenLoading = true
        await checkVinCard(verifyData)
        this.fullscreenLoading = false
        // 写入缓存
        this.cacheSetStepData(this.cacheKey, {
          onwnerType: this.$refs.ownerTypeRef.ownerType,
          vin: data.vin,
          iccidList: data.iccidList
        })
        // 前往下一步
        const ownerType = this.$refs.ownerTypeRef.ownerType
        if (ownerType === 0) {
          this.$router.push({
            name: 'CardUnbindingStepTwo'
          })
        } else {
          this.$router.push({
            name: 'CardUnbindingStepTwoSnd'
          })
        }
      } catch (e) {
        this.fullscreenLoading = false
        if (e.anchor) {
          e.anchor()
        }
      }
    }
  }
}
</script>
