<template>
  <div class="page">
    <pageTitle title="车企实名认证" />
    <steps :data="dict.carEnterpriseRealnameSteps" :index="0" />
    <CarSimFile 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 CarSimFile from '../realname-enterprise/components/car-sim-file'
import Common from '@/components/Common'
import { checkVinCard } from '@/api/iccid'

export default {
  name: 'CarEnterpriseRealnameFlow1',
  components: {
    CarSimFile
  },
  mixins: [Common],
  data() {
    return {
      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 { fileId } = this.pageData
      await checkVinCard({ fileId, businessType: 4 })
      const data = this.$refs.carSimFile.getPendingCacheData()
      this.cacheSetStepData(this.cacheKey, data)
      this.$router.push({ name: 'CarEnterpriseRealnameFlow2' })
    },

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