<template>
  <div class="page">
    <pageTitle title="企业实名认证" />
    <steps :data="dict.enterpriseRealnameSteps" :index="0" />
    <page-module name="车卡信息" icon="car">
      <CompVinCard ref="vinCardRef" :data="carCardData" @on-canenable="carCardLoading = !$event" :is-bind="false" />
    </page-module>
    <div class="next-step">
      <el-button :disabled="carCardLoading" size="small" type="primary" @click="onNextStep">下一步</el-button>
    </div>
  </div>
</template>

<script>
import CompVinCard from '@/components/CompVinCard'
import { mapGetters } from 'vuex'
import CarSimFile from './components/car-sim-file'
import Common from '@/components/Common'

export default {
  name: 'EnterpriseRealnameStep1',
  components: {
    CarSimFile,
    CompVinCard
  },
  mixins: [Common],
  data() {
    return {
      carCardData: {},
      carCardLoading: false,
      pageData: {
        vinList: []
      }
    }
  },
  computed: {
    ...mapGetters(['dict'])
  },
  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 = {
        vinList: []
      }
    },

    async onNextStep() {
      const data = this.$refs.vinCardRef.getPendingCacheData()
      // 如果当前没有输入vin
      if (data.vinList.length === 0) {
        return
      }
      // 校验输入
      await this.$refs.vinCardRef.validate()
      this.cacheSetStepData(this.cacheKey, this.$refs.vinCardRef.getPendingCacheData())
      this.cacheDelStepData('EnterpriseRealnameStep2')
      this.cacheDelStepData('EnterpriseRealnameStep3')
      this.cacheDelStepData('EnterpriseRealnameStep4')
      this.$router.push({ name: 'EnterpriseRealnameStep2' })
    },

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