<template>
  <ele-modal
    :visible="visible"
    :title="title"
    width="1000px"
    :destroy-on-close="true"
    @update:visible="updateVisible"
    append-to-body
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      size="small"
    >
      <!-- 第一行：测点编码 + 测点代码 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="测点编码" prop="code">
            <el-input v-model="form.code" placeholder="系统生成" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="测点代码" prop="measuringPointCode">
            <el-input
              v-model="form.measuringPointCode"
              :disabled="title == '详情'"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行：测点名称 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="测点名称" prop="name" required>
            <el-input
              v-model="form.name"
              placeholder="请输入"
              clearable
              :disabled="title == '详情'"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行：测点类型 + 排序号 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="测点类型" prop="itemType" required>
            <el-radio-group v-model="form.itemType" :disabled="title == '详情'">
              <el-radio :label="0">数值</el-radio>
              <el-radio :label="1">状态</el-radio>
              <el-radio :label="2">颜色</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序号" prop="indexNo" required>
            <el-input-number
              v-model="form.indexNo"
              :min="1"
              :max="999"
              controls-position="right"
              :disabled="title == '详情'"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 状态设置区域 - 当测点类型为状态或颜色时显示 -->
      <template v-if="form.itemType == '1'">
        <div class="section-title">状态设置</div>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="正常" prop="statusNormalText">
              <el-select
                v-model="form.statusNormalText"
                placeholder="请选择"
                clearable
                :disabled="title == '详情'"
                style="width: 100%"
              >
                <el-option label="开" value="1"></el-option>
                <el-option label="关" value="2"></el-option>
                <el-option label="闭" value="3"></el-option>
                <el-option label="合" value="3"></el-option>
                <el-option label="断" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="异常" prop="statusAbnormalText">
              <el-select
                v-model="form.statusAbnormalText"
                placeholder="请选择"
                clearable
                :disabled="title == '详情'"
                style="width: 100%"
              >
                <el-option label="开" value="1"></el-option>
                <el-option label="关" value="2"></el-option>
                <el-option label="闭" value="3"></el-option>
                <el-option label="合" value="3"></el-option>
                <el-option label="断" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否告警" prop="statusAlarmFlag">
              <el-radio-group
                v-model="form.statusAlarmFlag"
                :disabled="title == '详情'"
              >
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="告警等级" prop="statusAlarmLevel">
              <el-select
                v-model="form.statusAlarmLevel"
                placeholder="请选择"
                clearable
                style="width: 100%"
                :disabled="title == '详情'"
              >
                <el-option label="一般" :value="1"></el-option>
                <el-option label="严重" :value="2"></el-option>
                <el-option label="危急" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-if="form.itemType == '2'">
        <div class="section-title">状态设置</div>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="正常" prop="lightNormalText">
              <el-select
                v-model="form.lightNormalText"
                placeholder="请选择"
                :disabled="title == '详情'"
                clearable
                style="width: 100%"
              >
                <el-option label="红色" value="1"></el-option>
                <el-option label="黄色" value="2"></el-option>
                <el-option label="蓝色" value="3"></el-option>
                <el-option label="绿色" value="4"></el-option>
                <el-option label="白色" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="异常" prop="lightAbnormalText">
              <el-select
                v-model="form.lightAbnormalText"
                placeholder="请选择"
                :disabled="title == '详情'"
                clearable
                style="width: 100%"
              >
                <el-option label="红色" value="1"></el-option>
                <el-option label="黄色" value="2"></el-option>
                <el-option label="蓝色" value="3"></el-option>
                <el-option label="绿色" value="4"></el-option>
                <el-option label="白色" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否告警" prop="statusAlarmFlag">
              <el-radio-group
                v-model="form.statusAlarmFlag"
                :disabled="title == '详情'"
              >
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="告警等级" prop="statusAlarmLevel">
              <el-select
                v-model="form.statusAlarmLevel"
                placeholder="请选择"
                clearable
                style="width: 100%"
                :disabled="title == '详情'"
              >
                <el-option label="一般" value="1"></el-option>
                <el-option label="严重" value="2"></el-option>
                <el-option label="危急" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <!-- 告警阀值区域 - 仅当测点类型为数值时显示 -->
      <template v-if="form.itemType == '0'">
        <div class="section-title">告警阀值</div>

        <!-- 一般告警 -->
        <el-row :gutter="10" class="alarm-row">
          <el-col :span="3" class="alarm-label">一般告警</el-col>
          <el-col :span="6">
            <el-input-number
              v-model="form.alarm1MaxValue"
              placeholder="请输入"
              controls-position="right"
              :disabled="title == '详情'"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="3">
            <el-select
              v-model="form.alarm1MaxSymbol"
              style="width: 100%"
              :disabled="title == '详情'"
            >
              <el-option label=">" value=">"></el-option>
              <el-option label="<" value="<"></el-option>
              <el-option label="=" value="="></el-option>
              <el-option label=">=" value=">="></el-option>
              <el-option label="<=" value="<="></el-option>
            </el-select>
          </el-col>
          <el-select
            v-model="form.alarm1Type"
            style="width: 80px"
            :disabled="title == '详情'"
          >
            <el-option label="或" value="or"></el-option>
            <el-option label="且" value="and"></el-option>
          </el-select>
          <el-col :span="3">
            <el-select
              v-model="form.alarm1MinSymbol"
              style="width: 100%"
              :disabled="title == '详情'"
            >
              <el-option label=">" value=">"></el-option>
              <el-option label="<" value="<"></el-option>
              <el-option label="=" value="="></el-option>
              <el-option label=">=" value=">="></el-option>
              <el-option label="<=" value="<="></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input-number
              v-model="form.alarm1MinValue"
              placeholder="请输入"
              controls-position="right"
              :disabled="title == '详情'"
              style="width: 100%"
            />
          </el-col>
        </el-row>

        <!-- 严重告警 -->
        <el-row :gutter="10" class="alarm-row">
          <el-col :span="3" class="alarm-label">严重告警</el-col>
          <el-col :span="6">
            <el-input-number
              v-model="form.alarm2MaxValue"
              placeholder="请输入"
              controls-position="right"
              :disabled="title == '详情'"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="3">
            <el-select
              v-model="form.alarm2MaxSymbol"
              style="width: 100%"
              :disabled="title == '详情'"
            >
              <el-option label=">" value=">"></el-option>
              <el-option label="<" value="<"></el-option>
              <el-option label="=" value="="></el-option>
              <el-option label=">=" value=">="></el-option>
              <el-option label="<=" value="<="></el-option>
            </el-select>
          </el-col>
          <el-select
            v-model="form.alarm2Type"
            style="width: 80px"
            :disabled="title == '详情'"
          >
            <el-option label="或" value="or"></el-option>
            <el-option label="且" value="and"></el-option>
          </el-select>
          <el-col :span="3">
            <el-select
              v-model="form.alarm2MinSymbol"
              style="width: 100%"
              :disabled="title == '详情'"
            >
              <el-option label=">" value=">"></el-option>
              <el-option label="<" value="<"></el-option>
              <el-option label="=" value="="></el-option>
              <el-option label=">=" value=">="></el-option>
              <el-option label="<=" value="<="></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input-number
              v-model="form.alarm2MinValue"
              placeholder="请输入"
              :disabled="title == '详情'"
              controls-position="right"
              style="width: 100%"
            />
          </el-col>
        </el-row>

        <!-- 危急告警 -->
        <el-row :gutter="10" class="alarm-row">
          <el-col :span="3" class="alarm-label">危急告警</el-col>
          <el-col :span="6">
            <el-input-number
              v-model="form.alarm3MaxValue"
              placeholder="请输入"
              controls-position="right"
              :disabled="title == '详情'"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="3">
            <el-select
              v-model="form.alarm3MaxSymbol"
              style="width: 100%"
              :disabled="title == '详情'"
            >
              <el-option label=">" value=">"></el-option>
              <el-option label="<" value="<"></el-option>
              <el-option label="=" value="="></el-option>
              <el-option label=">=" value=">="></el-option>
              <el-option label="<=" value="<="></el-option>
            </el-select>
          </el-col>
          <el-select
            v-model="form.alarm3Type"
            style="width: 80px"
            :disabled="title == '详情'"
          >
            <el-option label="或" value="or"></el-option>
            <el-option label="且" value="and"></el-option>
          </el-select>
          <el-col :span="3">
            <el-select
              v-model="form.alarm3MinSymbol"
              style="width: 100%"
              :disabled="title == '详情'"
            >
              <el-option label=">" value=">"></el-option>
              <el-option label="<" value="<"></el-option>
              <el-option label="=" value="="></el-option>
              <el-option label=">=" value=">="></el-option>
              <el-option label="<=" value="<="></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input-number
              v-model="form.alarm3MinValue"
              placeholder="请输入"
              controls-position="right"
              :disabled="title == '详情'"
              style="width: 100%"
            />
          </el-col>
        </el-row>

        <!-- 单位 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位" prop="unitCode">
              <el-select
                v-model="form.unitCode"
                placeholder="请选择"
                clearable
                :disabled="title == '详情'"
                style="width: 100%"
              >
                <el-option label="℃" value="℃"></el-option>

                <el-option label="V" value="V"></el-option>
                <el-option label="A" value="A"></el-option>
                <el-option label="mA" value="mA"></el-option>
                <el-option label="kW" value="kW"></el-option>
                <el-option label="w" value="w"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>

      <!-- 算法区域 -->
      <div class="section-title">算法</div>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="算法名称" prop="unitName">
            <el-select
              v-model="form.unitName"
              placeholder="请选择"
              clearable
              :disabled="title == '详情'"
              style="width: 100%"
            >
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="值索引" prop="valueIndex">
            <el-input-number
              v-model="form.valueIndex"
              :min="1"
              :disabled="title == '详情'"
              controls-position="right"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="延时设置" prop="algDelayTimes">
            <el-input-number
              v-model="form.algDelayTimes"
              :min="0"
              :disabled="title == '详情'"
              controls-position="right"
              style="width: calc(100% - 40px)"
            />
            <span style="margin-left: 10px">s</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template slot="footer">
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button
        type="primary"
        size="small"
        @click="handleSubmit"
        v-if="title != '详情'"
        >确定</el-button
      >
    </template>
  </ele-modal>
</template>

<script>
  const defaultForm = {
    id: null,
    code: '',
    measuringPointCode: '',
    name: '',
    itemType: 0,
    indexNo: 100,
    // 状态设置（状态类型）
    statusNormalText: '',
    statusAbnormalText: '',
    // 状态设置（颜色类型）
    lightNormalText: '',
    lightAbnormalText: '',
    // 告警设置
    statusAlarmFlag: 0,
    statusAlarmLevel: '',
    // 一般告警
    alarm1MaxValue: null,
    alarm1MaxSymbol: '>',
    alarm1Type: 'or',
    alarm1MinSymbol: '>',
    alarm1MinValue: null,
    // 严重告警
    alarm2MaxValue: null,
    alarm2MaxSymbol: '>',
    alarm2Type: 'or',
    alarm2MinSymbol: '>',
    alarm2MinValue: null,
    // 危急告警
    alarm3MaxValue: null,
    alarm3MaxSymbol: '>',
    alarm3Type: 'or',
    alarm3MinSymbol: '>',
    alarm3MinValue: null,
    // 单位
    unitCode: '',
    // 算法
    unitName: '',
    valueIndex: 1,
    algDelayTimes: 15
  };
  export default {
    name: 'MeasurePointForm',
    data() {
      return {
        visible: false,
        title: '新增测点',
        form: {
          ...defaultForm
        },
        rules: {
          // code: [
          //   { required: true, message: '请输入测点编码', trigger: 'blur' }
          // ],
          name: [
            { required: true, message: '请输入测点名称', trigger: 'blur' }
          ],
          itemType: [
            { required: true, message: '请选择测点类型', trigger: 'change' }
          ],
          indexNo: [
            { required: true, message: '请输入排序号', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      open(row, type = 'add') {
        if (row && (type === 'edit' || type === 'view')) {
          this.title = type === 'edit' ? '编辑测点' : '详情';
          this.form = { ...this.form, ...row };
        } else {
          this.title = '新增测点';
          this.resetForm();
        }
        this.visible = true;
      },
      updateVisible(val) {
        this.visible = val;
        if (!val) {
          this.resetForm();
        }
      },
      resetForm() {
        this.form = {
          ...defaultForm
        };
        this.$nextTick(() => {
          this.$refs.formRef && this.$refs.formRef.clearValidate();
        });
      },
      handleSubmit() {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            this.$emit('submit', this.form);
            this.visible = false;
          }
        });
      },
      handleCancel() {
        this.visible = false;
      }
    }
  };
</script>

<style scoped>
  .section-title {
    font-size: 14px;
    font-weight: bold;
    color: #606266;
    margin: 20px 0 15px 0;
    padding-left: 10px;
    border-left: 4px solid #409eff;
  }

  .alarm-row {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .alarm-label {
    text-align: right;
    padding-right: 10px;
    color: #606266;
    font-size: 14px;
  }
</style>
