<script setup>
const props = defineProps(['viewers', 'messages', 'stats'])

const currentViewers = computed(() => props.viewers.slice(0, 3))

const detail = inject('detail')

const messageRef = ref()
function scrollToBottom() {
  if (!messageRef.value) return
  messageRef.value.scrollTo(0, messageRef.value.scrollHeight)
}

watch(
  () => props.messages,
  () => nextTick(() => scrollToBottom()),
  { deep: true }
)

const userName = computed(() => {
  const user = detail.value?.current_user || {}
  return user.real_name || user.nickname || user.username
})

const product = computed(() => {
  return detail.value?.live_commodity || {}
})

const productUrl = computed(() => {
  if (!detail.value) return '/live/product_bg.png'
  const [file] = JSON.parse(product.value.picture_addreses)
  return file.url
})
</script>

<template>
  <div class="live-cover">
    <div class="upperGradient"></div>
    <div class="bottomGradient"></div>
    <div class="header">
      <div class="headerTop">
        <div class="userPanel">
          <div style="width: 88px; margin-right: 6px; margin-left: 10px">
            <div class="whiteText">{{ userName }}</div>
            <div class="likeTip">{{ stats.totalLikes }}本场点赞</div>
          </div>
          <div class="followButton">关注</div>
        </div>
        <div style="display: flex; align-items: center">
          <img :src="item.avatar" class="smallAvatar" v-for="item in currentViewers" :key="item.id" />
          <div class="grayPanel" style="margin-right: 4px">{{ viewers.length }}</div>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
            <g
              stroke="#fff"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              filter="url(#close_svg__a)">
              <path d="M5 15 15 5M5 5l10 10"></path>
            </g>
            <defs>
              <filter
                id="close_svg__a"
                width="20"
                height="20"
                x="0"
                y="0"
                color-interpolation-filters="sRGB"
                filterUnits="userSpaceOnUse">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feColorMatrix
                  in="SourceAlpha"
                  result="hardAlpha"
                  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
                <feOffset></feOffset>
                <feGaussianBlur stdDeviation="2"></feGaussianBlur>
                <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"></feColorMatrix>
                <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_42_157162"></feBlend>
                <feBlend in="SourceGraphic" in2="effect1_dropShadow_42_157162" result="shape"></feBlend>
              </filter>
            </defs>
          </svg>
        </div>
      </div>
      <div class="headerDown">
        <div style="display: flex">
          <div class="grayPanel" style="margin-right: 8px">
            <img src="/live/hot.png" style="height: 12px; margin-right: 4px" />明星大侦探
          </div>
          <div class="grayPanel">小时榜第 8 名</div>
        </div>
        <div class="downLeft">
          <img src="/live/more.png" style="height: 14px; margin-right: 4px" />更多直播<svg
            class="force-icon force-icon-right"
            width="1em"
            height="1em"
            viewBox="0 0 12 12"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
            style="margin-left: 4px">
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M4.05563 8.12334C3.86036 8.3186 3.86036 8.63518 4.05563 8.83044L4.40918 9.184C4.60444 9.37926 4.92102 9.37926 5.11629 9.184L7.94471 6.35557C8.04287 6.25742 8.09168 6.12861 8.09116 5.99996C8.09168 5.87132 8.04287 5.74251 7.94471 5.64435L5.11629 2.81593C4.92102 2.62066 4.60444 2.62066 4.40918 2.81593L4.05563 3.16948C3.86036 3.36474 3.86036 3.68132 4.05563 3.87659L6.179 5.99996L4.05563 8.12334Z"></path>
          </svg>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-end">
        <img src="/live/game.png" style="height: 36px; margin: 8px 15px" />
      </div>
    </div>
    <div class="bottom">
      <div class="item">
        <div class="topBar">
          <div class="talk">
            <div class="dot"></div>
            讲解中
          </div>
          <svg
            class="force-icon force-icon-close"
            width="1em"
            height="1em"
            viewBox="0 0 49 48"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M34.0245 12.5077L36.1695 14.6527C36.8464 15.3296 36.8464 16.4272 36.1695 17.1041L29.2728 23.9996L36.1695 30.8959C36.8464 31.5728 36.8464 32.6704 36.1695 33.3473L34.0245 35.4923C33.3475 36.1692 32.25 36.1692 31.5731 35.4923L24.6749 28.5931L17.7838 35.4898C17.1069 36.1667 16.0093 36.1667 15.3324 35.4898L13.1874 33.3448C12.5105 32.6679 12.5105 31.5703 13.1874 30.8934L20.077 23.9996L13.1874 17.1066C12.5105 16.4297 12.5105 15.3321 13.1874 14.6552L15.3324 12.5102C16.0093 11.8333 17.1069 11.8333 17.7838 12.5102L24.6749 19.4017L31.5731 12.5077C32.25 11.8308 33.3475 11.8308 34.0245 12.5077Z"></path>
          </svg>
        </div>
        <img :src="productUrl" style="width: 106px; height: 106px" />
        <div class="title">{{ product.title }}</div>
      </div>
    </div>
    <div class="message" ref="messageRef">
      <div class="message-item" v-for="item in messages" :key="item.id">
        <div class="message-item-inner" v-if="item.type !== 'leave'">
          <span class="message-item__name"> {{ item.user.name }}: </span>
          <span class="message-item__content">{{ item.content }}</span>
        </div>
      </div>
    </div>
    <slot />
  </div>
</template>

<style lang="scss">
.live-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .upperGradient {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.24), transparent);
    height: 140px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 110;
  }
  .bottomGradient {
    background: linear-gradient(180deg, transparent 100%, rgba(0, 0, 0, 0.24) 0);
    bottom: 0;
    height: 140px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 110;
  }
  .header {
    position: relative;
    z-index: 120;
  }
  .headerTop {
    display: flex;
    justify-content: space-between;
    padding-left: 7px;
    padding-right: 17px;
  }
  .userPanel {
    border-radius: 120px;
    padding: 2px;
    width: 150px;
    display: flex;
    align-items: center;
    background: #00000033;
  }
  .followButton {
    display: flex;
    align-items: center;
    background: linear-gradient(117.68deg, #ff2593 12.72%, #ff2559 87.95%);
    border-radius: 120px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    height: 28px;
    margin-right: 2px;
    padding: 0 8px;
  }
  .whiteText {
    color: #ffffffe5;
    font-size: 11px;
    font-weight: 500;
  }
  .likeTip {
    color: #ffffffb2;
    font-size: 9px;
    font-weight: 500;
  }
  .smallAvatar {
    border-radius: 12px;
    height: 24px;
    margin-right: 4px;
    overflow: hidden;
    width: 24px;
  }
  .grayPanel {
    background: #00000033;
    border-radius: 20px;
    color: #fff;
    display: flex;
    font-size: 11px;
    font-weight: 500;
    height: 24px;
    padding: 0 6px;
    align-items: center;
  }
  .headerDown {
    box-sizing: border-box;
    margin-top: 8px;
    padding-left: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .downLeft {
    display: flex;
    align-items: center;
    background: #00000033;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    height: 24px;
    padding: 0 6px;
  }
  .bottom {
    box-sizing: border-box;
    display: flex;
    padding-right: 14px;
    z-index: 120;
    justify-content: flex-end;
    .item {
      border-radius: 5px;
      display: flex;
      overflow: hidden;
      padding-top: 2px;
      position: relative;
      width: 110px;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
    }
    .topBar {
      display: flex;
      height: 24px;
      left: 7px;
      position: absolute;
      top: 6px;
      width: 100px;
      color: #fff;
      font-weight: 500;
      justify-content: space-between;
    }
    .talk {
      background: #00000057;
      border-radius: 3px;
      display: flex;
      font-size: 10px;
      height: 15px;
      padding: 0 2px;
      align-items: center;
      line-height: 12px;
    }
    .title {
      box-sizing: border-box;
      font-size: 12px;
      padding: 6px;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.message {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  background: linear-gradient(180deg, transparent 100%, rgba(0, 0, 0, 0.24) 0);
  z-index: 120;
  margin: 14px 0;
  &-item {
    font-size: 13px;
    margin: 4px 10px;
    &-inner {
      display: inline-block;
      border-radius: 120px;
      padding: 5px;
      background: #00000033;
    }

    &__name {
      color: #8ce7ff;
      cursor: pointer;
    }
    &__content {
      color: #fff;
    }
  }
}
</style>
