<template>
    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑todo 工单名称` " :close-on-click-modal="false" :show-close="false">
      <el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="工单号" prop="gdh">
          <el-input :disabled="mode !=='add'" v-model="formData.gdh" placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="工单标题" prop="title" required>
          <el-input v-model="formData.title" placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="问题描述" prop="question" required>
          <el-input v-model="formData.question" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="处理状态" prop="handleStatus">
          <el-select v-model="formData.handleStatus" placeholder="请选择">
            <el-option :label="value" :value="key" v-for="(value,key) in handleStatusOptions" :key="key+'handleStatusOptions'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交人" prop="submitName" required>
          <el-input v-model="formData.submitName" placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="处理人" prop="handleName" required>
          <el-input v-model="formData.handleName" placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="提交时间" prop="submitTime" required>
          <el-input v-model="formData.submitTime" placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveDialog">确定</el-button>
      </div>
    </el-dialog>
</template>
<script>
export default {
  props:{
    mode:{
      type:String,
      default:"add"
    },
//todo 修改数据时，从接口获取工单详情还是从列表中返回？
  },
  data() {
    return {
      dialogTableVisible:false,
      handleStatusOptions:{'0':'处理完成','1':'处理中','2':'未处理'},
      formData: {
        gdh: '',//工单号
        title: '',//工单标题
        question: '',
        handleStatus:'',
        submitName:'',
        handleName: '',
        submitTime: '',
      },
      rules: {
        gdh: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    saveDialog() {
      this.$refs.addTempForm.validate(valid => {
        if (!valid) return
        this.closeDialog()
      })
    },
    closeDialog(){
      // 清空所有数据
      this.$refs.addTempForm.resetFields()
      this.formData={
        gdh: '',//工单号
        title: '',//工单标题
        question: '',
        handleStatus:'',
        submitName:'',
        handleName: '',
        submitTime: '',
      }
      this.dialogTableVisible=false
    }
  }
}

</script>
<style scoped>
.ems-dialog{
  .el-dialog{
    max-width: 700px;
  }
  .add-time-form{
    .el-input{
      width: 220px;
    }
  }
}
</style>
