<template>
<!-- 添加左侧字典项 -->
  <el-dialog v-dialogDrag width="40%" :title="title" :visible.sync="addLeftStatus" :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="type">
        <el-input size="small" clearable v-model="form.type" placeholder="请输入类型名称"></el-input>
      </el-form-item>
      <template v-if="title.includes('新增')">
        <el-form-item label="子项名称" prop="label">
          <el-input type="textarea" :rows="2" size="small" clearable v-model="form.label" placeholder="请输入子项名称"></el-input>
        </el-form-item>
        <el-form-item label="子项代码值" prop="value">
          <el-input type="textarea" :rows="2" size="small" clearable v-model="form.value" placeholder="请输入子项代码值"></el-input>
        </el-form-item>
      </template>
      <el-form-item label="描述">
        <el-input type="textarea" :rows="2" size="small" clearable v-model="form.description" placeholder="请输入描述内容"></el-input>
      </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,
    updateType
  } from "@/api/system-management/dictionary"
  import {
    message
  } from '@/utils/common';
  export default {
    props: {
      addLeftStatus: {
        type: Boolean,
        default: () => false,
      },
      title: {
        type: String,
        default: () => '',
      },
      form: {
        type: Object,
        default: () => {},
      },
      rowOne: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        rules: {
          type: [{
            required: true,
            message: '请输入类型名称',
            trigger: 'blur'
          }],
          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 = {
                type:this.form.type,
                description:this.form.description,
                label:this.form.label,
                value:this.form.value
              }
              insertItem(_params).then(res => {
                message('success', '新增成功', 3000)
                this.$emit('clickAddLeft', this.rowOne)
                this.cancel()
              })
            } else {
              updateType(this.form).then(res => {
                message('success', '修改成功', 3000)
                this.$emit('clickEditLeft', 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>
