<script setup lang="ts">
import PreviewFiles from '@/components/base/PreviewFiles.vue'
const props = defineProps({
  data: {
    type: Object,
    require: true
  }
})
</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">{{ props.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">{{ props.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">{{ props.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">{{ props.data?.learn_time_count }}<span>分钟</span></div>
          <div class="tag">累计学习时长</div>
        </div>
      </div>
    </div>
    <div class="file-box">
      <PreviewFiles :item="props.data"></PreviewFiles>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.center-video-box {
  padding: 20px 0;
  // display: flex;
  .right-statistics {
    // flex: 1;
    display: flex;
    justify-content: space-between;
    // max-width: 1200px;
    margin: 0 auto;
    padding-top: 15px;
    .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>
