<template>
  <a-drawer width="65%" :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" :rules="rules">
      <a-form-model-item label="登记日期" prop="registerTime">
        <a-date-picker
          style="width: 100%"
          v-model="form.registerTime"
          format="YYYY-MM-DD HH:mm:ss"
          allow-clear
          :disabled="formType == 3"
        />
      </a-form-model-item>
      <a-form-model-item label="车辆类型" prop="categoryId">
        <a-tree-select
          v-model="form.categoryId"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="carTypeList"
          placeholder="请选择"
          :replaceFields="{ children: 'children', title: 'categoryName', key: 'categoryId', value: 'categoryId' }"
          tree-default-expand-all
          show-search
          tree-node-filter-prop="title"
          :disabled="formType == 3"
        >
        </a-tree-select>
      </a-form-model-item>
      <a-form-model-item label="车牌号" prop="plateNumber">
        <a-input v-model="form.plateNumber" placeholder="请输入车牌号" :disabled="formType == 3" />
      </a-form-model-item>
      <a-form-model-item label="保养费用" prop="upkeepCost">
        <a-input v-model="form.upkeepCost" placeholder="请输入保养费用" type="number" :disabled="formType == 3" />
      </a-form-model-item>
      <a-form-model-item label="保养内容" prop="content">
        <!-- <editor v-model="form.content"  /> -->
        <a-input
          v-model="form.content"
          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" v-if="formType != 3"> 保存 </a-button>
          <a-button type="dashed" @click="cancel"> 取消 </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { getUpkeepRegister, addUpkeepRegister, updateUpkeepRegister } from '@/api/clw/upkeepRegister'
import Editor from '@/components/Editor'
import { moment } from 'moment'
export default {
  name: 'CreateForm',
  props: {
    carTypeList: {
      type: Array,
      required: true,
    },
  },
  components: {
    Editor,
  },
  data() {
    return {
      submitLoading: false,
      formTitle: '',
      // 表单参数
      form: {
        registerTime: null,

        categoryId: null,

        plateNumber: null,

        upkeepCost: null,

        content: null,
      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {
        registerTime: [{ required: true, message: '登记日期不能为空', trigger: 'change' }],

        categoryId: [{ required: true, message: '车辆分类不能为空', trigger: 'change' }],

        plateNumber: [{ required: true, message: '车牌号不能为空', trigger: 'blur' }],

        upkeepCost: [{ required: true, message: '保养费用不能为空', trigger: 'blur' }],

        content: [{ required: true, message: '保养内容不能为空', trigger: 'blur' }],
      },
    }
  },
  filters: {},
  created() {},
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    onClose() {
      this.open = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.formType = 1
      this.form = {
        registerTime: null,

        categoryId: null,

        plateNumber: null,

        upkeepCost: null,

        content: null,
      }
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.submitLoading = false
      this.reset()
      this.formType = 1
      this.open = true
      this.formTitle = '添加'
    },
    /** 修改按钮操作 */
    handleUpdate(row, ids) {
      this.submitLoading = false
      this.formType = 2
      const registerId = row ? row.registerId : ids
      getUpkeepRegister(registerId).then((response) => {
        this.form = response.data
        this.open = true
        this.formTitle = '修改'
      })
    },
    handleInfo(row, ids) {
      this.formType = 3
      const registerId = row ? row.registerId : ids
      getUpkeepRegister(registerId).then((response) => {
        this.form = response.data
        this.open = true
        this.formTitle = '详情'
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate((valid) => {
        this.submitLoading = true
        const params = {
          ...this.form,
        }
        params.registerTime = this.form.registerTime.format
          ? this.form.registerTime.format('YYYY-MM-DD HH:mm:ss')
          : this.form.registerTime
        if (valid) {
          if (this.form.registerId !== undefined && this.form.registerId !== null) {
            updateUpkeepRegister(params)
              .then((response) => {
                this.$message.success('修改成功', 3)
                this.open = false
                this.submitLoading = false
                this.$emit('ok')
              })
              .finally(() => {
                this.submitLoading = false
              })
          } else {
            addUpkeepRegister(params)
              .then((response) => {
                this.$message.success('新增成功', 3)
                this.open = false
                this.submitLoading = false
                this.$emit('ok')
              })
              .finally(() => {
                this.submitLoading = false
              })
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>
