<template>
  <div class="page">
    <pageTitle title="车企实名解绑" />
    <steps :data="stepsData" :index="stepIndex" :margin="margin" />
    <car-unbind-file ref="carSimFile" :data="pageData" @check="onCheck" />
    <div class="next-step">
      <el-button :disabled="nextBtnStatus" size="small" type="primary" @click="onNextStep">下一步</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CarUnbindFile from './components/car-unbind-file'
import Common from '@/components/Common'
import { checkVinCard } from '@/api/iccid'

export default {
  name: 'CarUnbindingStepOne',
  components: {
    CarUnbindFile
  },
  mixins: [Common],
  data() {
    return {
      stepsData: ['车卡信息', '车企信息'],
      stepIndex: 0,
      margin: '0 200px 0 200px',
      pageData: {}
    }
  },
  computed: {
    ...mapGetters(['dict']),
    nextBtnStatus() {
      const { failCount, totalCount } = this.pageData.checkData
      if (failCount > 0 && failCount === totalCount || !totalCount) {
        return true
      }
      return false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getCacheData()
      if (this.$route.params.from === 'prev') {
        this.restoreCacheData()
      } else {
        this.resetStepData()
      }
    },

    getCacheData() {
      this.cacheData = this.cacheGetStepData(this.cacheKey)
    },

    restoreCacheData() {
      if (this.isValidObject(this.cacheData)) {
        this.pageData = this.cloneObject(this.cacheData)
      } else {
        this.resetStepData()
      }
    },

    resetStepData() {
      this.pageData = {
        fileId: '',
        checkData: {},
        fileList: []
      }
    },

    async onNextStep() {
      // 写入缓存
      const data = this.$refs.carSimFile.getPendingCacheData()
      const { fileId } = this.pageData
      await checkVinCard({ fileId, businessType: 9 })
      this.cacheSetStepData(this.cacheKey, data)
      // 前往下一步
      this.$router.push({
        name: 'CarUnbindingStepTwo'
      })
    },

    onCheck(data) {
      this.pageData = data
    }
  }
}
</script>
