<script setup lang="ts">
import { Files } from '@element-plus/icons-vue'
const props = defineProps({
  data: {
    type: Object,
    require: true
  }
})
const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp4', 'png', 'jpeg', 'jpg']
</script>

<template>
  <div class="video-info">
    <div class="video-img">
      <img
        style="width: 80px"
        :src="`/center_resource/detail-${props.data?.type}.png`"
        v-if="fileType.includes(props.data?.type)" />
      <el-icon class="item-info-icon" v-else>
        <Files />
      </el-icon>
    </div>
    <div class="info-items">
      <div class="flex-box">
        <div class="i-items">
          <img src="/center_resource/video-view-icon5.png" class="icons" />
          <div class="text-box">
            <div class="name">课件名称</div>
            <div class="value">{{ props.data?.name }}</div>
          </div>
        </div>
        <div class="i-items">
          <img src="/center_resource/video-view-icon6.png" class="icons" />
          <div class="text-box">
            <div class="name">课件分类</div>
            <div class="value">{{ props.data?.classification_name || '暂无' }}</div>
          </div>
        </div>
        <div class="i-items">
          <img src="/center_resource/video-view-icon1.png" class="icons" />
          <div class="text-box">
            <div class="name">状态</div>
            <div :class="props.data?.status == '1' ? 'value active' : 'value inactive'">
              {{ props.data?.status_name }}
            </div>
          </div>
        </div>
        <div class="i-items">
          <img src="/center_resource/video-view-icon3.png" class="icons" />
          <div class="text-box">
            <div class="name">创建时间</div>
            <div class="value">{{ props.data?.created_time }}</div>
          </div>
        </div>
      </div>
      <div class="flex-box">
        <div class="i-items">
          <img src="/center_resource/video-view-icon12.png" class="icons" />
          <div class="text-box">
            <div class="name">创建者</div>
            <div class="value">{{ props.data?.created_operator_name }}</div>
          </div>
        </div>
        <div class="i-items">
          <img src="/center_resource/course-view-icon13.png" class="icons" />
          <div class="text-box">
            <div class="name">负责人</div>
            <div class="value">{{ props.data?.belong_operator_name }}</div>
          </div>
        </div>
        <div class="i-items" style="align-items: flex-start">
          <img src="/center_resource/video-view-icon8.png" class="icons" />
          <div class="text-box">
            <div class="name">知识点</div>
            <div class="value">{{ props.data?.knowledge_points || '暂无' }}</div>
          </div>
        </div>
        <div class="i-items">
          <img src="/center_resource/video-view-icon4.png" class="icons" />
          <div class="text-box">
            <div class="name">更新时间</div>
            <div class="value">{{ props.data?.updated_time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.video-info {
  background: #f7f7f7;
  margin-top: 20px;
  padding: 20px;
  display: flex;
  .video-img {
    // width: 211px;
    padding: 0 30px;
    .item-info-icon {
      font-size: 100px;
      color: #aa1941;
    }
    .name {
      font-size: 16px;
      line-height: 100%;
      color: #666666;
      margin-top: 12px;
      text-align: center;
    }
  }
  .info-items {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    .flex-box {
      display: flex;
      justify-content: space-around;
    }
    .i-items:not(:last-child) {
      border-right: 1px dashed rgb(191, 191, 191);
    }
    .i-items {
      width: 25%;
      display: flex;
      align-items: center;
      height: fit-content;
      margin-bottom: 30px;
      padding-left: 5%;

      .textarea-box {
        padding: 18px 18px 51px;
        background: #ffffff;
        border-radius: 4px;
        font-size: 16px;
        line-height: 24px;
        color: #505050;
        margin-top: 14px;
      }
      .text-box {
        margin-left: 16px;
        .name {
          font-size: 14px;
          line-height: 100%;
          color: #999999;
        }
        .value {
          font-size: 14px;
          line-height: 100%;
          color: #333;
          font-family: Source Han Sans CN;
          margin-top: 8px;
          &.active {
            color: #1ab226;
          }
          &.inactive {
            color: #aa1941;
          }
        }
      }
    }
  }
}
</style>
