<template>
  <div class="container" v-if="dialogVisible">
    <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-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" /> 在线反吹
      </label>
      <label class="custom-checkbox">
        <input type="checkbox" checked /> 快/慢
      </label>
      <label class="custom-checkbox">
        <input type="checkbox" checked /> DO1报警
      </label>
      <label class="custom-checkbox"> <input type="checkbox" /> DI3有效 </label>
    </div>

    <!-- 仓室顺序 -->
    <h4>仓室顺序</h4>
    <textarea class="text-area" name="" id="">
1，2，3，4，5，6，7，8，9，10，11，12</textarea
    >

    <!-- 复选框区域 -->
    <div class="checkbox-group mgr10">
      <label class="custom-checkbox">
        <input type="checkbox" checked /> DI接入Y/N
      </label>
      <label class="custom-checkbox">
        <input type="checkbox" checked /> 显示预警
      </label>
      <div class="setting-row">
        <span class="device-label">关联设备</span>
        <el-select v-model="value" placeholder="请选择"></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 } from "vue";
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["close"]);

const infoObj = reactive({
  props1: "", // 点位名称
  props2: "", // 仓室数量
  props3: "", // 地址
  props4: "", // 脉冲阀故障阈值
  props5: "", // 斜率
  props6: "", // 脉冲阀数量
  props7: "", // 截距
  props8: "", // 反吹间隔时间
  props9: "", // 延时时间
  props10: "", // 群聚值
  props11: "", // 积分时间
  props12: "", // 通信口
  props13: "", // 泄露阈值
  props14: "", // 故障阈值
  props15: "", // 谷值判定%
  props16: "", // 阀数量
  props17: "", // 提升阀故障
  props18: "", // 在线反吹
  props19: "", // 块/慢
  props20: "", // DO1报警
  props21: "", // DI3有效
  props22: "", // 仓室顺位
  props23: "", // DI接入Y/N
  props24: "", // 显示预警
  props25: "", // 关联设备
  props26: "", // 脉冲阀设备Y/N通信IP
  props27: "", // 室内卖出轮流喷吹
});
const infoEnum = reactive([
  {
    label: "点位名称",
    value: infoObj.props1,
    type: "input",
  },
  {
    label: "仓室数量",
    value: infoObj.props2,
    type: "input",
  },
  {
    label: "地址",
    value: infoObj.props3,
    type: "input",
  },
  {
    label: "脉冲阀故障阈值",
    value: infoObj.props4,
    type: "input",
  },
  {
    label: "截距",
    value: infoObj.props5,
    type: "input",
  },
  {
    label: "反吹间隔时间",
    value: infoObj.props6,
    type: "input",
  },
  {
    label: "基线阈值",
    value: infoObj.props7,
    type: "input",
  },
  {
    label: "延时时间",
    value: infoObj.props8,
    type: "input",
  },
  {
    label: "群聚值",
    value: infoObj.props9,
    type: "input",
  },
  {
    label: "积分时间",
    value: infoObj.props10,
    type: "input",
  },
  {
    label: "通信口",
    value: infoObj.props11,
    type: "select",
  },
  {
    label: "泄露阈值",
    value: infoObj.props12,
    type: "input",
  },
  {
    label: "泄露阈值",
    value: infoObj.props12,
    type: "input",
  },
  {
    label: "故障阈值",
    value: infoObj.props13,
    type: "input",
  },
  {
    label: "谷值判定(%)",
    value: infoObj.props14,
    type: "input",
  },
  {
    label: "阀数量",
    value: infoObj.props15,
    type: "input",
  },
  {
    label: "提升阀故障",
    value: infoObj.props16,
    type: "input",
  },
  {
    label: "提升阀延迟时间",
    value: infoObj.props17,
    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);
};
</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: 100px;
  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-cancel {
  background: #e2e8f0;
  color: #64748b;
}

.highlight {
  color: #ef4444;
  font-weight: 700;
}
</style>