<template>
  <div class="container" v-if="dialogVisible">
    <div class="close-box" @click="cancelFun">
      <el-icon size="25"><Close /></el-icon>
    </div>
    <h1 class="title">sensor设置信息</h1>

    <div class="grid-container">
      <!-- 左侧参数设置 -->
      <div class="setting-group">
        <div class="setting-row" v-for="item in leftInfoEnum" :key="item.label">
          <span class="label">{{ item.label }}</span>
          <el-input
            v-if="item.type === 'input'"
            v-model="item.value"
          ></el-input>
          <el-select v-model="item.value" v-if="item.type === 'select'">
            <el-option
              v-for="option in item.options"
              :key="option.code"
              :label="option.name"
              :value="option.code"
            ></el-option>
          </el-select>
        </div>
      </div>

      <!-- 右侧参数设置 -->
      <div class="setting-group">
        <div
          class="setting-row"
          v-for="item in rightInfoEnum"
          :key="item.label"
        >
          <span class="label">{{ item.label }}</span>
          <el-input
            v-if="item.type === 'input'"
            v-model="item.value"
          ></el-input>
        </div>
      </div>
    </div>

    <!-- 复选框区域 -->
    <div class="checkbox-group">
      <label class="custom-checkbox">
        <input type="checkbox" v-model="infoObj.onlineBackblow" /> 在线反吹
      </label>
      <label class="custom-checkbox">
        <input type="checkbox" v-model="infoObj.fastBlow" /> 快/慢
      </label>
      <label class="custom-checkbox">
        <input type="checkbox" v-model="infoObj.d01Alarm" /> DO1报警
      </label>
      <label class="custom-checkbox">
        <input type="checkbox" v-model="infoObj.d13Alarm" /> DI3有效
      </label>
    </div>

    <!-- 仓室顺序 -->
    <h4 style="margin-bottom: 10px">仓室顺序</h4>
    <el-input
      type="textarea"
      :rows="4"
      v-model="infoObj.compartSort"
    ></el-input>

    <!-- 复选框区域 -->
    <div class="checkbox-group mgr10">
      <label class="custom-checkbox">
        <input type="checkbox" v-model="infoObj.diInput" /> DI接入Y/N
      </label>
      <label class="custom-checkbox">
        <input type="checkbox" v-model="infoObj.showEarlyWarn" /> 显示预警
      </label>
      <div class="setting-row">
        <span class="device-label">关联设备</span>
        <el-select v-model="infoObj.relateDevicesNum" placeholder="请选择">
          <el-option
            v-for="(item, index) in 21"
            :key="item"
            :value="index"
            :label="index"
          ></el-option>
        </el-select>
      </div>
    </div>

    <!-- 复选框区域 -->
    <div class="checkbox-group mgr10">
      <div class="select-input">
        <label class="custom-checkbox">
          <input type="checkbox" checked /> 脉冲阀设备Y/N 通信IP
        </label>
        <div style="margin-left: 10px">
          <el-input></el-input>
        </div>
      </div>
      <div>
        <label class="custom-checkbox">
          <input type="checkbox" /> 室内脉冲轮流喷吹
        </label>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="button-group">
      <button class="btn btn-confirm" @click="confirmFun">确认</button>
      <button class="btn btn-cancel" @click="cancelFun">取消</button>
    </div>
  </div>
  <div class="mask" v-if="dialogVisible" @click="cancelFun"></div>
</template>
<script setup>
import { ref, reactive, computed, defineEmits, onMounted, watch } from "vue";
import { getDataFun } from "@/request/method.js";
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  infoObjProps: {
    type: Object,
    default: () => {},
  },
});
watch(
  () => props.infoObjProps,
  (newVal) => {
    Object.assign(infoObj, newVal);
  },
  { deep: true, inmediate: true }
);

const emit = defineEmits(["close"]);

const infoObj = reactive({
  deviceName: "", // 点位名称
  compartNum: "", // 仓室数量
  address: "", // 地址
  pulseValveFaultThreshold: "", // 脉冲阀故障阈值
  slope: "", // 斜率
  pulseValveNum: "", // 脉冲阀数量
  intercept: "", // 截距
  backblowInterval: "", // 反吹间隔时间
  baselineThreshold: "", // 基线阈值,
  delayTime: "", // 延时时间
  clusterValue: "", // 群聚值
  integrationTime: "", // 积分时间
  communicationPort: "", // 通信口
  leakThreshold: "", // 泄露阈值
  faultThreshold: "", // 故障阈值
  valleyDection: "", // 谷值判定%
  valveNum: "", // 阀数量
  liftValveFailure: "", // 提升阀故障
  onlineBackblow: false, // 在线反吹
  fastBlow: true, // 块/慢
  d01Alarm: true, // DO1报警
  d13Alarm: false, // DI3有效
  compartSort: "123", // 仓室顺位
  diInput: true, // DI接入Y/N
  showEarlyWarn: true, // 显示预警
  relateDevicesNum: "", // 关联设备
  liftValveCommunicationIp: "", // 脉冲阀设备Y/N通信IP
  indoorPulseBlow: "", // 室内卖出轮流喷吹
  liftValveDelayTime: "", // 提升阀延迟时间
});
const communicationPortOptions = ref([])
const infoEnum = reactive([
  {
    label: "点位名称",
    value: infoObj.deviceName,
    type: "input",
  },
  {
    label: "仓室数量",
    value: infoObj.compartNum,
    type: "input",
  },
  {
    label: "地址",
    value: infoObj.address,
    type: "input",
  },
  {
    label: "脉冲阀故障阈值",
    value: infoObj.pulseValveFaultThreshold,
    type: "input",
  },
  {
    label: "斜率",
    value: infoObj.slope,
    type: "input",
  },
  {
    label: "脉冲数量",
    value: infoObj.pulseValveNum,
    type: "input",
  },
  {
    label: "截距",
    value: infoObj.intercept,
    type: "input",
  },
  {
    label: "反吹间隔时间",
    value: infoObj.backblowInterval,
    type: "input",
  },
  {
    label: "基线阈值",
    value: infoObj.baselineThreshold,
    type: "input",
  },
  {
    label: "延时时间",
    value: infoObj.delayTime,
    type: "input",
  },
  {
    label: "群聚值",
    value: infoObj.clusterValue,
    type: "input",
  },
  {
    label: "积分时间",
    value: infoObj.integrationTime,
    type: "input",
  },
  {
    label: "通信口",
    value: infoObj.communicationPort,
    type: "select",
    options: []
  },
  {
    label: "泄露阈值",
    value: infoObj.leakThreshold,
    type: "input",
  },
  {
    label: "故障阈值",
    value: infoObj.faultThreshold,
    type: "input",
  },
  {
    label: "谷值判定(%)",
    value: infoObj.valleyDection,
    type: "input",
  },
  {
    label: "阀数量",
    value: infoObj.valveNum,
    type: "input",
  },
  {
    label: "提升阀故障",
    value: infoObj.liftValveFailure,
    type: "input",
  },
  {
    label: "提升阀延迟时间",
    value: infoObj.liftValveDelayTime,
    type: "input",
  },
]);
const leftInfoEnum = computed(() => {
  let result = [];
  for (let i = 0; i < infoEnum.length; i++) {
    if (i % 2 === 0) {
      result.push(infoEnum[i]);
    }
  }
  return result;
});
const rightInfoEnum = computed(() => {
  let result = [];
  for (let i = 0; i < infoEnum.length; i++) {
    if (i % 2 !== 0) {
      result.push(infoEnum[i]);
    }
  }
  return result;
});
const confirmFun = () => {
  emit("close", false);
};
const cancelFun = () => {
  emit("close", false);
};
// 获取通信口
const getCommunicationPort = () => {
  const url = "/queryCommunicationPort";
  getDataFun(url, {}).then((res) => {
    communicationPortOptions.value = res && res.data || []
    for(let i = 0; i < infoEnum.length; i++) {
      if (infoEnum[i].label === '通信口') {
        infoEnum[i].options = communicationPortOptions.value
        break
      }
    }
  }).catch(err => {
    communicationPortOptions.value = []
  });
};
onMounted(() => {
  getCommunicationPort();
});
</script>
<style scoped lang="scss">
* {
  box-sizing: border-box;
  font-family: "Segoe UI", system-ui, sans-serif;
}

body {
  background: #f8fafc;
  padding: 2rem;
  min-height: 100vh;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 650px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 0.8rem 1.2rem 1.2rem;
  z-index: 100;
}

.title {
  color: #3b82f6;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.setting-group {
  padding: 0.5rem 1rem;
  background: #f8fafc;
  border-radius: 8px;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0;
  padding: 0.4rem 0.4rem 0.4rem 0.4rem;
  background: white;
  border-radius: 6px;
  height: 35px;
}
.layout_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  color: #64748b;
  font-weight: 500;
  font-size: 15px;
  min-width: 130px;
}

.value {
  color: #1e293b;
  font-weight: 500;
  font-size: 15px;
  width: 120px;
  height: 26px;
  padding: 4px 6px;
  box-sizing: border-box;
  border: 1px solid #dae1e9;
  border-radius: 6px;
}
.tcp-box {
  min-width: 80px;
  width: 80px;
}
.tcp-value {
  width: 135px;
}

.device-label {
  color: #1e293b;
  font-weight: 500;
  width: 120px;
  text-align: center;
}

.device-value {
  color: #1e293b;
  font-weight: 500;
  font-size: 15px;
  width: 60px;
  height: 26px;
  padding: 4px 6px;
  box-sizing: border-box;
  border: 1px solid #dae1e9;
  border-radius: 6px;
  margin-left: 10px;
}
.height28 {
  height: 28px;
}

.ip-box {
  width: 140px;
  height: 28px;
  margin-left: 20px;
}

.checkbox-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.8rem 0;
}
.mgr10 {
  margin: 0 0 0.1rem;
}
.select-input {
  display: flex;
  align-items: center;
}

.select-device {
  display: flex;
  align-items: center;
}

.text-area {
  width: 100%;
  height: 64px;
  padding: 0.5rem;
  border: 1px solid #dae1e9;
  border-radius: 6px;
  resize: none;
  font-size: 15px;
  color: #1e293b;
  margin: 0.5rem 0;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
}

.chamber-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 120px;
  overflow-y: auto;
  padding: 0.5rem;
  background: white;
  border-radius: 6px;
}

.chamber-item {
  padding: 4px 12px;
  background: #e2e8f0;
  border-radius: 20px;
  font-size: 0.9rem;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.2rem;
}
.arrow {
  background: #fff
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gray"><path d="M7 10l5 5 5-5z"/></svg>')
    no-repeat right 0px center;
}

.btn {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
}

.btn-confirm {
  background: #3b82f6;
  color: white;
}
.btn-confirm:hover {
  background: #0e53c2;
}

.btn-cancel {
  background: #e2e8f0;
  color: #64748b;
}

.btn-cancel:hover {
  background: #b2c3da;
}

.highlight {
  color: #ef4444;
  font-weight: 700;
}
.close-box {
  position: absolute;
  right: 20px;
  cursor: pointer;
}
</style>