<template>
  <a-popover color="rgba(0, 0, 0, 0.8)">
    <template #content>
      <div class="light-tag">
        <div class="light-tag-tit">
          <div>
            <img src="/asset/image//bulbLogo/21962.png" alt="" />
            <span class="tag-text">{{ result.name }}</span>
          </div>
          <button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button>
        </div>
        <div class="light-tag-box">
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title">控制模式</span>
            <span class="result">自动</span>
          </div>
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title">亮度</span>
            <span class="result">{{ result.brightness }}</span>
          </div>
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title">控制场景</span>
            <span class="result">{{ result.automatic2 }}</span>
          </div>
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title">色温</span>
            <span class="result">{{ result.brightness3 }}</span>
          </div>
        </div>
      </div>
    </template>
    <div class="icon-box" :style="styleObject" v-show="visible">
      <img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="" />
      <img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="" />
      <img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="" />
    </div>
  </a-popover>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  defineProps({
    styleObject: Object,
    type: Number,
    visible: {
      type: Boolean,
      default: false,
    },
  });

  const result = ref({
    id: '1',
    name: '站厅照明  1区',
    manual: '手动',
    automatic: '自动',
    brightness: '100lux',
    brightness2: '30lux',
    manual2: '手动',
    automatic2: '舒适',
    brightness3: '4000k',
    brightness4: '3800k',
  });
</script>
<style lang="less" scoped>
  .icon-box {
    width: 25px;
    height: 25px;
    position: absolute;

    .icon-item {
      width: 25px;
      cursor: pointer;
      transition: all ease 0.1s;
    }

    .icon-item:active {
      transform: scale(1.2);
    }
  }

  // 悬浮窗外部
  .light-tag {
    display: flex;
    flex-direction: column;
    gap: 10px;

    // 悬浮窗标题
    .light-tag-tit {
      display: flex;
      justify-content: space-between;
      vertical-align: middle;
      height: 30px;

      .tag-text {
        font-size: 16px;
        font-weight: 700;
        color: white;
        padding-left: 10px;
      }

      .right-button {
        width: 50px;
        height: 26px;
        background: rgba(57, 215, 187, 0.1);
        border: 1px solid rgba(57, 215, 187, 1);
        font-size: 12px;
        color: rgba(57, 215, 187, 1);
      }
    }
  }

  // 悬浮窗底部4格子
  .light-tag-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;

    .tag-box-item {
      position: relative;
      display: flex;
      justify-content: space-between;

      img {
        width: 120px;
        vertical-align: middle;
      }

      .title {
        position: absolute;
        left: 60px;
        top: 13px;
        color: rgba(64, 255, 252, 1);
      }

      .result {
        line-height: 50px;
        font-size: 16px;
        font-weight: 700;
        color: white;
      }
    }
  }
</style>
