<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="page-loading" class="page">
    <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="BIND"
      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 { surplusCardBind } from '@/api/special-business'
export default {
  name: 'CardBindingStepTwo',
  components: {
    CompClientConfirm,
    CompConfirm
  },
  mixins: [Common],
  data() {
    return {
      stepsData: ['车卡信息录入', '客户确认'],
      stepIndex: 1,
      margin: '0 230px 0 230px',
      waitVisible: false,
      formData: {}, // 上一步的数据, 需要读取缓存
      fullscreenLoading: false,
      unbindInfo: {},
      opreatorUuid: '',
      tipVisible: false,
      desc: ''
    }
  },
  created() {
    this.formData = this.cacheGetStepData('CardBindingStepOne')
  },
  methods: {
    /**
    * 返回上一步
    * @time 2022-04-23 15:59:56
    */
    handlePrev() {
      this.$router.push({
        name: 'CardBindingStepOne',
        params: {
          from: 'prev'
        }
      })
    },

    /**
    * 确认弹出
    * @time 2022-04-23 14:20:57
    */
    handleSendMsg() {
      // bfd331a547764865b2a0b4309f8c95c3
      const curRnrId = this.$refs.compClientConfirm.rnrId
      if (!curRnrId) {
        this.$message.error('获取当前车卡的实名信息失败')
        return false
      }
      this.fullscreenLoading = true
      // 提交绑定剩余卡
      const arr = []
      this.formData.iccidList.map(item => {
        if (item.iccid !== '') {
          arr.push(item.iccid)
        }
      })
      surplusCardBind({
        vin: this.formData.vin,
        iccidList: arr,
        rnrId: curRnrId
      }).then(data => {
        this.opreatorUuid = data.orderId
        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>
