<template>
  <div class="core-video">
    <div class="title">核心景区视频</div>

    <ul class="list">
      <li
        class="item"
        :style="{ backgroundImage: `url(${index == 0 ? primary : error})` }"
        v-for="(item, index) in list"
        :key="index"
      >
        <div>
          <p :class="[index % 2 === 0 ? 'item-title--primary' : 'item-title--error']">
            三峡之巅-最新异常名称三峡之巅-最新异常名称三峡之巅-最新异常名称
          </p>
          <!-- <img class="item-img" src="@/assets/images/cover.png" /> -->
          <video
            class="item-img"
            :ref="(el) => getRefs(el, index)"
            muted
            autoplay
            controls
            style="object-fit: fill"
          >
            <source src="" type="application/x-mpegURL" />
          </video>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
  import primary from '@/assets/images/item-primary.png'
  import error from '@/assets/images/item-error.png'
  import { getVideoListApi } from '@/api/home'
  import Hls from 'hls.js'

  let list = ref(2)

  const getRefs = (el) => {
    if (el) {
      const hls = new Hls()
      hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
      hls.attachMedia(el)
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        el.play()
      })
    }
  }
  const getVideoList = async () => {
    let res = await getVideoListApi({
      businessVideoDisplayPosition: ''
    })
  }
  onMounted(() => {
    getVideoList()
  })
</script>

<style lang="scss" scoped>
  :deep(.el-loading-mask) {
    background-color: transparent !important;
  }
  .core-video {
    margin: vh(10);
    width: vw(300);
    border-radius: vw(2);
    background-image: url('@/assets/images/bg-1.png');
    background-size: 100% 100%;

    .title {
      width: 100%;
      height: vh(26);
      text-align: center;
      line-height: vh(26);
      font-size: vw(16);
      font-weight: 800;
      color: #fff;
    }

    .list {
      overflow-y: auto;
      overflow-x: hidden;
      height: vh(1026);
      padding: vw(8);
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        width: vw(0); /* 滚动条的宽度 */
      }

      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: #f1f1f1; /* 轨道的背景色 */
      }

      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: #888; /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }

      /* 当鼠标悬停在滚动条上时滑块的样式 */
      &::-webkit-scrollbar-thumb:hover {
        background: #555; /* 滑块的背景色 */
      }
    }

    .item {
      margin-bottom: vh(10);
      padding: vw(10);
      background-size: 100% 100%;
      & > div {
        position: relative;
      }
      &-title {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: vw(10);
        color: #fff;
        font-size: vw(14);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &-title--error {
        @extend .item-title;
        background-color: rgba(226, 27, 27, 0.72);
      }
      &-title--primary {
        @extend .item-title;
        background-color: rgba(4, 30, 69, 0.72);
      }
      &-img {
        width: 100%;
        height: vh(164);
        display: block;
        object-fit: cover;
      }
    }
  }
</style>
