<template>
  <div class="page">
    <pageTitle title="企业实名解绑" />
    <steps :data="stepsData" :index="0" :margin="margin" />
    <page-module name="车卡信息" icon="car">
      <CompVin v-model="formData.vin" ref="vinRef" />
    </page-module>
    <div class="next-step">
      <el-button :loading="loading" size="small" type="primary" @click="handleToNext">下一步</el-button>
    </div>
  </div>
</template>

<script>
import { enterpriseUnBindCheck } from '@/api/special-business'
import Common from '@/components/Common'
import CompVin from '@/components/CompVin'

export default {
  name: 'EnterpriseUnbindingStepOne',
  components: { CompVin },
  mixins: [Common],
  data() {
    return {
      stepsData: ['车卡信息', '责任人确认'],
      margin: '0 200px 0 200px',
      showNext: false,
      loading: false,
      formData: {
        vin: [],
        mobile: ''
      }
    }
  },
  mounted() {
    if (this.$route.params.from) {
      // 获取当前缓存的数据
      this.formData = this.cacheGetStepData('EnterpriseBindingStepOne')
      // 更新vin的数据
      this.$refs.vinRef.updateVinGroup(this.formData.vin)
    }
  },
  methods: {
    /**
     * 校验vin号
     */
    async handleVerifyVin() {
      // 展示loading框
      this.loading = true
      try {
        // 开始校验数据
        this.$refs.vinRef.validate()
        // 校验接口
        const respData = await enterpriseUnBindCheck({ vinList: this.formData.vin })
        // 记录当前输入的电话
        this.formData.mobile = respData.phone
        // 开始校验数据
        this.$refs.vinRef.validate(respData.list)
        // 跳转页面
        this.showNext = true
      } catch (error) {
        console.error(error)
      }
      // 关闭loading框
      this.loading = false
    },

    /**
     * 跳转到下一步
     */
    handleToNext() {
      // 展示loading框
      this.loading = true
      setTimeout(async() => {
        try {
          // 开始校验数据
          this.$refs.vinRef.validate()
          // 校验接口
          const respData = await enterpriseUnBindCheck({ vinList: this.formData.vin })
          // 记录当前输入的电话
          this.formData.mobile = respData.phone
          // 开始校验数据
          this.$refs.vinRef.validate(respData.list)
          // 写入缓存
          this.cacheSetStepData('EnterpriseBindingStepOne', this.formData)
          // 跳转页面
          this.$router.push({ name: 'EnterpriseUnbindingStepTwo' })
        } catch (error) {
          console.error(error)
        }
        // 关闭loading框
        this.loading = false
      }, 100)
    }
  }
}
</script>
