<template>
  <el-dialog v-dialogDrag width="40%" :title="title" :visible.sync="addStatus" :close-on-click-modal="false"
    :before-close="cancel" top="30px">
    <el-form :model="form" label-width="100px" ref="ruleForm" :rules="rules">
      <el-form-item label="名称" prop="label">
        <el-input size="small" clearable v-model="form.label" placeholder="请输入描述值"></el-input>
      </el-form-item>
      <el-form-item label="代码值：" prop="value">
        <template v-if="rowOne.type=='disk_remaining'">
          <el-input size="small" clearable v-model="form.value" type="number"  placeholder="请输入代码值"></el-input>
        </template>
        <template v-else>
          <el-input size="small" clearable v-model="form.value" placeholder="请输入代码值"></el-input>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="submitForm('ruleForm')">保 存</el-button>
        <el-button size="small" type="warning" @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
  import {
    insertItem,
    updateItem
  } from "@/api/system-management/dictionary"
  import {
    message
  } from '@/utils/common';
  export default {
    props: {
      addStatus: {
        type: Boolean,
        default: () => false,
      },
      title: {
        type: String,
        default: () => '',
      },
      form: {
        type: Object,
        default: () => {},
      },
      rowOne: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        rules: {
          label: [{
            required: true,
            message: '请输入名称描述值',
            trigger: 'blur'
          }],
          value: [{
            required: true,
            message: '请输入代码值',
            trigger: 'blur'
          }],
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.title.includes('新增')) {
              let _params = {
                label:this.form.label,
                value:this.form.value,
                type:this.rowOne.type,
                description:this.rowOne.description
              }
              insertItem(_params).then(res => {
                message('success', '新增成功', 3000)
                this.$emit('clickTableOne', this.rowOne)
                this.cancel()
              })
            } else {
              let _params = {
                id:this.form.id,
                label:this.form.label,
                value:this.form.value,
                type:this.rowOne.type,
                description:this.rowOne.description
              }
              updateItem(_params).then(res => {
                message('success', '修改成功', 3000)
                this.$emit('clickTableOne', this.rowOne)
                this.cancel()
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.$refs['ruleForm'].resetFields();
        this.$emit('cancel')
      }
    }
  }

</script>
<style lang='scss' scoped>

</style>
