<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-12-17 13:35:37
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-23 10:59:39
 * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\components\edit-line.vue
 * @Description: 图例设置-编辑弹窗
-->
<template>
  <div class="edit-content">
    <el-form
      class="editForm"
      ref="warningLineForm"
      :model="warningLineForm"
      :rules="rules"
      label-width="7rem"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="病害名称：" prop="defectName">
            <el-input
              disabled
              v-model="warningLineForm.defectName"
              placeholder="请输入病害名称"
            />
          </el-form-item> </el-col
      ></el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="范围一：" prop="s1">
            <el-input v-model="warningLineForm.s1" placeholder="请输入数字">
              <template slot="prepend">≤</template>
            </el-input>
          </el-form-item>
        </el-col></el-row
      >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="范围二：" prop="s2">
            <el-input v-model="warningLineForm.s2" placeholder="请输入数字"
              ><template slot="prepend">≤</template></el-input
            >
          </el-form-item>
        </el-col></el-row
      >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="范围三：" prop="s3">
            <el-input v-model="warningLineForm.s3" placeholder="请输入数字"
              ><template slot="prepend">≤</template></el-input
            >
          </el-form-item>
        </el-col></el-row
      >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="范围四：" prop="s4">
            <el-input v-model="warningLineForm.s4" placeholder="请输入数字"
              ><template slot="prepend">≤</template></el-input
            >
          </el-form-item>
        </el-col></el-row
      >
      <!-- <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="范围五：" prop="s5">
            <el-input
              v-model="warningLineForm.s5"
              placeholder="请输入病害名称"
              ><template slot="prepend">≤</template></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 { updateWarnLine } from "@/api/xj/warningLine.js";
export default {
  name: "EditLine",
  props: {
    dialogItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 表单数据
      warningLineForm: {
        defectName: "",
        defectType: "",
        id: "",
        s1: 0,
        s2: 0,
        s3: 0,
        s4: 0,
        s5: 0,
      },
      // 表单验证规则
      rules: {
        s5: [
          { required: true, message: "请输入范围一", trigger: "blur" },
          {
            pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
            message: "请输入非负数",
          },
        ],
        s4: [
          { required: true, message: "请输入范围二", trigger: "blur" },
          {
            pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
            message: "请输入非负数",
          },
        ],
        s3: [
          { required: true, message: "请输入范围三", trigger: "blur" },
          {
            pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
            message: "请输入非负数",
          },
        ],
        s2: [
          { required: true, message: "请输入范围四", trigger: "blur" },
          {
            pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
            message: "请输入非负数",
          },
        ],
        s1: [
          { required: true, message: "请输入范围五", trigger: "blur" },
          {
            pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
            message: "请输入非负数",
          },
        ],
      },
    };
  },
  watch: {
    dialogItem: {
      handler(val) {
        this.warningLineForm = { ...val };
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    /**
     * @description: 点击确定事件
     * @return {*}
     */
    submitForm() {
      this.$refs.warningLineForm.validate((valid) => {
        if (valid) {
          const data = {
            ...this.warningLineForm,
            id: this.dialogItem.id,
          };
          updateWarnLine(data).then(({ code, data }) => {
            if (code === 200) {
              this.$modal.msgSuccess("更新成功");
              this.$emit("cancel");
            }
          });
        }
      });
    },

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

<style lang="scss" scoped>
.edit-content {
  width: 100%;
  height: 100%;
}

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