<template>
  <div class="container el-self-container all-select-btn" v-if="dialogVisible" data-testid="params-settings-container">
    <div class="close-box" @click="cancelFun" data-testid="close-button">
      <el-icon size="25"><Close /></el-icon>
    </div>
    <h1 class="title">sensor设置信息</h1>

    <div class="content-box" data-testid="content-box">
      <div class="grid-container" data-testid="grid-container">
        <!-- 左侧参数设置 -->
        <div class="setting-group" data-testid="left-settings">
          <div
            class="setting-row"
            v-for="item in leftInfoEnum"
            :key="item.label"
          >
            <span
              class="label"
              :class="{ layout_2: item.type2 === 'checkbox' }"
            >
              <el-checkbox
                style="margin-right: 10px"
                v-if="item.type2 === 'checkbox'"
                v-model="infoObj[item.propKey2]"
                :data-testid="`left-checkbox-${item.propKey2}`"
              ></el-checkbox>
              {{ item.label }}
            </span>
            <el-input
              v-if="item.type === 'input'"
              v-model="infoObj[item.propKey]"
              :data-testid="`left-input-${item.propKey}`"
            ></el-input>
            <el-select
              v-model="infoObj[item.propKey]"
              v-if="item.type === 'select'"
              :data-testid="`left-select-${item.propKey}`"
            >
              <el-option
                v-for="(option, index) in item.options"
                :key="option.code"
                :label="option.name"
                :value="option.code"
                :id="`left-select-option-${index}`"
              ></el-option>
            </el-select>
          </div>
        </div>

        <!-- 右侧参数设置 -->
        <div class="setting-group" data-testid="right-settings">
          <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="infoObj[item.propKey]"
              :data-testid="`right-input-${item.propKey}`"
            ></el-input>
          </div>
        </div>
      </div>

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

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

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

      <!-- 复选框区域 -->
      <div class="checkbox-group mgr10" data-testid="checkbox-group-3">
        <div class="select-input" data-testid="valve-device-setting">
          <label class="custom-checkbox">
            <input
              type="checkbox"
              checked
              v-model="infoObj.hasLiftValveCommunicationIp"
              data-testid="has-lift-valve-checkbox"
            />
            脉冲阀设备Y/N 通信IP
          </label>
          <div style="margin-left: 10px" data-testid="ip-input-container">
            <el-input v-model="infoObj.liftValveCommunicationIp" data-testid="lift-valve-ip-input"></el-input>
          </div>
        </div>
        <div data-testid="pulse-blow-setting">
          <label class="custom-checkbox">
            <input type="checkbox" v-model="infoObj.indoorPulseBlow" data-testid="indoor-pulse-blow-checkbox"/> 室内脉冲轮流喷吹
          </label>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="button-group" data-testid="button-group">
      <button class="btn search-btn-balck-theme" @click="confirmFun" data-testid="confirm-button">确认</button>
      <button class="btn cancel-btn-balck-theme" @click="cancelFun" data-testid="cancel-button">取消</button>
    </div>
  </div>
  <div class="mask" v-if="dialogVisible" @click="cancelFun" data-testid="dialog-mask"></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);
    infoObj = newVal;
  },
  { deep: true, inmediate: true }
);

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

let infoObj = reactive({
  deviceName: "", // 点位名称
  compartNum: "", // 仓室数量
  address: "", // 地址
  pulseValveFaultThreshold: "", // 脉冲阀故障阈值
  slope: "", // 斜率
  pulseValveNum: "", // 脉冲阀数量
  intercept: "", // 截距
  backblowInterval: "", // 反吹间隔时间
  baselineThreshold: "", // 基线阈值,
  delayTime: "", // 延时时间
  clusterValue: "", // 群聚值
  integrationTime: "", // 积分时间
  communicationPort: "", // 通信口
  leakThreshold: "", // 泄露阈值
  faultThreshold: "", // 故障阈值
  valleyDection: "", // 谷值判定%
  valveNum: "", // 阀数量
  hasValveNum: "", // 阀数量选中
  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
  hasLiftValveCommunicationIp: "", // 脉冲阀设备Y/N通信IP选中
  indoorPulseBlow: "", // 室内卖出轮流喷吹
  liftValveDelayTime: "", // 提升阀延迟时间
});
const communicationPortOptions = ref([]);
const infoEnum = reactive([
  {
    label: "点位名称",
    propKey: "deviceName",
    type: "input",
  },
  {
    label: "仓室数量",
    propKey: "compartNum",
    type: "input",
  },
  {
    label: "地址",
    propKey: "address",
    type: "input",
  },
  {
    label: "脉冲阀故障阈值",
    propKey: "pulseValveFaultThreshold",
    type: "input",
  },
  {
    label: "斜率",
    propKey: "slope",
    type: "input",
  },
  {
    label: "脉冲数量",
    propKey: "pulseValveNum",
    type: "input",
  },
  {
    label: "截距",
    propKey: "intercept",
    type: "input",
  },
  {
    label: "反吹间隔时间",
    propKey: "backblowInterval",
    type: "input",
  },
  {
    label: "基线阈值",
    propKey: "baselineThreshold",
    type: "input",
  },
  {
    label: "延时时间",
    propKey: "delayTime",
    type: "input",
  },
  {
    label: "群聚值",
    propKey: "clusterValue",
    type: "input",
  },
  {
    label: "积分时间",
    propKey: "integrationTime",
    type: "input",
  },
  {
    label: "通信口",
    propKey: "communicationPort",
    type: "select",
    options: [],
  },
  {
    label: "泄露阈值",
    propKey: "leakThreshold",
    type: "input",
  },
  {
    label: "故障阈值",
    propKey: "faultThreshold",
    type: "input",
  },
  {
    label: "谷值判定(%)",
    propKey: "valleyDection",
    type: "input",
  },
  {
    label: "阀数量",
    propKey: "valveNum",
    propKey2: "hasValveNum",
    type: "input",
    type2: "checkbox",
  },
  {
    label: "提升阀故障",
    propKey: "liftValveFailure",
    type: "input",
  },
  {
    label: "提升阀延迟时间",
    propKey: "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: 10%;
  left: 50%;
  transform: translateX(-50%);
  max-height: 80vh;
  max-width: 60vw;
  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;
  // overflow-y: auto;
  background: #181d21;
  .content-box {
    overflow: auto;
    height: 55vh;
  }
  .content-box::-webkit-scrollbar {
    width: 1px;
  }
}


.title {
  color: #fff;
  font-size: 18px;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #434343;
}

.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;
  background: #00000080;
}

.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-color: #181d21;
  border-radius: 6px;
  height: 35px;
}
.layout_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.layout_2 {
  display: flex;
  align-items: center;
}

.label {
  color: #c5c8cc;
  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;
  color: #c5c8cc;
}

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

.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: #4e7bfa4d;
  color: #437bfa;
}
.btn-confirm:hover {
  background: #4e7cfa88;
}

.btn-cancel {
  background: #8a89894d;
  color: #fff;
}

.btn-cancel:hover {
  background: #8a89899d;
}

.highlight {
  color: #ef4444;
  font-weight: 700;
}
.close-box {
  position: absolute;
  right: 20px;
  cursor: pointer;
}
</style>
<style>
/* .el-self-container .el-input__wrapper{
  background: #181D21;
  box-shadow: 0 0 0 1px #697b78b6;
}
.el-self-container .el-input__inner {
  color: #fff;
}
.el-self-container .el-select__wrapper  {
  color: #fff;
  background: #181D21;
  box-shadow: 0 0 0 1px #697b78b6 !important;
}
.el-self-container .el-textarea__inner  {
  color: #fff;
  background: #181D21;
  box-shadow: 0 0 0 1px #434343 !important;
  border: 1px solid #434343 !important;
}
.el-self-container .device-label {
  color: #fff;
} */
.el-self-container .device-label {
  color: #fff;
}
</style>

<style>
 .equipment-management .el-input__inner {
    color: #fff !important;
  }
</style>