<template>
  <div>
    <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="选择漏缆" prop="device">
        <el-select v-model="monitorForm.device" placeholder="请选择漏缆">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </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="devicePortType">
        <el-select v-model="monitorForm.devicePortType" placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="上行漏缆1起始位置"
        prop="uplinkLeakyCable1StartPosition"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '2') &&
          (monitorForm.device == '0' || monitorForm.device === '1')
        "
      >
        <el-input
          v-model="monitorForm.uplinkLeakyCable1StartPosition"
          placeholder="请输入"
        />
      </el-form-item>

      <el-form-item
        label="上行漏缆1终止位置"
        prop="uplinkLeakyCable1EndPosition"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '2') &&
          (monitorForm.device == '0' || monitorForm.device === '1')
        "
      >
        <el-input
          v-model="monitorForm.uplinkLeakyCable1EndPosition"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="下行漏缆1起始位置"
        prop="downlinkLeakyCable1StartPosition"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '3') &&
          (monitorForm.device == '0' || monitorForm.device === '1')
        "
      >
        <el-input
          v-model="monitorForm.downlinkLeakyCable1StartPosition"
          placeholder="请输入"
        />
      </el-form-item>

      <el-form-item
        label="下行漏缆1终止位置"
        prop="downlinkLeakyCable1EndPosition"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '3') &&
          (monitorForm.device == '0' || monitorForm.device === '1')
        "
      >
        <el-input
          v-model="monitorForm.downlinkLeakyCable1EndPosition"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="上行漏缆2起始位置"
        prop="uplinkLeakyCable2StartPosition"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '2') &&
          (monitorForm.device == '0' || monitorForm.device === '2')
        "
      >
        <el-input
          v-model="monitorForm.uplinkLeakyCable2StartPosition"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="上行漏缆2终止位置"
        prop="uplinkLeakyCable2EndPosition"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '2') &&
          (monitorForm.device == '0' || monitorForm.device === '2')
        "
      >
        <el-input
          v-model="monitorForm.uplinkLeakyCable2EndPosition"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="下行漏缆2起始位置"
        prop="downlinkLeakyCable2StartPosition"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '3') &&
          (monitorForm.device == '0' || monitorForm.device === '2')
        "
      >
        <el-input
          v-model="monitorForm.downlinkLeakyCable2StartPosition"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="下行漏缆2终止位置"
        prop="downlinkLeakyCable2EndPosition"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '3') &&
          (monitorForm.device == '0' || monitorForm.device === '2')
        "
      >
        <el-input
          v-model="monitorForm.downlinkLeakyCable2EndPosition"
          placeholder="请输入"
        />
      </el-form-item>

      <el-form-item
        label="上行漏缆1百米损耗"
        prop="uplinkLeakyCable1HundredMeterLoss"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '2') &&
          (monitorForm.device == '0' || monitorForm.device === '1')
        "
      >
        <el-input
          v-model="monitorForm.uplinkLeakyCable1HundredMeterLoss"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="下行漏缆1百米损耗"
        prop="downlinkLeakyCable1HundredMeterLoss"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '3') &&
          (monitorForm.device == '0' || monitorForm.device === '1')
        "
      >
        <el-input
          v-model="monitorForm.downlinkLeakyCable1HundredMeterLoss"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="上行漏缆2百米损耗"
        prop="uplinkLeakyCable2HundredMeterLoss"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '2') &&
          (monitorForm.device == '0' || monitorForm.device === '2')
        "
      >
        <el-input
          v-model="monitorForm.uplinkLeakyCable2HundredMeterLoss"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="下行漏缆2百米损耗"
        prop="downlinkLeakyCable2HundredMeterLoss"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '3') &&
          (monitorForm.device == '0' || monitorForm.device === '2')
        "
      >
        <el-input
          v-model="monitorForm.downlinkLeakyCable2HundredMeterLoss"
          placeholder="请输入"
        />
      </el-form-item>

      <el-form-item
        label="上行漏缆1相对传播速度"
        prop="uplinkLeakyCable1RelativePropagationSpeed"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '2') &&
          (monitorForm.device == '0' || monitorForm.device === '1')
        "
      >
        <el-input
          v-model="monitorForm.uplinkLeakyCable1RelativePropagationSpeed"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="下行漏缆1相对传播速度"
        prop="downlinkLeakyCable1RelativePropagationSpeed"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '3') &&
          (monitorForm.device == '0' || monitorForm.device === '1')
        "
      >
        <el-input
          v-model="monitorForm.downlinkLeakyCable1RelativePropagationSpeed"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="上行漏缆2相对传播速度"
        prop="uplinkLeakyCable2RelativePropagationSpeed"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '2') &&
          (monitorForm.device == '0' || monitorForm.device === '2')
        "
      >
        <el-input
          v-model="monitorForm.uplinkLeakyCable2RelativePropagationSpeed"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="下行漏缆2相对传播速度"
        prop="downlinkLeakyCable2RelativePropagationSpeed"
        v-if="
          (monitorForm.devicePortType == '1' ||
            monitorForm.devicePortType == '3') &&
          (monitorForm.device == '0' || monitorForm.device === '2')
        "
      >
        <el-input
          v-model="monitorForm.downlinkLeakyCable2RelativePropagationSpeed"
          placeholder="请输入"
        />
      </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">确定</el-button>
        <el-button @click="handleClose()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      monitorForm: {
        device: "0",
        devicePortType: "1",
      },
      options: [
        { value: "0", label: "全部" },
        { value: "1", label: "漏缆1" },
        { value: "2", label: "漏缆2" },
      ],
      typeList: [
        // { value: "1", label: "上下行" },
        { value: "2", label: "上行" },
        { value: "3", label: "下行" },
      ],
      rules: {},
    };
  },
  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() {
      this.$emit("update", {
        equipId: this.rowData.id,
        paramsJson: this.monitorForm,
      });
    },
    handleClose() {
      this.monitorForm = {};
      this.$emit("update", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.statistics-table {
  .single-row {
    background: #f1f6ff;
  }
  td {
    padding: 5px !important;
  }
}
</style>