<script setup lang="ts">
import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
const props = defineProps(['data'])
const videoOptions = $computed(() => {
  const playInfoList = props.data.play_auth.play_info_list
  let src = ''
  if (Array.isArray(playInfoList)) {
    src = playInfoList.find((item: any) => item.Definition === 'SD')?.PlayURL
  } else {
    src = playInfoList
  }
  return { sources: [{ src }] }
})
</script>
<template>
  <div class="center-video-box">
    <div class="right-statistics">
      <div class="stat-item">
        <img src="/center_resource/view-vicon1.png" />
        <div class="content">
          <div class="unit">{{ data.project_count }}<span>个</span></div>
          <div class="tag">使用项目/学校</div>
        </div>
      </div>
      <div class="stat-item">
        <img src="/center_resource/view-vicon2.png" />
        <div class="content">
          <div class="unit">{{ data.course_count }}<span>门</span></div>
          <div class="tag">使用课程</div>
        </div>
      </div>
      <div class="stat-item">
        <img src="/center_resource/view-vicon3.png" />
        <div class="content">
          <div class="unit">{{ data.learn_count }}<span>人次</span></div>
          <div class="tag">累计学习人次</div>
        </div>
      </div>
      <div class="stat-item">
        <img src="/center_resource/view-vicon4.png" />
        <div class="content">
          <div class="unit">{{ data.learn_time_count }}<span>分钟</span></div>
          <div class="tag">累计学习时长</div>
        </div>
      </div>
    </div>
    <div style="width: 100%; background: #000">
      <div style="margin: 0 auto; width: 80%">
        <AppVideoPlayer :isAdd="true" :options="videoOptions"></AppVideoPlayer>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.center-video-box {
  padding: 20px 0;
  .right-statistics {
    margin: 0 auto;
    display: flex;
    padding-top: 15px;
    justify-content: space-between;
    .stat-item {
      width: 24%;
      height: 85px;
      background: #b41e47;
      border-radius: 6px;
      display: flex;
      align-items: center;
      // margin: 0 auto 20px;
      margin-bottom: 20px;
      &:nth-child(even) {
        background: #bf9d6b;
      }
      img {
        width: 52px;
        height: 52px;
        display: block;
        margin-left: 18px;
      }
      .content {
        margin-left: 18px;
        .unit {
          font-size: 26px;
          line-height: 100%;
          color: #ffffff;
          span {
            font-size: 12px;
            line-height: 100%;
          }
        }
        .tag {
          font-size: 14px;
          line-height: 100%;
          color: #ffffff;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
