<script setup lang="ts">
import device_bg from "@/assets/static/device_bg.png";
import device_tag from "@/assets/static/device_tag.png";
import device_tag_select from "@/assets/static/device_tag_select.png";
import { nextTick, ref } from "vue";
defineOptions({
  name: "DevicePage"
});
const loading = ref(true);
const deviceList = ref([
  {
    name: "CMR-025",
    isSelect: false
  },
  {
    name: "CMR-026",
    isSelect: false
  },
  {
    name: "CMR-027",
    isSelect: false
  },
  {
    name: "CMR-028",
    isSelect: false
  },
  {
    name: "CMR-029",
    isSelect: false
  },
  {
    name: "CMR-030",
    isSelect: false
  },
  {
    name: "CMR-031",
    isSelect: false
  }
]);
setTimeout(() => {
  loading.value = !loading.value;
}, 800);

const selectDevice = (value, index) => {
  const isSelected = value.isSelect;
  nextTick(() => {
    deviceList.value.forEach(item => {
      item.isSelect = false;
    });
    deviceList.value[index] = {
      name: value.name,
      isSelect: isSelected ? false : true
    };
  });
};

// const selected = ref(false);
// const selectDeviceTag = id => {
//   selected.value = !selected.value;
//   nextTick(() => {
//     deviceList.value.forEach((item, index) => {
//       if (index == id) item.isSelect = selected.value;
//     });
//   });
// };
</script>

<template>
  <div class="main">
    <div class="device-image float-left">
      <el-skeleton animated :loading="loading">
        <div class="device-image-bg">
          <img :src="device_bg" />
          <div class="device-image-tag">
            <span
              :class="deviceList[0].isSelect ? 'device-image-tag-select' : ''"
              >CMR-025</span
            >
            <img
              :src="deviceList[0].isSelect ? device_tag_select : device_tag"
            />
          </div>
          <div class="device-image-tag">
            <span
              :class="deviceList[1].isSelect ? 'device-image-tag-select' : ''"
              >CMR-026</span
            >
            <img
              :src="deviceList[1].isSelect ? device_tag_select : device_tag"
            />
          </div>
          <div class="device-image-tag">
            <span
              :class="deviceList[2].isSelect ? 'device-image-tag-select' : ''"
              >CMR-026</span
            >
            <img
              :src="deviceList[2].isSelect ? device_tag_select : device_tag"
            />
          </div>
          <div class="device-image-tag">
            <span
              :class="deviceList[3].isSelect ? 'device-image-tag-select' : ''"
              >CMR-026</span
            >
            <img
              :src="deviceList[3].isSelect ? device_tag_select : device_tag"
            />
          </div>
          <div class="device-image-tag">
            <span
              :class="deviceList[4].isSelect ? 'device-image-tag-select' : ''"
              >CMR-026</span
            >
            <img
              :src="deviceList[4].isSelect ? device_tag_select : device_tag"
            />
          </div>
          <div class="device-image-tag">
            <span
              :class="deviceList[5].isSelect ? 'device-image-tag-select' : ''"
              >CMR-026</span
            >
            <img
              :src="deviceList[5].isSelect ? device_tag_select : device_tag"
            />
          </div>
          <div class="device-image-tag">
            <span
              :class="deviceList[6].isSelect ? 'device-image-tag-select' : ''"
              >CMR-026</span
            >
            <img
              :src="deviceList[6].isSelect ? device_tag_select : device_tag"
            />
          </div>
        </div>
      </el-skeleton>
    </div>
    <div class="float-right w-[30%] h-[90vh]">
      <el-card class="box-card h-full">
        <template #header>
          <div class="card-header">
            <span>设备列表</span>
          </div>
        </template>
        <div class="device-id">
          <p class="device-id-title">设备ID</p>
          <el-scrollbar height="384px">
            <p
              v-for="(item, index) in deviceList"
              :key="index"
              :class="item.isSelect ? 'device-id-select' : 'scrollbar-item'"
              @click="selectDevice(item, index)"
            >
              {{ item.name }}
            </p>
          </el-scrollbar>
        </div>
        <el-divider />
        <div class="device-content">
          <div class="device-content-box">
            <span>设备名称</span>
            <p>CMR-025</p>
          </div>
          <div class="device-content-box">
            <span>设备S/N</span>
            <p>XXXXXXX</p>
          </div>
          <div class="device-content-box">
            <span>视频源</span>
            <p>YouKu</p>
          </div>
          <div class="device-content-box">
            <span>视频地址</span>
            <p>http://xxxx.com/video</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<style lang="scss">
.device-image {
  display: flex;
  align-items: center;
  height: 90vh;

  .device-image-bg {
    position: relative;

    .device-image-tag {
      position: absolute;
      top: 248px;
      left: 295px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 84px;
      height: 94px;
      text-align: center;
      cursor: pointer;

      span {
        box-sizing: border-box;
        display: block;
        width: 100%;
        height: 28px;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 28px;
        color: #333;
        text-align: center;
        background: #fff;
        border: 1px solid #1c0d82;
        border-radius: 2px;
      }

      .device-image-tag-select {
        color: #fff;
        // span {
        background: #1c0d82;
        // }
      }
    }

    .device-image-tag:nth-of-type(2) {
      top: 360px;
      left: 266px;
    }

    .device-image-tag:nth-of-type(3) {
      top: 370px;
      left: 360px;
    }

    .device-image-tag:nth-of-type(4) {
      top: 315px;
      left: 460px;
    }

    .device-image-tag:nth-of-type(5) {
      top: 350px;
      left: 555px;
    }

    .device-image-tag:nth-of-type(6) {
      top: 200px;
      left: 470px;
    }

    .device-image-tag:nth-of-type(7) {
      top: 430px;
      left: 485px;
    }

    .device-image-tag-select {
      color: #fff;
      // span {
      background: #1c0d82;
      // }
    }
  }
}

.box-card {
  .card-header {
    span {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      font-size: 16px;
      font-weight: 800;
      color: #000;
    }
  }

  .el-card__body {
    padding: 10px 0 20px;

    .device-id {
      p {
        height: 48px;
        padding: 0 20px;
        line-height: 48px;
        cursor: pointer;
      }

      .device-id-title {
        font-family: "Helvetica Neue", Helvetica, "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        font-size: 15px;
        font-weight: 400;
        color: #666;
      }
    }

    .device-id-select {
      color: #fff;
      background: #1c0d82;
    }

    .device-content {
      padding: 0 20px;

      .device-content-box {
        span {
          box-sizing: border-box;
          display: block;
          height: 30px;
          font-family: "Helvetica Neue", Helvetica, "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
          font-size: 14px;
          font-weight: 400;
          line-height: 30px;
          color: #1e1e1e;
        }

        p {
          box-sizing: border-box;
          width: 100%;
          height: 32px;
          padding: 0 12px;
          font-family: "Helvetica Neue", Helvetica, "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
          font-size: 12px;
          font-weight: 400;
          line-height: 32px;
          border: 1px solid #dcdcdc;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
