<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基础配置" name="1">
        <el-form
          ref="monitorForm"
          :model="monitorForm"
          :rules="rules"
          label-width="200px"
          class="form"
        >
          <el-form-item label="检测设备：" prop="wayId">
            <el-input
              v-model="rowData.equipName"
              disabled
              placeholder="检测设备"
            />
          </el-form-item>
          <el-form-item label="测量周期" prop="measurementCycle">
            <el-input
              v-model="monitorForm.measurementCycle"
              placeholder="请输入测量周期"
            />
          </el-form-item>
          <el-form-item
            label="漏缆一般告警门限"
            prop="leakyCableGeneralAlarmThreshold"
          >
            <el-input
              v-model="monitorForm.leakyCableGeneralAlarmThreshold"
              placeholder="请输入漏缆一般告警门限"
            />
          </el-form-item>
          <el-form-item
            label="漏缆重要告警门限"
            prop="leakyCableImportantAlarmThreshold"
          >
            <el-input
              v-model="monitorForm.leakyCableImportantAlarmThreshold"
              placeholder="请输入漏缆重要告警门限"
            />
          </el-form-item>
          <el-form-item
            label="漏缆紧急告警门限"
            prop="leakyCableEmergencyAlarmThreshold"
          >
            <el-input
              v-model="monitorForm.leakyCableEmergencyAlarmThreshold"
              placeholder="请输入漏缆紧急告警门限"
            />
          </el-form-item>
          <el-form-item
            label="监测服务器IP地址"
            prop="leakyCableImportantAlarmThreshold"
          >
            <el-input
              v-model="monitorForm.serverIp"
              placeholder="请输入监测服务器IP地址"
            />
          </el-form-item>
          <el-form-item label="设备输出功率" prop="deviceOutputPower">
            <el-input
              v-model="monitorForm.deviceOutputPower"
              placeholder="请输入设备输出功率"
            />
          </el-form-item>
          <el-form-item label="设备的起始频率" prop="deviceStartFrequency">
            <el-input
              v-model="monitorForm.deviceStartFrequency"
              placeholder="请输入设备的起始频率"
            />
          </el-form-item>
          <el-form-item label="设备的终止频率" prop="deviceEndFrequency">
            <el-input
              v-model="monitorForm.deviceEndFrequency"
              placeholder="请输入设备的终止频率"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSub('monitorForm')"
              >确定</el-button
            >
            <el-button @click="handleClose()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="上行漏缆1" name="2">
        <el-form
          ref="monitorForm"
          :model="monitorForm"
          :rules="rules"
          label-width="200px"
          class="form"
        >
          <el-form-item
            label="上行漏缆1起始位置"
            prop="uplinkLeakyCable1StartPosition"
          >
            <el-input
              v-model="monitorForm.uplinkLeakyCable1StartPosition"
              placeholder="请输入"
            />
          </el-form-item>

          <el-form-item
            label="上行漏缆1终止位置"
            prop="uplinkLeakyCable1EndPosition"
          >
            <el-input
              v-model="monitorForm.uplinkLeakyCable1EndPosition"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="上行漏缆1百米损耗"
            prop="uplinkLeakyCable1HundredMeterLoss"
          >
            <el-input
              v-model="monitorForm.uplinkLeakyCable1HundredMeterLoss"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="上行漏缆1相对传播速度"
            prop="uplinkLeakyCable1RelativePropagationSpeed"
          >
            <el-input
              v-model="monitorForm.uplinkLeakyCable1RelativePropagationSpeed"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSub('monitorForm')"
              >确定</el-button
            >
            <el-button @click="handleClose()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="上行漏缆2" name="4">
        <el-form
          ref="monitorForm"
          :model="monitorForm"
          :rules="rules"
          label-width="200px"
          class="form"
        >
          <el-form-item
            label="上行漏缆2起始位置"
            prop="uplinkLeakyCable2StartPosition"
          >
            <el-input
              v-model="monitorForm.uplinkLeakyCable2StartPosition"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="上行漏缆2终止位置"
            prop="uplinkLeakyCable2EndPosition"
          >
            <el-input
              v-model="monitorForm.uplinkLeakyCable2EndPosition"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="上行漏缆2百米损耗"
            prop="uplinkLeakyCable2HundredMeterLoss"
          >
            <el-input
              v-model="monitorForm.uplinkLeakyCable2HundredMeterLoss"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="上行漏缆2相对传播速度"
            prop="uplinkLeakyCable2RelativePropagationSpeed"
          >
            <el-input
              v-model="monitorForm.uplinkLeakyCable2RelativePropagationSpeed"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSub('monitorForm')"
              >确定</el-button
            >
            <el-button @click="handleClose()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="下行漏缆1" name="3">
        <el-form
          ref="monitorForm"
          :model="monitorForm"
          :rules="rules"
          label-width="200px"
          class="form"
        >
          <el-form-item
            label="下行漏缆1起始位置"
            prop="downlinkLeakyCable1StartPosition"
          >
            <el-input
              v-model="monitorForm.downlinkLeakyCable1StartPosition"
              placeholder="请输入"
            />
          </el-form-item>

          <el-form-item
            label="下行漏缆1终止位置"
            prop="downlinkLeakyCable1EndPosition"
          >
            <el-input
              v-model="monitorForm.downlinkLeakyCable1EndPosition"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="下行漏缆1百米损耗"
            prop="downlinkLeakyCable1HundredMeterLoss"
          >
            <el-input
              v-model="monitorForm.downlinkLeakyCable1HundredMeterLoss"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="下行漏缆1相对传播速度"
            prop="downlinkLeakyCable1RelativePropagationSpeed"
          >
            <el-input
              v-model="monitorForm.downlinkLeakyCable1RelativePropagationSpeed"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSub('monitorForm')"
              >确定</el-button
            >
            <el-button @click="handleClose()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="下行漏缆2" name="5">
        <el-form
          ref="monitorForm"
          :model="monitorForm"
          :rules="rules"
          label-width="200px"
          class="form"
        >
          <el-form-item
            label="下行漏缆2起始位置"
            prop="downlinkLeakyCable2StartPosition"
          >
            <el-input
              v-model="monitorForm.downlinkLeakyCable2StartPosition"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="下行漏缆2终止位置"
            prop="downlinkLeakyCable2EndPosition"
          >
            <el-input
              v-model="monitorForm.downlinkLeakyCable2EndPosition"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="下行漏缆2百米损耗"
            prop="downlinkLeakyCable2HundredMeterLoss"
          >
            <el-input
              v-model="monitorForm.downlinkLeakyCable2HundredMeterLoss"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="下行漏缆2相对传播速度"
            prop="downlinkLeakyCable2RelativePropagationSpeed"
          >
            <el-input
              v-model="monitorForm.downlinkLeakyCable2RelativePropagationSpeed"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSub('monitorForm')"
              >确定</el-button
            >
            <el-button @click="handleClose()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "1",
      device: "1",
      monitorForm: {
        devicePortType: "1",
      },
      options: [
        { value: "1", label: "漏缆1" },
        { value: "2", label: "漏缆2" },
      ],
      rules: {
        devicePortType: [
          { required: true, message: "请选择端口类型", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    rowData: {
      type: Object,
      default: () => {},
    },
    paramsJson: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    this.monitorForm = this.paramsJson;
    // this.monitorForm.device = "0";
    // this.monitorForm.devicePortType = "2";
  },
  watch: {
    paramsJson(val) {
      this.monitorForm = val;
    },
  },
  methods: {
    handleSub(formName) {
      let JsonData = {};
      switch (this.activeName) {
        case "1":
          JsonData = {
            measurementCycle: this.monitorForm.measurementCycle,
            leakyCableGeneralAlarmThreshold:
              this.monitorForm.leakyCableGeneralAlarmThreshold,
            leakyCableImportantAlarmThreshold:
              this.monitorForm.leakyCableImportantAlarmThreshold,
            leakyCableEmergencyAlarmThreshold:
              this.monitorForm.leakyCableEmergencyAlarmThreshold,
            serverIp: this.monitorForm.serverIp,
            deviceOutputPower: this.monitorForm.deviceOutputPower,
            deviceStartFrequency: this.monitorForm.deviceStartFrequency,
            deviceEndFrequency: this.monitorForm.deviceEndFrequency,
          };
          break;
        case "2":
          if (this.monitorForm.uplinkLeakyCable1HundredMeterLoss > 0.65) {
            this.$message.warning("百米损耗值需小于0.65，请输入正确的值");
            return;
          }
          JsonData = {
            devicePortType: 1,
            uplinkLeakyCable1StartPosition:
              this.monitorForm.uplinkLeakyCable1StartPosition,
            uplinkLeakyCable1EndPosition:
              this.monitorForm.uplinkLeakyCable1EndPosition,
            uplinkLeakyCable1HundredMeterLoss:
              this.monitorForm.uplinkLeakyCable1HundredMeterLoss,
            uplinkLeakyCable1RelativePropagationSpeed:
              this.monitorForm.uplinkLeakyCable1RelativePropagationSpeed,
          };
          break;
        case "3":
          if (this.monitorForm.downlinkLeakyCable1HundredMeterLoss > 0.65) {
            this.$message.warning("百米损耗值需小于0.65，请输入正确的值");
            return;
          }
          JsonData = {
            devicePortType: 2,
            downlinkLeakyCable1StartPosition:
              this.monitorForm.downlinkLeakyCable1StartPosition,
            downlinkLeakyCable1EndPosition:
              this.monitorForm.downlinkLeakyCable1EndPosition,
            downlinkLeakyCable1HundredMeterLoss:
              this.monitorForm.downlinkLeakyCable1HundredMeterLoss,
            downlinkLeakyCable1RelativePropagationSpeed:
              this.monitorForm.downlinkLeakyCable1RelativePropagationSpeed,
          };
          break;
        case "4":
          if (this.monitorForm.uplinkLeakyCable2HundredMeterLoss > 0.65) {
            this.$message.warning("百米损耗值需小于0.65，请输入正确的值");
            return;
          }
          JsonData = {
            devicePortType: 1,
            uplinkLeakyCable2StartPosition:
              this.monitorForm.uplinkLeakyCable2StartPosition,
            uplinkLeakyCable2EndPosition:
              this.monitorForm.uplinkLeakyCable2EndPosition,
            uplinkLeakyCable2HundredMeterLoss:
              this.monitorForm.uplinkLeakyCable2HundredMeterLoss,
            uplinkLeakyCable2RelativePropagationSpeed:
              this.monitorForm.uplinkLeakyCable2RelativePropagationSpeed,
          };
          break;
        case "5":
          if (this.monitorForm.downlinkLeakyCable2HundredMeterLoss > 0.65) {
            this.$message.warning("百米损耗值需小于0.65，请输入正确的值");
            return;
          }
          JsonData = {
            devicePortType: 2,
            downlinkLeakyCable2StartPosition:
              this.monitorForm.downlinkLeakyCable2StartPosition,
            downlinkLeakyCable2EndPosition:
              this.monitorForm.downlinkLeakyCable2EndPosition,
            downlinkLeakyCable2HundredMeterLoss:
              this.monitorForm.downlinkLeakyCable2HundredMeterLoss,
            downlinkLeakyCable2RelativePropagationSpeed:
              this.monitorForm.downlinkLeakyCable2RelativePropagationSpeed,
          };
        default:
          break;
      }
      JsonData = Object.fromEntries(
        Object.entries(JsonData).filter(([_, v]) => v !== undefined&&v !== "")
      );
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("update", {
            equipId: this.rowData.id,
            paramsJson: JsonData,
          });
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.monitorForm = {};
      this.$emit("update", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.statistics-table {
  .single-row {
    background: #f1f6ff;
  }
  td {
    padding: 5px !important;
  }
}
</style>