<script setup lang="ts">
import { courseCopy } from '../api'
import { ElMessage } from 'element-plus'

const props: any = defineProps<{ data: object; tabIndex: string }>()

const router = useRouter()

// 复制
const copyCourse = () => {
  courseCopy({ id: props.data.id }).then((res: any) => {
    if (res.code === 0) {
      ElMessage({ message: '复制成功', type: 'success' })
      router.push({ path: '/course/update-course', query: { id: res.data.id } })
    }
  })
}
</script>
<template>
  <div class="card-item">
    <div class="card-item-top">
      <div class="title">{{ props.data.name }}</div>
      <div class="cover-img" :style="`background-image:url(${props.data.cover})`"></div>
      <div class="tool-pop-btn">
        <div style="min-width: 100%">
          <router-link v-if="props.data.auth_edit" :to="`/course/update-course?id=${props.data.id}`">
            <div class="edit-btn btn">编辑</div>
          </router-link>
        </div>
        <div style="min-width: 100%">
          <router-link v-if="props.data.auth_view" :to="`/course/my/view?id=${props.data.id}`">
            <div class="view-btn btn">查看</div>
          </router-link>
          <div style="min-width: 100%" v-if="props.data.auth_copy">
            <div class="copy-btn btn" plain @click="copyCourse">复制</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-item-bottom">
      <div class="item-t">
        <el-popover trigger="hover" placement="right">
          <div v-html="props.data.created_operator_name + '/' + props.data.organ_id_name"></div>
          <template #reference>
            <div class="text">{{ props.data.created_operator_name }}/{{ props.data.organ_id_name }}</div>
          </template>
        </el-popover>
        <div :class="props.data.status == 1 ? 'tag green' : 'tag'">{{ props.data.status_name }}</div>
      </div>
      <div class="item-b">
        <div class="time">{{ props.data.updated_time }}</div>
        <div class="tag" v-if="tabIndex === '2'">{{ props.data.department_public === '0' ? '未共享' : '已共享' }}</div>
        <div class="tag" v-if="tabIndex === '3'">{{ props.data.platform_public === '0' ? '未共享' : '已共享' }}</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.card-item {
  width: 17%;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 20px;
  margin-bottom: 20px;
  .card-item-top {
    height: 170px;
    position: relative;
    &:hover {
      .tool-pop-btn {
        opacity: 1;
      }
    }
    .cover-img {
      width: 100%;
      height: 100%;
      background-size: cover;
    }
    .title {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      line-height: 37px;
      background: rgba(0, 0, 0, 0.4);
      font-size: 18px;
      color: #ffffff;
      padding-left: 16px;
      box-sizing: border-box;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .tool-pop-btn {
      transition: all 0.5s;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      opacity: 0;
      // padding-top: 22px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .edit-btn {
        width: 113px;
        line-height: 32px;
        border-radius: 18px;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        margin: 0 auto 5px;
        background: #aa1941;
        cursor: pointer;
      }
      .view-btn {
        width: 113px;
        line-height: 32px;
        background: #aa1941;
        border-radius: 18px;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        margin: 0 auto;
        cursor: pointer;
      }
      .copy-btn {
        width: 113px;
        line-height: 32px;
        border-radius: 18px;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        margin: 5px auto;
        background: #aa1941;
        cursor: pointer;
      }
      .btn:hover {
        background: none;
        border: 1px solid #d3d3d3;
      }
    }
  }
}
.card-item-bottom {
  background: #fff;
  padding: 20px 16px 30px;
  .item-t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .text {
      width: 150px;
      font-size: 16px;
      line-height: 100%;
      color: #666666;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .tag {
      width: 48px;
      line-height: 22px;
      background: #aa1941;
      border-radius: 11px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      &.green {
        background: #1ab226;
      }
    }
  }
  .item-b {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .time {
      font-size: 14px;
      line-height: 100%;
      color: #999999;
    }
    .tag {
      font-size: 16px;
      line-height: 100%;
      word-break: keep-all;
      color: #999999;
    }
  }
}
</style>
