<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="page-loading" class="page special-business-replacement">
    <pageTitle title="换件" />
    <steps :data="stepsData" :index="stepIndex" :margin="margin" />
    <page-module name="车卡信息" icon="car">
      <iccid-change ref="compCarCard" :data="cacheData" />
    </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 IccidChange from './components/iccid-change'
import { checkVinCard } from '@/api/iccid'

export default {
  name: 'ReplacementStepOne',
  components: {
    IccidChange
  },
  mixins: [Common],
  data() {
    return {
      fullscreenLoading: false,
      stepsData: ['车卡信息录入', '客户确认'],
      stepIndex: 0,
      margin: '0 200px 0 200px',
      cacheData: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    /**
    * 初始化
    * @time 2022-04-24 16:50:27
    */
    init() {
      if (this.$route.params.from) {
        // 表明是返回上一步 读缓存
        this.cacheData = this.cacheGetStepData(this.cacheKey)
      }
    },

    /**
    * 下一步操作
    * @time 2022-04-24 16:50:14
    */
    async handleNext() {
      // 校验
      try {
        await Promise.all([
          this.$refs.compCarCard.validate()
        ])
        const iccidList = this.$refs.compCarCard.selectedList
        if (iccidList.length <= 0) {
          this.$message.error('请勾选ICCID卡')
          return false
        }
        let isAlert = false
        let tipMsg = ''
        for (let i = 0; i < iccidList.length; i++) {
          if (iccidList[i].iccid === '' || iccidList[i].newiccid === '') {
            isAlert = true
            tipMsg = '选中的ICCID卡原件或新件ICCID不能为空'
            break
          }
          if (iccidList[i].newiccid.length < 20) {
            isAlert = true
            tipMsg = '新件ICCID格式不对'
            break
          }
        }
        if (isAlert) {
          this.$message.error(tipMsg)
          return false
        }
        // 校验车卡关系
        const verifyData = {
          businessType: 8,
          iccidList: [],
          newIccidList: [],
          vin: this.$refs.compCarCard.form.vin
        }
        iccidList.forEach(item => {
          if (item.iccid !== '') {
            verifyData.iccidList.push(item.iccid)
            verifyData.newIccidList.push(item.newiccid)
          }
        })
        this.fullscreenLoading = true
        const retData = await checkVinCard(verifyData)
        if (retData.iccidVerifyResults && retData.iccidVerifyResults.length > 0) {
          const resList = retData.iccidVerifyResults
          for (let i = 0; i < resList.length; i++) {
            if (!resList[i].exist) {
              // 车卡关系不正常
              isAlert = true
              break
            }
          }
        }
        this.fullscreenLoading = false
        if (isAlert) {
          this.$message.error('数据校验不通过')
          return false
        }
        // 写入缓存
        this.cacheSetStepData(this.cacheKey, {
          vin: this.$refs.compCarCard.form.vin,
          iccidList: this.$refs.compCarCard.iccidList // 存缓存需存全部
        })
        // 前往下一步
        this.$router.push({
          name: 'ReplacementStepTwo'
        })
      } catch (e) {
        this.fullscreenLoading = false
        if (e.anchor) {
          e.anchor()
        }
      }
    }
  }
}
</script>
