<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)"
        >
          <img :src="item.devImgUrl" />
          <div>{{ item.devName }}</div>
        </li>
      </ul>
    </div>
    <div class="option-btn">
      <button @click="removeDev">移除设备</button>
      <button @click="addDev">添加设备</button>
    </div>
  </div>
</template>

<script setup>
import { reactive, defineEmits, onMounted, ref } from "vue";
// 定义需要发射的事件
const emit = defineEmits([
  "initLoadDevicesModel",
  "checkDev",
  "addDev",
  "removeDev",
]);
onMounted(initDevicesModel);
//  挂载后加所有的设备模型
function initDevicesModel() {
  emit("initLoadDevicesModel");
}

const devItem = {
  devName: "传感器",
  devImgUrl: "../../../../../public/images/camera.jpg",
};
const list = [devItem, devItem, devItem, devItem];

const devicesList = reactive(list);
const checkIndex = ref(0);
//选择设备
function checkDev(key) {
  checkIndex = key;
  emit("checkDev", key); //携带参数发射事件
}
// 添加设备
function addDev() {
  emit("addDev");
}
//删除设备
function removeDev() {
  emit("removeDev");
}
</script>

<style lang="scss" scoped>
#edit-dev {
  height: 300px;
  width: 200px;
  background-color: rgba(236, 236, 236, 0.836);
  position: absolute;
  z-index: 999;
  display: block;
  border-radius: 10px;
  text-align: center;
  img {
    width: 50px;
  }
  .title {
    height: 20px;
  }
  .option-btn {
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 10px;
  }
  .divice-list {
    height: 240px;
  }
  .divice-list ul {
    height: 100%;
    padding: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-content: first baseline;
  }
  .divice-list ul li {
    border-radius: 5px;

    overflow: hidden;
    cursor: pointer;
  }

  #li-active {
    background: red;
  }
}
</style>
