<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="40%">
    <el-form ref="dataForm" :model="TimeLimitForm" :rules="rules" label-width="100px" style="margin-right:60px">
      <el-form-item prop="dictId" label="案卷状态">
        <el-select v-model="TimeLimitForm.dictId" style="width:100%" placeholder="请选择案卷状态" @change="selectChange">
          <el-option
            v-for="item in caseStateOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="attribute" label="限制时限">
        <el-input v-model.number="TimeLimitForm.attribute" class="form-item">
          <template slot="append">分钟</template>
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveData">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCaseState, addStateLimit, updateStateLimit } from '@/api/busAdmin/timeLimit'

export default {
  name: 'EditTimeLimit',
  data() {
    return {
      dialogFormVisible: false,
      dialogStatus: '',
      TimeLimitForm: {
        id: '',
        description: '',
        attribute: '',
        dictId: '',
        dictCode: ''
      },
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        dictId: [{ required: true, message: '案卷类型不能为空', trigger: ['blur', 'change'] }],
        attribute: [{ required: true, message: '限制时限不能为空', trigger: ['blur', 'change'] },
          { type: 'number', min: 0, message: '限制时限必须为非负数', trigger: ['blur', 'change'] }]
      },
      caseStateOptions: [],
      caseStateMap: {}
    }
  },
  mounted() {
    this.fetchCaseState()
  },
  methods: {
    initDialog(dialogFormVisible, dialogStatus, row = null) {
      this.dialogFormVisible = dialogFormVisible
      this.dialogStatus = dialogStatus
      if (this.dialogStatus === 'create') {
        // 新增时，清空表格和校验
        this.resetForm()
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      } else if (this.dialogStatus === 'update') {
        // 更新时，填充数据
        console.log(row)
        this.TimeLimitForm.id = row.id
        this.TimeLimitForm.description = row.description
        this.TimeLimitForm.attribute = Number(row.attribute)
        this.TimeLimitForm.dictId = row.dictId
        this.TimeLimitForm.dictCode = row.dictCode
      }
    },
    fetchCaseState() {
      getCaseState().then(response => {
        this.caseStateOptions = response.data
        this.caseStateOptions.forEach(item => {
          // this.caseStateMap[item.id].name = item.name
          // this.caseStateMap[item.id].code = item.value

          this.caseStateMap[item.id] = {
            name: item.name,
            code: item.value
          }
        })
      })
    },
    resetForm() {
      this.TimeLimitForm = {
        id: '',
        description: '',
        attribute: '',
        dictId: '',
        dictCode: ''
      }
    },
    cancel() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    },
    selectChange(value) {
      // console.log(value, this.caseStateMap[value].name, this.caseStateMap[value].code)
      this.TimeLimitForm.dictId = value
      this.TimeLimitForm.description = this.caseStateMap[value].name
      this.TimeLimitForm.dictCode = this.caseStateMap[value].code
    },
    saveData() {
      if (this.dialogStatus === 'create') {
        this.createData()
      } else if (this.dialogStatus === 'update') {
        this.updateData()
      }
    },
    createData() {
      console.log('create data')
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          console.log('create valid success')
          console.log(this.TimeLimitForm)
          addStateLimit(this.TimeLimitForm).then(response => {
            if (response.code === 200) {
              this.$message.success('添加成功')
              this.$emit('watchChild')
              this.dialogFormVisible = false
            } else {
              this.$message.error('添加失败')
            }
          })
        } else {
          console.log('create valid error')
        }
      })
    },
    updateData() {
      console.log('update data')
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          console.log('update valid success')
          console.log(this.TimeLimitForm)
          updateStateLimit(this.TimeLimitForm).then(response => {
            if (response.code === 200) {
              this.$message.success('修改成功')
              this.$emit('watchChild')
              this.dialogFormVisible = false
            } else {
              this.$message.error('修改失败')
            }
          })
        } else {
          console.log('update valid error')
        }
      })
    }
  }
}
</script>

<style scoped>
</style>