<!--  -->
<template>
  <div class="show-tag" :id="`tagBox_${tag.sid}`">
    <div class="tag-title">
      <h2>
        {{ tag.title }}
        <!-- <ui-audio
          v-if="tag.type == 'audio' && audioInfo.length > 0"
          class="audio"
          ref="audio"
          :src="common.changeUrl(audioInfo[0].src)"
        /> -->
      </h2>
    </div>
    <div class="desc" v-if="tag.content != ''">
      <div class="text" v-html="tag.content"></div>
    </div>
    <div
      class="tag-metas"
      @click.stop="open"
      :class="{ mask: tag.type == 'link', nocursor: tag.type == 'video' }"
      v-if="tag.media[tag.type].length > 0 && tag.type != 'audio'"
    >
      <metasImage :data="tag" v-if="tag.type == 'image'" />
      <!-- <metasImage v-if="tag.type == 'image'" />
      <metasVideo v-if="tag.type == 'video'" />
      <metasWeb v-if="tag.type == 'link'" /> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import metasImage from './metas/metas-image.vue';
  import { onMounted } from 'vue';
  import { tagType } from '/@/store/modules/scene';
  defineProps({
    tag: {
      type: Object,
      default: {} as any as tagType,
    },
  });
  const open = () => {};
  onMounted(() => {});
</script>
<style lang="scss" scoped>
  .show-tag {
    pointer-events: auto;
    background: rgba(27, 27, 28, 0.8);
    border-radius: 4px;
    // border: 1px solid #000000;
    // backdrop-filter: blur(4px);
    min-width: 400px;
    // min-height: 100px;
    padding: 30px 20px;

    .edit-btn {
      margin-top: 20px;
      text-align: right;

      span {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;

        &:hover {
          color: #fff;
        }
      }
    }

    .tag-metas {
      width: 100%;
      height: 225px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
      cursor: -webkit-zoom-in;
      margin-top: 20px;

      &.nocursor {
        cursor: auto;
      }

      &.mask {
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 100;
        }
      }
    }

    .tag-title {
      word-break: break-all;

      h2 {
        font-size: 20px;
        // margin-bottom: 10px;
        line-height: 30px;
        color: #ffffff;
        position: relative;

        .ui-audio {
          float: right;

          &.audio {
            display: inline-block;
            cursor: pointer;
          }
        }
      }
    }

    .desc {
      margin-top: 10px;

      .text {
        font-size: 14px;
        color: #999999;
        line-height: 20px;
        text-align: justify;
        word-break: break-all;
      }
    }
  }

  [is-mobile] {
    .show-tag {
      pointer-events: auto;
      background: rgba(27, 27, 28, 0.8);
      border-radius: 0.0533rem;
      // border: 1px solid #000000;
      // backdrop-filter: blur(0.0533rem);
      min-width: 7.4667rem;
      // min-height: 4rem;
      padding: 0.4rem 0.2667rem;

      .edit-btn {
        margin-top: 0.2667rem;
        text-align: right;

        span {
          font-size: 0.1867rem;
          color: rgba(255, 255, 255, 0.6);
          cursor: pointer;

          &:hover {
            color: #fff;
          }
        }
      }

      .tag-metas {
        width: 100%;
        height: 4.2667rem;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 0.0533rem;
        overflow: hidden;
        position: relative;
        cursor: -webkit-zoom-in;
        margin-top: 0.4rem;

        &.mask {
          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
          }
        }
      }

      .tag-title {
        h2 {
          font-size: 0.5333rem;
          line-height: 0.8rem;
          color: #ffffff;
          position: relative;

          .ui-audio {
            float: right;

            &.audio {
              display: inline-block;
              cursor: pointer;
            }
          }
        }
      }

      .desc {
        margin-bottom: 0.2933rem;

        .text {
          font-size: 0.3733rem;
          color: #999999;
          line-height: 0.2533rem;
          text-align: justify;
          line-height: 0.5333rem;

          p {
            line-height: 0.5333rem;
          }
        }
      }
    }
  }
</style>
