<script setup lang="ts">
import { PictureFilled } from '@element-plus/icons-vue'
const props = defineProps(['data'])
</script>

<template>
  <div class="video-info">
    <div class="video-img">
      <div
        v-if="props.data.cover != ''"
        class="img"
        :style="`width: 210px;height: 140px;background-size: cover;background-image: url(${props.data.cover});`"></div>
      <el-icon v-else :size="200" color="#ccc">
        <PictureFilled></PictureFilled>
      </el-icon>
      <!-- <img :src="props.data.cover"> -->
      <!-- <div class="name">视频封面</div> -->
    </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-icon7.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;
    text-align: center;
    img {
      width: 211px;
      display: block;
    }
    .name {
      font-size: 16px;
      line-height: 100%;
      color: #666666;
      margin-top: 12px;
      text-align: center;
    }
  }
  .info-items {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 0;
    .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;
        min-width: 500px;
      }
      .text-box {
        margin-left: 16px;
        .name {
          font-size: 14px;
          line-height: 100%;
          color: #999;
        }
        .value {
          font-size: 14px;
          line-height: 100%;
          color: #333;
          font-family: Source Han Sans CN;
          margin-top: 8px;
          word-break: break-all;
          &.active {
            color: #1ab226;
          }
          &.inactive {
            color: #aa1941;
          }
        }
      }
    }
  }
}
</style>
