<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="devicePortType">
        <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="设备端口类型" 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 === '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 === '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 === '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 === '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 === '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 === '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 === '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 === '2'
        "
      >
        <el-input
          v-model="monitorForm.downlinkLeakyCable2EndPosition"
          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: "1",
        devicePortType: "1",
      },
      options: [
        { 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;
    console.log(this.paramsJson);
  },
  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>