<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2025-02-12 16:44:44
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-02-18 14:47:10
 * @FilePath: \znxjxt-ui\src\views\xj\hisense\inter-change\components\add-inter.vue
 * @Description: 海信-收费站-新增/编辑
-->
<template>
  <div class="dialog-content">
    <el-form class="addForm" ref="addInterForm" :model="addInterForm" :rules="rules" label-width="8rem">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="字典名称：" prop="dicLabel">
            <el-input v-model="addInterForm.dicLabel" placeholder="请填写名称" style="width: 100%" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="字典类型：" prop="dicType">
            <el-select v-model="addInterForm.dicType" placeholder="请选择字典类型" clearable style="width: 100%">
              <el-option v-for="item in tableDefect" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="字典code：" prop="dicCode">
            <el-input v-model="addInterForm.dicCode" placeholder="请填写字典code" style="width: 100%" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="字典等级：" prop="dicLevel">
            <el-input v-model="addInterForm.dicLevel" placeholder="请填写字典等级" style="width: 100%" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { add, updata } from '@/api/xj/hisense/dictionary'

export default {
  name: "AddDictionary",
  props: {
    // 接收父组件传过来的数据
    dialogItem: {
      type: Object,
      default: () => { },
    },
    // 字典类型传过来的数据
    tableDefect: {
      type: Array,
      default: () => { },
    }
  },
  data() {
    return {
      // 新增表单
      addInterForm: {
        dicLabel: "",
        dicType: "",
        dicCode: "",
        dicLevel: "",
      },
      // 表单校验规则
      rules: {
        dicLabel: [{ required: true, message: "请填写名称", trigger: "blur" }],
        dicType: [{ required: true, message: "请填写字典类型", trigger: "blur" },
          // {
          //   pattern: /^[1-9]\d*$/,
          //   message: "请输入正整数",
          // }
        ],
        dicCode: [{ required: true, message: "请填写code", trigger: "blur" }],
        dicLevel: [{ required: true, message: "请填写桩号", trigger: "blur" }, {
          pattern: /^[1-9]\d*$/,
          message: "请输入非负数",
        },],
      }
    }
  },
  watch: {
    dialogItem: {
      handler(val) {
        if (val) {
          this.addInterForm = JSON.parse(JSON.stringify(val))
        }
      }, immediate: true, deep: true
    }
  },
  mounted() {

  },
  methods: {
    /**
     * @description: 点击确定事件
     * @return {*}
     */
    submitForm() {
      this.$refs.addInterForm.validate((valid) => {
        if (valid) {
          const data = {
            ...this.addInterForm,
          };
          if (this.addInterForm.id) {
            updata(data).then(({ code }) => {
              if (code === 200) {
                this.$modal.msgSuccess("更新成功");
                this.$emit("cancel");
              }
            });
          } else {
            add(data).then(({ code }) => {
              if (code === 200) {
                this.$modal.msgSuccess("新增成功");
                this.$emit("cancel");
              }
            });
          }
        }
      });
    },

    /**
     * @description: 点击取消事件
     * @return {*}
     */
    cancel() {
      this.$emit("cancel");
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-content {
  width: 100%;
  // height: 20rem;
}

/* 页脚 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
