<template>
  <div id="edit-dialog">
    <!-- <div class="distance-back"> -->
    <!-- <p>当前距离洞口：
        <span>
          {{ pointDistance_str }}
        </span>
      </p> -->
    <!-- <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" /> -->
    <!-- </div> -->
    <!-- <div class="equ-info">当前风压:
      <span>{{ p }}Pa</span>
    </div> -->
    <div class="setting">
      <!-- <div class="setting-item"> -->
      <!-- <p>传感器类型</p> -->
      <!-- <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
          :placeholder="params.equipmentType" disabled>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select> -->
      <!-- <p>{{ params.equipmentType }}</p> -->
      <!-- </div> -->
      <div class="setting-item">
        <p>设备名称:</p>
        <!-- <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
          :placeholder="params.equipmentName" disabled>
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
        </el-select> -->
        <p>{{ params.devRealtimeDetail.equipmentName }}</p>
      </div>
      <div class="setting-item">
        <p>{{ getDevParam + ":" }}</p>
        <p>
          {{
            params.devRealtimeDetail.value + params.devRealtimeDetail.unit ||
            "--"
          }}
        </p>
      </div>
      <!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
        :disabled="isDisabledInputNum" />
      <p>{{ params.equipmentValue }}</p> -->
    </div>
    <!-- <div class="btn">
      <button @click="removeEquipment">删除</button>
      <button @click="addEquipment" disabled>添加</button>
    </div> -->
  </div>
</template>

<script setup>
import InputNum from "./childComps/InputNum.vue";

import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";

// 定义事件发射器，父组件监听
const emit = defineEmits([
  "cancel",
  "removeEquipment",
  "addEquipment",
  "EquInf",
]);
const params = defineProps([
  "pointNum",
  "pointGap",
  "equipmentType",
  "equipmentName",
  "equipmentValue",
  "devRealtimeDetail",
]); //隧道第几个锚点

// 当前风压
let p = ref(57);
const getDevParam = computed(() => {
  if (/^windPressure+/.test(params.devRealtimeDetail.equipmentType)) {
    return "风压";
  } else if (/^frequency+/.test(params.devRealtimeDetail.equipmentType)) {
    return "频率";
  }
  switch (params.devRealtimeDetail.equipmentType) {
    case "windDirection":
      return "风向";
    case "temperature":
      return "温度";
    case "windSpeed":
      return "风速";
    case "humidness":
      return "湿度";
    default:
      return "浓度";
  }
});
// function EquInf() {
//   // 发射事件给tunnel父组件
//   emit("EquInf");
// }

// console.log(params.equipmentType);
// console.log(params.equipmentName);
// console.log(params.equipmentValue);

// let equipmentTypeInf = ref(params.equipmentType)
// let equipmentNameInf = ref(params.equipmentName)
// let equipmentValueInf = ref(params.equipmentValue)

//计算锚点之间距离
const pointDistance_str = computed(
  () =>
    `${params.pointGap}米*${params.pointNum}=${
      params.pointGap * params.pointNum
    }米`
);

// 请求数据模型
const equipmentSetting = reactive({
  equipmentType: "", //设备类型
  chooseEquipment: "", //设备选择(设备名称)
  threshold: "", //阈值
});

// 设备类型选项参数
const options = reactive([
  { label: "风机", value: "fan" },
  { label: "风压传感器", value: "sensors" },
  { label: "普通传感器", value: "sensors_2" },
]);

// 设备编号参数
let options2 = reactive([]);

let isDisabledInputNum = ref(false);
watch(
  () => equipmentSetting.equipmentType,
  () => {
    let label;
    options2 = [];
    equipmentSetting.chooseEquipment = "";
    isDisabledInputNum = false;
    if (equipmentSetting.equipmentType === "fan") {
      label = "风机";
      isDisabledInputNum = true;
    }
    if (equipmentSetting.equipmentType === "windPressure") label = "风压传感器";
    if (equipmentSetting.equipmentType === "sensors") label = "普通传感器";
    for (let i = 1; i < 11; i++) {
      options2.push({ label: `${i}号${label}`, value: `${label}_${i}` });
    }
  }
);

// const obj = {
//   equipmentId: String, //传感器id
//   equipmentName: String, //设备名称
//   pointName: String, //附着点名称（定位）
//   equipmentType: String, //设备类型（类型可根据后端）
//   equipmentOnline: Boolean, //是否在线
//   isFan: Boolean, //是不是风机
//   fanSpeed: Number, //F
// };

// const tunnel = {
//   tunnelId: "",
// };

// 显示锚点距离
let point_num = ref(0);

function handelInput(e) {
  equipmentSetting.threshold = e;
}

// 处理取消事件
function handleCancel() {
  // 发射事件给tunnel父组件
  emit("cancel");
}

// 删除模型
function removeEquipment() {
  emit("removeEquipment");
}

// 添加设备
function addEquipment() {
  emit("addEquipment", equipmentSetting);
  equipmentSetting.chooseEquipment = "";
  equipmentSetting.equipmentType = "";
  equipmentSetting.threshold = "";
}
// const equipmentType = {
//   label: String, //传感器类型
//   typeId: String, //传感器类型ID(方便查找该类型的所有设备)
// };
// // 通过以上选项请求以下具体哪个设备
// const equipment = {
//   label: String, //传感器编号加名称
//   equId: String, // 传感器Id
// };
</script>

<style lang="scss" scoped>
#edit-dialog {
  width: 240px;
  // height: 120px;
  // min-height: 683px;
  background: rgba(7, 35, 72, 0.79);
  border-radius: 20px;
  border: 2px solid #0f82af;
  position: absolute;
  z-index: 999;
  display: block;
  opacity: 0;

  .distance-back {
    height: 30px;
    display: flex;
    justify-content: space-between;
    margin: 20px 20px 0px 30px;

    p {
      width: 400px;
      height: 35px;
      font-size: 24px;
      font-family: MicrosoftYaHei;
      color: white;
      line-height: 35px;
    }

    span {
      color: #f7b500;
    }

    img {
      cursor: pointer;
    }

    img:active {
      transform: scale(0.9);
    }
  }

  .equ-info {
    width: 190px;
    height: 35px;
    font-size: 26px;
    font-family: MicrosoftYaHei;
    color: white;
    line-height: 35px;
    margin: 20px 30px 0px 30px;
  }

  .equ-info span {
    color: #f7b500;
  }

  .setting {
    .setting-item {
      padding: 15px 15px 5px 15px;
      display: flex;
      gap: 10px;
      line-height: 35px;
      font-size: 18px;
      font-family: MicrosoftYaHei;
      p:nth-child(1) {
        width: 80px;
        height: 35px;
        color: #ffffff;
        text-align: right;
      }

      p:nth-child(2) {
        color: #f7b500;
        height: 35px;
        text-align: left;
        flex: 2;
      }
    }

    :deep(.el-select) {
      width: 284px;
      //height: 51px;
      border: transparent;
    }

    :deep(.el-input--suffix) {
      width: 284px;
      height: 51px;
      background: rgba(7, 35, 72, 0.79);
      border: 2px solid #0f82af;
    }

    :deep(.el-input__wrapper) {
      background: transparent;
      border: none !important;
      padding: 0px 12px 0px 10px;
      box-shadow: none !important;
    }

    :deep(.el-input__wrapper input) {
      background: transparent;
      height: 100%;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: #08b7b8;
      line-height: 37px;
    }

    :deep(.el-icon) {
      color: #05feff;
      font-size: 34px;
    }
  }

  .btn {
    display: flex;
    justify-content: flex-end;
    button {
      cursor: pointer;
      transition: transform 0.1s linear 0s;
    }
    & :nth-child(1) {
      width: 95px;
      height: 39px;
      border-radius: 11px;
      border: 2px solid #0f82af;
      background: transparent;
      font-size: 20px;
      font-family: MicrosoftYaHei;
      color: #08b7b8;
      line-height: 39px;
      margin: 15px;
    }
    /* margin: 100px 40px 40px 40px;
    display: flex;
    justify-content: space-between;

    button[disabled] {
      color: grey !important;
      opacity: 1;
    }

    button {
      cursor: pointer;
      transition: transform 0.1s linear 0s;
    }

    & :nth-child(1) {
      width: 190px;
      height: 60px;
      border-radius: 11px;
      border: 2px solid #0f82af;
      background: transparent;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: #08b7b8;
      line-height: 60px;
    }

    & :nth-child(2) {
      width: 190px;
      height: 60px;
      background: #08b7b8;
      border-radius: 11px;
      font-size: 28px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      color: #ffffff;
      line-height: 60px;
    }*/

    button:active {
      transform: scale(0.98);
    }
  }
}
</style>
