<template>
  <div id="edit-dev">
    <!-- <div class="title">编辑设备</div>
    <div class="divice-list">
      <ul>
        <li v-for="(item, key) of devicesList" :key="key" @click="checkDev(key)"
          :class="{ 'li-active': checkIndex === key }">
          <img :src="item.devImgUrl" />
          <div>{{ item.devName + key }}</div>
        </li>
      </ul>
    </div>
    <div class="option-btn">
      <button @click="removeDev" :disabled="!params.hasDev">移除设备</button>
      <button @click="addDev" :disabled="params.hasDev">添加设备</button>
    </div> -->
    <div>
      <!-- 文字内容框 -->
      <div class="edit-dev-hole-distance">
        <!-- 每个附着点之间的间隔和被点击之后的第几个都需要动态传入 -->
        <!-- 之后还需要看最后的计算结果 -->
        <span>当前距离洞口：{{ pointeachlen }}米*{{ poiotwhich }}={{ pointeachlen * poiotwhich }}</span>
      </div>
      <!-- 输入框内容 -->
      <div class="edit-dev-input">
        <span class="edit-dev-input-type-font">传感器类型</span>
        <div class="edit-dev-input-type">
          <select v-model="typeselected" @change="typehandleChange">
            <option v-for="type in equipmentTypes" :key="type.value" :value="type.value">
              {{ type.text }}
            </option>
          </select>
        </div>
        <span class="edit-dev-input-option-font">设备选择</span>
        <div class="edit-dev-input-option">
          <select v-model="optionselected" @change="optionhandleChange">
            <option v-for="option in equipmentOptions" :key="option.value" :value="option.value">
              {{ option.text }}
            </option>
          </select>
        </div>
        <span class="edit-dev-input-threshold-font">阈值</span>
        <div class="edit-dev-input-threshold">
          <input type="text" @change="thresholdChange" v-model="thresholdValue">
        </div>
      </div>
      <!-- 删除和确定框 -->
      <div class="edit-dev-button">
        <div class="edit-dev-button-del">
          <!-- 删除 -->
          <button>删除</button>
        </div>
        <div class="edit-dev-button-sure">
          <!-- 确认 -->
          <button>确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, defineEmits, onMounted, ref, defineProps } from "vue";

const typeselected = ref("1");
const optionselected = ref("1");
const thresholdValue = ref("")


const allAdate = reactive({
  point: {
    pointachlen: 1,
    poiotwhich: 2
  },
  equipmentTypes: [
    { text: "风机", value: "1" },
    { text: "风压传感器", value: "2" },
    { text: "普通传感器", value: "3" },
  ],
  equipmentOptions: [
    {
      value: "1",
      text: "风机",
      Options: [
        { text: "1号风机", value: "1", threshold: 2 },
        { text: "2号风机", value: "2", threshold: 2 },
        { text: "3号风机", value: "3", threshold: 2 }
      ]
    },
    {
      value: "2",
      text: "风压传感器",
      Options: [
        { text: "1号风压", value: "1", threshold: 2 },
        { text: "2号风压", value: "2", threshold: 2 },
        { text: "3号风压", value: "3", threshold: 2 }
      ]
    },
    {
      value: "3",
      text: "普通传感器",
      Options: [
        { text: "1号传感器", value: "1", threshold: 2 },
        { text: "2号传感器", value: "2", threshold: 2 },
        { text: "3号传感器", value: "3", threshold: 2 }
      ]
    }
  ]
})

const pointeachlen = ref(allAdate.point.pointachlen);
const poiotwhich = ref(allAdate.point.poiotwhich);
const equipmentTypes = ref(allAdate.equipmentTypes);
const equipmentOptions = ref(allAdate.equipmentOptions)





function typehandleChange() {
  equipmentOptions.value = allAdate.equipmentOptions[typeselected.value].Options
}

function optionhandleChange() {

}

function thresholdChange() {
  allAdate.equipmentOptions[typeselected.value].Options[optionselected.value].threshold = thresholdValue
  console.log(allAdate.equipmentOptions[typeselected.value].Options[optionselected.value].threshold);

}

function clear() {
  selected.value = "1";
  optionselected = "1"
}





// const params = defineProps(["hasDev", "meshId"]);
// // 定义需要发射的事件
// const emit = defineEmits(["addDev", "removeDev"]);
// //  挂载后加所有的设备模型
// const cameradevItem = {
//   devName: "摄像头",
//   devImgUrl: "/images/camera.jpg",
//   devState: "未开启",
// };
// const fandevItem = {
//   devName: "风机",
//   devImgUrl: "/images/camera.jpg",
//   devState: "未开启",
// };
// const WindsensorsdevItem = {
//   devName: "风压传感器",
//   devImgUrl: "/images/camera.jpg",
//   devState: "未开启",
// };
// const GassensorsdevItem = {
//   devName: "气体传感器",
//   devImgUrl: "/images/camera.jpg",
//   devState: "未开启",
// };
// const TemsensorsdevItem = {
//   devName: "温度传感器",
//   devImgUrl: "/images/camera.jpg",
//   devState: "未开启",
// };
// const list = [cameradevItem, fandevItem, WindsensorsdevItem, GassensorsdevItem, TemsensorsdevItem];
// const devicesList = reactive(list);

// const checkIndex = ref(-1);
// //选择设备
// function checkDev(key) {
//   checkIndex.value = key;
// }
// // 添加设备
// function addDev() {
//   if (checkIndex.value === -1) {
//     alert("请选择设备");
//     return;
//   }
//   const devInfo = list[checkIndex.value];
//   devInfo.checkIndex = checkIndex.value;
//   emit("addDev", devInfo);
// }
// //删除设备
// function removeDev() {
//   emit("removeDev");
// }
</script>

<style lang="scss" scoped>
#edit-dev {
  width: 540px;
  height: 683px;
  background: rgba(7, 35, 72, 0.79);
  border-radius: 20px;
  border: 2px solid #0F82AF;

  .edit-dev-hole-distance {
    width: 388px;
    height: 35px;
    font-size: 26px;
    font-family: MicrosoftYaHei;
    color: #FFFFFF;
    line-height: 35px;
  }

  .edit-dev-input-type-font {
    width: 130px;
    height: 35px;
    font-size: 26px;
    font-family: MicrosoftYaHei;
    color: #FFFFFF;
    line-height: 35px;
  }

  .edit-dev-input-type {
    width: 284px;
    height: 51px;
    border: 1px solid #0F82AF;
  }

}

.li-active {
  background: rgb(224, 114, 114);
}
</style>
