<script setup lang="ts">
import { Files } from '@element-plus/icons-vue'
const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp4', 'png', 'jpeg', 'jpg', 'rar', 'zip']

const props: any = defineProps<{ data: object; tabIndex: string; path: string }>()
const emit = defineEmits<Emits>()
interface Emits {
  (e: 'add', id: object): void
}
const handleAdd = () => {
  console.log(props.data, 'datas')
  emit('add', props.data)
}
const bytesToSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1000, // or 1024
    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    i = Math.floor(Math.log(bytes) / Math.log(k))

  return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
}
</script>
<template>
  <div class="card-item">
    <div class="card-item-top">
      <div class="title">{{ props.data.name }}</div>
      <div class="item-info">
        <div class="info">文件大小：{{ bytesToSize(parseInt(props.data.size)) }}</div>
        <div class="info">关联次数：{{ props.data.relation_count }}次</div>
        <div class="info">学习人次：{{ props.data.learn_count }}人次</div>
      </div>
      <img :src="`/center_resource/${props.data.type}.png`" v-if="fileType.includes(props.data.type)" />
      <el-icon class="item-info-icon" v-else>
        <Files />
      </el-icon>
      <!-- <div class="cover-img" :style="`background-image:url(${props.data.cover})`"></div> -->
      <div class="tool-pop-btn">
        <div style="min-width: 100%">
          <div class="edit-btn btn" @click="handleAdd">添加</div>
        </div>
        <div style="min-width: 100%">
          <router-link v-if="props.data.auth_view" :to="`${props.path}?id=${props.data.id}`">
            <div class="view-btn btn">查看</div>
          </router-link>
        </div>
      </div>
    </div>
    <div class="card-item-bottom">
      <slot></slot>
      <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 {
  border-radius: 6px;
  overflow: hidden;
  .card-item-top {
    background: rgba(204, 204, 204, 0.5);

    height: 170px;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: -20px;
    &:hover {
      .tool-pop-btn {
        opacity: 1;
      }
    }
    .cover-img {
      width: 100%;
      height: 100%;
      background-size: cover;
    }
    .item-info {
      padding-left: 20px;
      .info {
        width: 150px;
        font-size: 14px;
        line-height: 100%;
        color: #666666;
        margin-bottom: 10px;
      }
    }
    .item-info-icon {
      font-size: 50px;
      color: #aa1941;
    }
    img {
      width: 40px;
    }

    .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: 52px;
      box-sizing: border-box;
      .edit-btn {
        width: 113px;
        line-height: 32px;
        border-radius: 18px;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        margin: 0 auto 12px;
        cursor: pointer;
        background: #aa1941;
      }
      .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;
      }
      .btn:hover {
        background: none;
        border: 1px solid #d3d3d3;
      }
    }
  }
}
.card-item-bottom {
  background: #fff;
  padding: 10px 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%;
      color: #999999;
    }
  }
}
</style>
