<template>
  <view class="richDetail">
    <view
      scroll-x="true"
      class="detail_title video_box"
      style="background-color: #fff"
    >
      <view
        v-for="(v, i) in dataList"
        :key="v.id"
        :class="`video_item ${currentVideo && currentVideo.id == v.id ? 'hot' : ''}`"
        @click="handleClick(v, i)"
      >
        【{{ v.type == '2' ? '音频' : '视频' }}】{{ getNumber(i + 1) }}
      </view>
    </view>

    <slot name="richHeadImg"></slot>
  </view>
</template>

<script setup lang="ts">
import type { IVideoInfo, IChapterDetail } from '@/types/video'

// Props 定义
interface Props {
  detailInfo: IChapterDetail
  dataList: IVideoInfo[]
  currentVideo: IVideoInfo | null
  changeVideoLock: boolean
}

const props = defineProps<Props>()

// Emits 定义
const emit = defineEmits<{
  open: [video: IVideoInfo]
}>()

// 方法: 格式化序号为两位数
const getNumber = (num: number): string => {
  if (num >= 10) {
    return num.toString()
  } else {
    return `0${num}`
  }
}

// 方法: 处理视频点击
const handleClick = (data: IVideoInfo, index: number) => {
  if (props.changeVideoLock) {
    return
  }
  console.log('data at line 35:', data)
  emit('open', data)
}
</script>

<style lang="scss" scoped>
.commonPageBox {
  padding: 40rpx 0;
}

.contentBox {
  .headImage {
    margin-bottom: 20rpx;
  }

  .detail_title {
    padding: 0 20rpx 0;
    font-size: 26rpx;
    line-height: 65rpx;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    overflow: hidden;
  }

  .rich_box {
    padding: 20rpx;
    box-sizing: border-box;

    p {
      display: block;
      text-indent: 2em;
      letter-spacing: 2px !important;
      line-height: 46rpx;
    }
  }
}

.richDetail {
  width: 100%;
  height: 100%;
}

.video_box {
  width: 100%;
  
  .video_item {
    width: 23%;
    margin-right: 10rpx;
    margin-bottom: 20rpx;
    float: left;
    border: 2rpx solid #2979ff;
    background: #fff;
    color: #2979ff;
    text-align: center;
    border-radius: 10rpx;
    box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
  }

  .video_item:nth-child(4n) {
    margin-right: 0;
  }
}

.hot {
  background-color: #2979ff !important;
  color: #fff !important;
}
</style>
