<script setup lang="ts">
const props: any = defineProps({
  data: {
    type: Object
  }
})

interface IBasicInfo {
  icon: string
  label: string
  value: string
  key: string
  border: string
}

const basicInfo = computed((): IBasicInfo[] => {
  const basicList = [
    {
      icon: '/center_resource/course-view-icon1.png',
      label: '课程类型',
      value: '',
      key: 'online_type_name',
      border: '1'
    },
    {
      icon: '/center_resource/course-view-icon5.png',
      label: '选课类型',
      value: '',
      key: 'elective_type_name',
      border: '1'
    },
    {
      icon: '/center_resource/course-view-icon3.png',
      label: '课程学分',
      value: '',
      key: 'credit',
      border: '1'
    },
    {
      icon: '/center_resource/course-view-icon13.png',
      label: '负责人',
      value: '',
      key: 'belong_operator_name',
      border: '1'
    },
    {
      icon: '/center_resource/course-view-icon8.png',
      label: '创建时间',
      value: '',
      key: 'created_time',
      border: '0'
    },
    {
      icon: '/center_resource/course-view-icon2.png',
      label: '课程分类',
      value: '',
      key: 'classification_name',
      border: '1'
    },

    {
      icon: '/center_resource/course-view-icon14.png',
      label: '适用专业',
      value: '',
      key: 'specialty',
      border: '1'
    },
    {
      icon: '/center_resource/course-view-icon7.png',
      label: '是否有效',
      value: '',
      key: 'status_name',
      border: '1'
    },
    {
      icon: '/center_resource/course-view-icon6.png',
      label: '更新人',
      value: '',
      key: 'updated_operator_name',
      border: '1'
    },
    {
      icon: '/center_resource/course-view-icon9.png',
      label: '更新时间',
      value: '',
      key: 'updated_time',
      border: '0'
    }
  ]

  basicList.map((item: any) => {
    if (item.key === 'specialty') {
      item.value = props?.data.specialty?.map((item: any) => item.name).toString()
      return item
    }
    item.value = props?.data[item.key] || '-'
    return item
  })
  return basicList
})
const statusStyle = (item: any) => {
  if (item.label === '是否有效') {
    if (item.value === '有效') {
      return 'color:#1ab226'
    } else {
      return 'color:#aa1941'
    }
  } else {
    return ''
  }
}
</script>
<template>
  <div class="top-info">
    <div class="cover">
      <img :src="props.data.cover || '/center_resource/course_default.png'" />
      <el-popover trigger="hover" placement="right">
        <div v-html="props.data.name"></div>
        <template #reference>
          <div class="cover-name">
            {{ props.data.name }}
            <!-- {{ props.data.belong_operator_name }} -->
          </div>
        </template>
      </el-popover>
      <div class="cover-operator">{{ props.data.belong_operator_name }}</div>
    </div>
    <div class="info">
      <div class="info-list">
        <div
          class="item"
          v-for="item in basicInfo"
          :key="item.key"
          :style="item.border === '1' ? 'border-right:1px dashed #BFBFBF' : 'border-right:none'">
          <img :src="item.icon" />
          <div class="item-right">
            <div class="label">{{ item.label }}</div>
            <div class="value" :style="statusStyle(item)">
              <el-popover trigger="hover" placement="bottom">
                <div v-html="item.value"></div>
                <template #reference>
                  <div class="cover-name">
                    {{ item.value }}
                  </div>
                </template>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
      <div class="lecturer-list">
        <div class="list-name">讲师</div>
        <div v-for="item in props.data.lecturers" :key="item.id">
          <el-popover :title="item.name" trigger="hover" placement="right">
            <div v-html="item.summarize"></div>
            <template #reference>
              <div class="item">
                <img :src="item.avatar" class="avatar" />
                <div class="name">{{ item.name }}</div>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="lecturer-list" style="margin-top: 20px">
        <div class="list-name">助教</div>
        <template v-if="props.data.teachers && props.data.teachers.length > 0">
          <div v-for="item in props.data.teachers" :key="item.id">
            <div class="item1">
              <img class="avatar" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" />
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </template>
        <div class="item1" v-else>暂无</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.top-info {
  display: flex;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 25px 20px;
  .cover {
    min-width: 240px;
    height: 180px;
    background-size: cover;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
    .cover-name {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
      line-height: 37px;
      font-size: 20px;
      color: #ffffff;
      padding-left: 16px;
      box-sizing: border-box;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      cursor: pointer;
    }
    .cover-operator {
      position: absolute;
      top: 60%;
      left: 50%;
      width: 100%;
      transform: translateX(-50%);
      line-height: 37px;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
    }
  }
  .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: calc(100vw - 400px);
    .info-list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .item:nth-child(5) {
        width: 20%;
      }
      .item:nth-child(10) {
        width: 20%;
      }
      .item:nth-child(1) {
        width: 20%;
      }
      .item:nth-child(6) {
        width: 20%;
      }
      .item {
        width: 15%;
        display: flex;
        align-items: center;
        height: fit-content;
        flex-wrap: nowrap;
        margin-left: 2%;
        margin-bottom: 32px;
        .item-right {
          margin-left: 15px;
          .label {
            font-size: 14px;
            line-height: 100%;
            color: #999999;
            margin-bottom: 8px;
          }
          .value {
            font-size: 14px;
            line-height: 1.5;
            color: #333333;
            font-family: Source Han Sans CN;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
      }
    }
    .lecturer-list {
      width: 230px;
      display: flex;
      align-items: center;
      margin-left: 25px;
      .list-name {
        width: 18px;
        height: 40px;
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        opacity: 1;
      }
      .item {
        margin-left: 25px;
        min-width: 115px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin: 0 auto;
        }
        .name {
          text-align: center;
          font-size: 16px;
          font-weight: 500;
          line-height: 100%;
          color: #333333;
          white-space: nowrap;
        }
      }
      .item1 {
        margin-left: 13px;
        min-width: 115px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin: 0 auto;
        }
        .name {
          text-align: center;
          font-size: 16px;
          font-weight: 500;
          line-height: 100%;
          color: #333333;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
