<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" />
    <comp-client-confirm
      ref="compClientConfirm"
      :form-data="formData"
      :wait-visible.sync="waitVisible"
      :opreator-uuid="opreatorUuid"
      type="TBOX"
      prompt-info="操作等待中..."
    />
    <div class="next-step">
      <el-button size="small" plain @click="handlePrev">上一步</el-button>
      <el-button size="small" type="primary" @click="handleSendMsg">发送确认短信</el-button>
    </div>
    <comp-confirm
      :show.sync="tipVisible"
      :desc="desc"
      :show-cancel-btn="false"
      @on-sure="closeVisible"
    />
  </div>
</template>

<script>
import Common from '@/components/Common'
import CompClientConfirm from '@/components/CompClientConfirm'
import CompConfirm from '@/components/CompConfirm'
import { changeTbox } from '@/api/special-business'
export default {
  name: 'ReplacementStepTwo',
  components: {
    CompClientConfirm,
    CompConfirm
  },
  mixins: [Common],
  data() {
    return {
      stepsData: ['车卡信息录入', '客户确认'],
      stepIndex: 1,
      margin: '0 230px 0 230px',
      fullscreenLoading: false,
      waitVisible: false,
      unbindInfo: {},
      opreatorUuid: '',
      formData: {}, // 上一步的数据, 需要读取缓存
      tipVisible: false,
      desc: ''
    }
  },
  created() {
    const cacheData = this.cacheGetStepData('ReplacementStepOne')
    if (cacheData) {
      this.formData.vin = cacheData.vin
      this.formData.iccidList = []
      cacheData.iccidList.forEach(item => {
        if (item.checked) {
          this.formData.iccidList.push(item)
        }
      })
    }
  },
  methods: {
    /**
    * 返回上一步
    * @time 2022-04-23 15:59:56
    */
    handlePrev() {
      this.$router.push({
        name: 'ReplacementStepOne',
        params: {
          from: 'prev'
        }
      })
    },

    /**
    * 确认弹出
    * @time 2022-04-23 14:20:57
    */
    handleSendMsg() {
      this.fullscreenLoading = true
      // 提交车机更换
      const arr = []
      this.formData.iccidList.map(item => {
        arr.push({
          oldIccid: item.iccid,
          newIccid: item.newiccid
        })
      })
      changeTbox({
        vin: this.formData.vin,
        iccidList: arr
      }).then(data => {
        this.unbindInfo = data
        this.opreatorUuid = this.unbindInfo.uuid
        this.fullscreenLoading = false
        this.waitVisible = true
      }).catch((err) => {
        this.fullscreenLoading = false
        this.tipVisible = true
        this.desc = err.message
      })
    },

    /**
    * 关闭警告
    * @time 2022-04-23 15:59:13
    */
    closeVisible() {
      this.tipVisible = false
    }
  }
}
</script>
