<template>
  <!-- 增加修改 -->
  <a-modal width="30%" :label-col="4" :wrapper-col="8" :visible="visible" @cancel="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <!-- 柜子要钥匙或者在使用的时候 -->
    <div v-if="formType == 1 && flag.carId">
      <span>请选择开门方式</span>
      <!-- <div style="margin-top: 20px">
        <a-button @click="RelevanceBind(flag, 1)">取还钥匙（会更改钥匙柜使用状态）</a-button>
        <span style="margin: 0 20px"></span>
        <a-button @click="RelevanceBind(flag, 2)">仅开门</a-button>
      </div> -->
      <div style="margin-top: 15px">
        <a-radio-group v-model="values" @change="onChange">
          <a-radio :value="1"> 取还钥匙（会更改钥匙柜使用状态） </a-radio>
          <a-radio :value="2"> 仅开门 </a-radio>
        </a-radio-group>
      </div>
    </div>
    <div v-if="formType == 1 && !flag.carId">
      <span>是否确认打开柜门</span>
    </div>
    <div v-if="formType == 2 && !flag.carId">
      <span>是否确认钥匙柜维修</span>
    </div>
    <!-- 维修完成 -->
    <div v-if="formType == 7 && flag.prevCarId">
      <span
        >是否将原绑定的车钥匙移交到当前钥匙柜
        <span style="color: cornflowerblue; margin-left: 5px">{{ flag.prevPlateNumber }}</span>
      </span>
      <!-- <div style="margin-top: 20px">
        <a-button @click="isTransfer(flag, 1)">需要转移</a-button>
        <span style="margin: 0 20px"></span>
        <a-button @click="isTransfer(flag, 2)">无需转移</a-button>
      </div> -->
      <a-radio-group v-model="value" @change="onChangeKeys">
        <a-radio :value="1"> 需要转移 </a-radio>
        <a-radio :value="2"> 无需转移 </a-radio>
      </a-radio-group>
    </div>
    <div v-if="formType == 7 && !flag.prevCarId">
      <span>是否确认维修完成 </span>
    </div>
    <!-- 解除关联 -->
    <div v-if="formType == 4">
      <span>是否确认解除关联</span>
    </div>
    <!-- 归还提醒 -->
    <div v-if="formType == 5">
      <span>是否提醒归还钥匙</span>
    </div>
    <!-- 维修跟换的钥匙柜 -->
    <div class="keys" v-if="formType == 2 && flag.carId">
      <a-form-model-item label="需要更换的钥匙柜" prop="enabled">
        <a-select placeholder="请选择需要更换的钥匙柜" v-model="form.enabled" @change="changeVal">
          <a-select-option v-for="(d, index) in enabledOptions" :key="index" :value="d.value">{{
            d.title
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
    </div>
    <!-- 关联车辆 -->
    <div class="keys" v-if="formType == 3">
      <a-form-model-item label="关联车辆选择" prop="enabled">
        <a-select placeholder="请选择关联车辆" v-model="form.carId" @change="changeSeletCarId">
          <a-select-option v-for="(d, index) in carPnumList" :key="index" :value="d.value">{{
            d.title
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
    </div>
    <div slot="footer">
      <a-button type="primary" @click="handleEdit">确定</a-button>
      <a-button @click="onClose">取消</a-button>
    </div>
  </a-modal>
</template>

<script>
import { getKeySelect, getCarSelect } from '@/api/keys'
export default {
  name: 'CreateSubForm',
  props: {
    formType: Number,
  },
  components: {},
  data() {
    return {
      formTitle: '钥匙柜提示编辑',
      // 表单参数
      form: {
        enabled: '',
      },
      visible: false,
      rules: {
        // 'key.title': [{ required: true, message: '标题不能为空', trigger: 'change' }],
        // 'key.text1': [{ required: true, message: '保费不能为空', trigger: 'blur' }],
        // 'key.text2': [{ required: true, message: '保额不能为空', trigger: 'blur' }],
        // 'key.text3': [{ required: true, message: '保额不能为空', trigger: 'blur' }],
      },
      enabledOptions: [],
      flag: {},
      carPnumList: [],
      paramsInfo: {},
      showText: null,
      value: 1,
      values: 1,
      showGz: '',
    }
  },
  filters: {},
  created() {
    this.funSelet()
    this.funCarSelets()
  },
  computed: {},
  //   watch: {
  //     list: {
  //       handler(val) {
  //         console.log('--------==',val);
  //         this.form = val
  //       },
  //       deep: true,
  //       immediate: true,
  //     },
  //   },
  methods: {
    onClose() {
      this.visible = false
      this.reset()
    },
    // 取消按钮
    cancel() {
      this.visible = false
      this.reset()
    },
    show(title, item) {
      this.formTitle = title
      this.flag = item
      this.visible = true
    },
    // 表单重置
    reset() {
      this.form = {
        'key.title': undefined,
        'key.text1': undefined,
        'key.text2': undefined,
        'key.text3': undefined,
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.visible = true
      this.reset()
    },
    /** 提交按钮 */
    handleEdit() {
      if (this.formType == 1 && this.values == 2) {
        this.paramsInfo = {
          boxId: this.flag.id,
          status: null,
        }
      } else if (this.formType == 1 && this.values == 1) {
        if (this.flag.status == '1') {
          this.paramsInfo = {
            boxId: this.flag.id,
            status: 2,
          }
        } else if (this.flag.status == '2') {
          this.paramsInfo = {
            boxId: this.flag.id,
            status: 1,
          }
        }
      }
      //   维修完成
      else if (this.formType == 7 && this.flag.prevCarId) {
        if (this.value == 1) {
          this.paramsInfo = {
            boxId: this.flag.id,
            isRollback: true,
          }
        } else if (this.value == 2) {
          this.paramsInfo = {
            boxId: this.flag.id,
            isRollback: false,
          }
        }
      } else if (this.formType == 7 && !this.flag.prevCarId) {
        this.paramsInfo = {
          boxId: this.flag.id,
          isRollback: false,
        }
      }
      //   有钥匙的时候维修柜子
      else if (this.formType == 2 && this.flag.carId) {
        this.paramsInfo = {
          formBoxId: this.flag.id,
          toBoxId: this.form.enabled,
        }
      } else if (this.formType == 2 && !this.flag.carId) {
        this.paramsInfo = {
          formBoxId: this.flag.id,
          toBoxId: null,
        }
      }
      //   单个关联
      else if (this.formType == 3) {
        this.paramsInfo = {
          carId: this.form.carId,
          code: this.flag.code,
        }
      }
      //   解除关联
      else if (this.formType == 4) {
        this.paramsInfo = {
          carId: this.flag.carId,
          code: this.flag.code,
        }
      }
      //   归还提醒
      else if (this.formType == 5) {
        this.paramsInfo = this.flag.using.id
      }
      this.$emit('add', this.paramsInfo, this.showText)
      this.visible = false
    },

    //   钥匙柜字拉下
    funSelet() {
      getKeySelect().then((res) => {
        this.enabledOptions = res.data
      })
    },
    //  车辆钥匙
    funCarSelets() {
      getCarSelect().then((res) => {
        this.carPnumList = res.data
      })
    },
    onChange(val) {
      this.values = val.target.value
      this.showText = '开柜'
    },
    // 维修
    changeVal(node) {
      this.showText = '维修'
    },
    // 维修完成
    onChangeKeys() {
      this.showText = '维修完成'
    },
    changeSeletCarId(val) {
      this.showText = '单个关联'
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-modal {
  margin-top: 200px;
}
.keys {
  /deep/ .ant-select-selection--single {
    width: 300px;
  }
}
</style>
