<!--  -->
<template>
  <div class="show-tag" :id="`tagBox_${tag.sid}`">
    <div class="show-content">
      <div class="share-box" v-if="tag.type == 'audio' && audioInfo.length > 0">
        <kk-audio
          v-if="tag.type == 'audio' && audioInfo.length > 0"
          class="audio"
          ref="audio"
          :muted="isLive"
          :src="changeUrl(audioInfo[0].src)"
        />
      </div>
      <div class="tag-title">
        <h2>
          {{ tag.title }}
        </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="show && tag.media[tag.type].length > 0 && tag.type != 'audio'"
      >
        <metasImage :data="tag" v-if="tag.type == 'image'" />
        <metasWeb :data="tag" v-if="tag.type == 'link' && isUsingMiniApp" />
        <metasVideo :muted="isLive" :show="show" :data="tag" v-if="tag.type == 'video'" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import metasImage from './metas/metas-image.vue';
  import metasWeb from './metas/metas-web.vue';
  import metasVideo from './metas/metas-video.vue';
  import { ref, onMounted, computed } from 'vue';
  import { tagType } from '/@/store/modules/scene';
  import { changeUrl } from './common';
  import { KkAudio } from 'kankan-components';
  import { watchEffect, unref } from 'vue';
  import { useMiniApp } from '/@/hooks/useMiniApp';
  import browser from '/@/utils/browser';

  const isLive = computed(() => Number(browser.getURLParam('isTour')) === 0);
  const { isUsingMiniApp } = useMiniApp();
  const audio = ref(null);
  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    tag: {
      type: Object,
      default: {} as any as tagType,
    },
  });
  const audioInfo = computed(() => {
    return props.tag.media.audio;
  });
  const emits = defineEmits(['open']);
  const open = () => {
    if (props.tag.type !== 'video' && props.show) {
      emits('open');
    }
  };
  onMounted(() => {
    watchEffect(() => {
      if (props.show) {
        if (unref(audioInfo)?.length && unref(audio)) {
          console.log('audio-play', audio.value);
          // @ts-ignore
          audio.value?.play();
          // @ts-ignore
          if (isLive.value) {
            // @ts-ignore
            audio.value?.muted(true);
          }
        }
      } else {
        if (unref(audioInfo)?.length && unref(audio)) {
          // @ts-ignore
          audio.value?.pause();
        }
      }
    });
  });
</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: 420px;
    // min-height: 100px;
    padding: 30px 0 30px 20px;
    .share-box {
      height: 0.64rem;
      margin-bottom: 0.1333rem;
      position: relative;
      display: flex;
      justify-content: space-between;
    }
    .show-content {
      position: relative;
      z-index: 2;
      max-height: 50vh;
      overflow-y: scroll;
      padding: 0 20px 0 0;
      -webkit-overflow-scrolling: touch !important;
    }
    .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;
        text-align: left;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        .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;
      border-radius: 0.0533rem;
      min-width: 7.4667rem;
      border-radius: 0.1067rem;
      padding: 0.4rem 0 0.4rem 0.4rem;
      box-shadow: 0 0.1067rem 0.1067rem 0 rgba(0, 0, 0, 0.25),
        inset 0 0 0 0.0533rem hsla(0, 0%, 100%, 0.1);
      opacity: 1;

      .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>
