<template>
  <div id="edit-dialog">
    <div class="distance-back">
      <p>当前距离洞口：{{ pointDistance_str }}</p>
      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
    </div>
    <div class="equ-info">当前风压:{{ p }}Pa</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>
      </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>
      </div>
      <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
        :disabled="isDisabledInputNum" />
    </div>
    <div class="btn">
      <button @click="removeEquipment" disabled>删除</button>
      <button @click="addEquipment" disabled>添加</button>
    </div>
  </div>
</template>

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

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

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

// 当前风压
let p = ref(57);

// 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: 540px;
  // 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: 388px;
      height: 35px;
      font-size: 24px;
      font-family: MicrosoftYaHei;
      color: #ffffff;
      line-height: 35px;
    }

    img {
      cursor: pointer;
    }

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

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

  .setting {
    .setting-item {
      padding: 30px 30px 10px 30px;

      p {
        width: 130px;
        height: 35px;
        font-size: 26px;
        font-family: MicrosoftYaHei;
        color: #ffffff;
        line-height: 35px;
        margin-bottom: 20px;
      }
    }

    :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 {
    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.9);
    }
  }
}
</style>
