<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="page-loading" class="page car-unbinding-page">
    <pageTitle title="车企实名解绑" />
    <steps :data="stepsData" :index="stepIndex" :margin="margin" />
    <el-form ref="form" :model="form" label-width="80px" label-position="top" size="small">
      <page-module name="车企信息" icon="car">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="companyName">
              <el-input v-model="form.companyName" placeholder="请输入企业名称" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="企业证件类型" prop="companyCertType">
              <el-select v-model="form.companyCertType" placeholder="请选择企业证件类型" disabled>
                <el-option v-for="item of dict.companyCertType" :key="item.key" v-bind="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="企业证件号码" prop="companyCertNumber">
              <el-input v-model="form.companyCertNumber" placeholder="请输入企业证件号码" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="责任人姓名" prop="corporationName">
              <el-input v-model="form.corporationName" placeholder="请输入责任人姓名" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="责任人手机号" prop="corporationPhone">
              <el-input v-model="form.corporationPhone" placeholder="请输入责任人手机号" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </page-module>
      <div class="next-step">
        <el-button size="small" plain @click="handlePrev">上一步</el-button>
        <el-button size="small" type="primary" @click="handleSendMsg">提交</el-button>
      </div>
    </el-form>
    <comp-confirm
      :show.sync="tipVisible"
      :show-cancel-btn="false"
      :desc="unbindData.msg"
      :type="unbindData.type"
      @on-sure="closeVisible"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CompConfirm from '@/components/CompConfirm'
import { manufacturerRnrGetDetail, vehicleUnbound } from '@/api/special-business'
import Common from '@/components/Common'
export default {
  name: 'CarUnbindingStepTwo',
  components: {
    CompConfirm
  },
  mixins: [Common],
  data() {
    return {
      fullscreenLoading: false,
      stepsData: ['车卡信息', '车企信息'],
      stepIndex: 1,
      margin: '0 230px 0 230px',
      form: {
        companyName: '',
        companyCertType: '',
        companyCertNumber: '',
        corporationName: '',
        corporationPhone: ''
      },
      unbindStatus: false, // 解绑状态, 默认失败
      unbindData: {
        msg: '',
        type: ''
      },
      tipVisible: false,
      cacheData: null,
      fileId: ''
    }
  },
  computed: {
    ...mapGetters(['dict'])
  },
  mounted() {
    this.initFuc()
  },
  methods: {
    /**
    * 获取车企详情
    * @time 2022-04-24 12:16:26
    */
    initFuc() {
      // 获取车企详情
      this.fullscreenLoading = true
      manufacturerRnrGetDetail({})
        .then(res => {
          this.fullscreenLoading = false
          this.form = res
        })
        .catch(() => {
          this.fullscreenLoading = false
        })
      // 获取上一步的缓存, 没有将无法提交
      this.cacheData = this.cacheGetStepData('CarUnbindingStepOne')
      if (this.cacheData) {
        this.fileId = this.cacheData.fileId
      } else {
        // 不应该进入页面, 从头开始
        this.$router.replace({
          name: 'CarUnbindingStepOne'
        })
      }
    },

    /**
    * 返回上一步
    * @time 2022-04-23 15:59:56
    */
    handlePrev() {
      this.$router.push({
        name: 'CarUnbindingStepOne',
        params: {
          from: 'prev'
        }
      })
    },

    /**
    * 确认弹出
    * @time 2022-04-23 14:20:57
    */
    handleSendMsg() {
      // 提交车企解绑信息
      this.fullscreenLoading = true
      vehicleUnbound({
        // vehicleCompanyId: '', // 不需要
        fileId: this.fileId
      }).then(data => {
        this.fullscreenLoading = false
        this.unbindStatus = true
        this.unbindData.msg = '卡解绑成功'
        this.unbindData.type = 'success'
        this.tipVisible = true
      }).catch((err) => {
        this.fullscreenLoading = false
        this.unbindStatus = false
        this.unbindData.msg = err.message || '卡解绑失败'
        this.unbindData.type = 'info'
        this.tipVisible = true
      })
    },

    /**
    * 关闭解绑成功弹出
    * @time 2022-04-23 15:59:13
    */
    closeVisible() {
      if (this.unbindStatus) {
        // 成功
        this.$router.replace({
          name: 'Home'
        })
      } else {
        // 失败
        this.tipVisible = false
      }
    }
  }
}
</script>

<style lang="scss">
.car-unbinding-page{
  .is-disabled{
    .el-input__inner{
      color: #333;
    }
  }
}
</style>
