<template>
  <a-drawer width="45%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <a-form-model ref="form" :model="form">
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="提醒日期">
            <a-input v-model="form.remindTime" placeholder="暂无信息" disabled /> </a-form-model-item
        ></a-col>
        <a-col :span="10"
          ><a-form-model-item label="提醒人">
            <a-input v-model="form.remindUserName" placeholder="暂无信息" disabled /> </a-form-model-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="提醒内容">
            <a-input
              v-model="form.remindMessage"
              placeholder="暂无信息"
              :disabled="formType == 3"
            /> </a-form-model-item
        ></a-col>
        <a-col :span="10">
          <a-form-model-item label="提醒类型">
            <!-- :label="dict.label['remind_unit_type'][remindType]" -->
            <a-input
              :value="dict.label['remind_type'][form.remindType]"
              placeholder="暂无信息"
              :disabled="formType == 3"
              disabled
            /> </a-form-model-item
        ></a-col>
      </a-row>
      <a-divider orientation="left">
        <b>申请详情</b>
      </a-divider>
      <div v-if="form.remindType == 'USE_CAR_TIMEOUT' || form.remindType == 'RETURN_CAR'">
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="申请人">
              <a-input v-model="form.metaDetail.applyUserName" placeholder="暂无信息" disabled /></a-form-model-item
          ></a-col>
          <a-col :span="10"
            ><a-form-model-item label="申请机构">
              <a-input v-model="form.metaDetail.deptName" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-row>
          <a-col :span="10"
            ><a-form-model-item label="申请日期">
              <a-input v-model="form.metaDetail.applicationTime" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10">
            <a-form-model-item label="预计归还日期">
              <a-input v-model="form.metaDetail.returnTime" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-row>
          <a-col :span="10"
            ><a-form-model-item label="出发地点">
              <a-input v-model="form.metaDetail.startPlace" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10">
            <a-form-model-item label="目的地">
              <a-input v-model="form.metaDetail.endPlace" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-row>
          <a-col :span="10"
            ><a-form-model-item label="是否超期">
              <a-input v-model="form.metaDetail.isTimeout" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10">
            <a-form-model-item label="是否提醒">
              <a-input v-model="form.metaDetail.isTips" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
      </div>
      <div v-if="form.remindType == 'GAS_CARD'">
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="车牌号">
              <a-input v-model="form.metaDetail.plateNumber" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10">
            <a-form-model-item label="车辆分类">
              <a-input v-model="form.metaDetail.carCategoryName" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-row>
          <a-col :span="10"
            ><a-form-model-item label="申请机构">
              <a-input v-model="form.metaDetail.deptName" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10"
            ><a-form-model-item label="加油油品">
              <a-input v-model="form.metaDetail.gasType" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-row>
          <a-col :span="10"
            ><a-form-model-item label="加油卡号">
              <a-input v-model="form.metaDetail.gasCode" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10"
            ><a-form-model-item label="初始金额">
              <a-input v-model="form.metaDetail.initialAmount" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-row>
          <a-col :span="10"
            ><a-form-model-item label="状态">
              <a-input v-model="form.metaDetail.status" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10"></a-col>
        </a-row>
        <a-form-model-item label="注销原因">
          <a-input v-model="form.metaDetail.logoutReason" type="textarea" placeholder="暂无信息" disabled />
        </a-form-model-item>
      </div>
      <div v-if="form.remindType == 'CHECK_YEAR'">
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="经办人">
              <a-input v-model="form.remindUserName" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10">
            <a-form-model-item label="车牌号">
              <a-input v-model="form.metaDetail.plateNumber" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="年检费用（元）">
              <a-input v-model="form.metaDetail.checkCost" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10">
            <a-form-model-item label="车管所">
              <a-input v-model="form.metaDetail.vehicleOffice" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
      </div>
      <!-- 保养 -->
      <div v-if="form.remindType == 'UPKEEP'">
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="登记日期">
              <a-input v-model="form.metaDetail.registerTime" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10">
            <a-form-model-item label="保养内容">
              <a-input v-model="form.metaDetail.content" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="车牌号">
              <a-input v-model="form.metaDetail.plateNumber" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
          <a-col :span="10">
            <a-form-model-item label="保养费用">
              <a-input v-model="form.metaDetail.upkeepCost" placeholder="暂无信息" disabled /> </a-form-model-item
          ></a-col>
        </a-row>
      </div>
      <!-- 驾驶证 -->

      <div v-if="form.remindType == 'DRIVER_LICENSE'">
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="驾驶证领取时间">
              <a-input
                v-model="form.metaDetail.drivingLicense.firstTime"
                placeholder="暂无信息"
                disabled
              /> </a-form-model-item
          ></a-col>
          <a-col :span="10">
            <a-form-model-item label="驾驶证到期时间">
              <a-input
                v-model="form.metaDetail.drivingLicense.expirationTime"
                placeholder="暂无信息"
                disabled
              /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="驾驶证类型">
              <a-input
                v-model="form.metaDetail.drivingLicense.drivingLicenseType"
                placeholder="暂无信息"
                disabled
              /> </a-form-model-item
          ></a-col>
          <a-col :span="10">
            <a-form-model-item label="驾驶证号码">
              <a-input
                v-model="form.metaDetail.drivingLicense.drivingLicenseCode"
                placeholder="暂无信息"
                disabled
              /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-form-model-item label="驾驶证照片">
          <file-upload
            disabled
            v-model="warrantyImageId"
            type="image"
            module="register_bd"
            v-if="warrantyImageId"
          ></file-upload>
          <div class="imgs" v-else></div>
        </a-form-model-item>
      </div>
      <!-- <a-form-model-item label="状态" prop="status">
        <a-select placeholder="请选择状态" v-model="form.status" :disabled="formType == 3">
          <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.value">{{
            d.label
          }}</a-select-option>
        </a-select>
      </a-form-model-item> -->
      <!-- <a-form-model-item label="备注" prop="remark">
        <a-input v-model="form.metaDetail.remark" placeholder="请输入内容" type="textarea" allow-clear :disabled="formType == 3" />
      </a-form-model-item> -->
      <div class="bottom-control">
        <a-space>
          <!-- <a-button type="primary" :loading="submitLoading" @click="submitForm"> 保存 </a-button> -->
          <a-button type="dashed" @click="cancel"> 取消 </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { getGas, addGas, updateGas, plateNumberList } from '@/api/clw/gas'
import { getmsgInfo } from '@/api/records'
export default {
  name: 'CreateForm',
  dicts: ['remind_type'],
  components: {},
  data() {
    return {
      submitLoading: false,
      formTitle: '',
      // 表单参数
      form: {
        gasCardType: null,

        carId: null,

        deptName: null,

        carCategoryName: null,

        gasType: null,

        gasCode: null,

        initialAmount: null,

        status: '1',

        remark: null,
        metaDetail:{}
      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {
        gasCardType: [{ required: true, message: '加油卡类型不能为空', trigger: 'change' }],

        carId: [{ required: true, message: '车辆ID不能为空', trigger: 'change' }],

        deptName: [{ required: true, message: '机构名称不能为空', trigger: 'blur' }],

        carCategoryName: [{ required: true, message: '车辆分类名称不能为空', trigger: 'blur' }],

        gasType: [{ required: true, message: '油品不能为空', trigger: 'blur' }],

        gasCode: [{ required: true, message: '油卡号不能为空', trigger: 'blur' }],

        initialAmount: [{ required: true, message: '初始金额不能为空', trigger: 'blur' }],

        status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
      },
      cacheCarPlateNumber: {},
      warrantyImageId: '',
    }
  },
  filters: {},
  created() {
    this.getCarNum()
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    onClose() {
      this.open = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.formType = 1
      this.form = {
        gasCardType: null,

        carId: null,

        deptName: null,

        carCategoryName: null,

        gasType: null,

        gasCode: null,

        initialAmount: null,

        status: '1',

        remark: null,
      }
    },
    handleInfo(row) {
      // this.formType = 3
      // const gasId = row ? row.gasId : ids
      getmsgInfo(row.id).then((response) => {
        this.form = response.data
        if(response.data.metaDetail){
          this.form.metaDetail=response.data.metaDetail
        }else{
          this.form.metaDetail={}
        }
        if (response.data.metaDetail && response.data.metaDetail.drivingLicense) {
          this.warrantyImageId = '/api' + response.data.metaDetail.drivingLicense.drivingLicenseImageUrl
        }
        if (response.data.metaDetail.isTimeout) {
          if (response.data.metaDetail.isTimeout == '0') {
            this.form.metaDetail.isTimeout = '未超期'
          }
          if (response.data.metaDetail.isTimeout == '1') {
            this.form.metaDetail.isTimeout = '已超期'
          }
        }
        if (response.data.metaDetail.isTips) {
          if (response.data.metaDetail.isTips == '0') {
            this.form.metaDetail.isTips = '超期未提醒'
          }
          if (response.data.metaDetail.isTips == '1') {
            this.form.metaDetail.isTips = '超期已提醒'
          }
        }
        if (response.data.metaDetail.status) {
          if (response.data.metaDetail.status == '0') {
            this.form.metaDetail.status = '注销'
          }
          if (response.data.metaDetail.status == '1') {
            this.form.metaDetail.status = '正常'
          }
        }
        this.open = true
        this.formTitle = '提醒记录详情'
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          if (this.form.gasId !== undefined && this.form.gasId !== null) {
            updateGas(this.form)
              .then((response) => {
                this.$message.success('修改成功', 3)
                this.open = false
                this.$emit('ok')
              })
              .finally(() => {
                this.submitLoading = false
              })
          } else {
            addGas(this.form)
              .then((response) => {
                this.$message.success('新增成功', 3)
                this.open = false
                this.$emit('ok')
              })
              .finally(() => {
                this.submitLoading = false
              })
          }
        } else {
          return false
        }
      })
    },
    getCarNum() {
      plateNumberList().then((res) => {
        this.cacheCarPlateNumber = res.data.reduce((config, item) => {
          config[item.id] = item
          return config
        }, {})
      })
    },
    changeCarNum(id) {
      const node = this.cacheCarPlateNumber[id]
      this.form.carId = node.id
      this.form.deptId = node.deptId
      this.form.deptName = node.deptName
      this.form.carCategoryName = node.categoryName
      this.form.plateNumber = node.plateNumber
    },
    filterOption(value, option) {
      return option.componentOptions.children[0].text.indexOf(value) >= 0
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-select {
  color: #000;
}
/deep/.ant-input {
  color: #000;
}
.imgs {
  width: 130px;
  height: 130px;
  background: url('../../../../assets/images/zwtp.png') no-repeat;
  background-size: 100% 100%;
}
/deep/.ant-col-10 {
  margin-right: 40px;
}
</style>
