

<!--
 * @Author: jixiang
 * @Date: 2022-01-20 14:57:59
 * @Description: 
 * @FilePath: /suqian_pc_new/src/views/packageManage/recommend.vue
 * One World One Drefeel(56580223@qq.com)
-->
<template>
  <div class="box">
    <div class="head">
      <div class="name">年级：</div>

      <div v-for="item in navList" :key="item.id">
        <span
          class="booke_type"
          :class="{ booke_type_color: item.id === selctType }"
          @click="selectType(item.id)"
        >
          {{ item.label }}
        </span>
        <a-divider type="vertical" /> </div
    ></div>

    <div class="contentBox">
      <div class="no-data" v-if="!total">
        <img src="@/assets/images/kongdata.svg" alt="" />
        <div>暂时还没有内容哦</div>
      </div>
      <div v-else>
        <div v-if="showBookList" class="content">
          <div class="item" v-for="item in pkglist" :key="item.id" @click="clickDesc(item)">
            <div class="item_bj">
              <div class="item_img">
                <img :src="item.cover" alt="" class="item_cover" />
              </div>
              <div class="item_ctx">
                <div class="item_ctx_title">{{ item.name }}</div>
                <div class="item_ctx_author">{{ item.author }}</div>
                <div class="item_ctx_text">{{ item.brief }}</div>
                <div class="item_ctx_read" @click.stop="readBook(item.uploadFile, item.linkAddress)"
                  >{{ isRead(item.uploadFile, item.linkAddress) }}
                  <span class="msly"> > </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <bookdesc v-show="!showBookList" ref="bookDescRef" @escClick="escClick"></bookdesc>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import bookdesc from '@/views/packageManage/detail.vue';
import data from './recommend.json';
console.log(data, 'ssss');
const selctType = ref<number>(1);
const navList = ref([
  { label: '一年级', id: 1 },
  { label: '二年级', id: 2 },
  { label: '三年级', id: 3 },
  { label: '四年级', id: 4 },
  { label: '五年级', id: 5 },
  { label: '六年级', id: 6 },
  { label: '初一', id: 7 },
  { label: '初二', id: 8 },
  { label: '初三', id: 9 },
  { label: '高一', id: 10 },
  { label: '高二', id: 11 },
  { label: '高三', id: 12 },
]);
const total = ref(0);
const pkglist = ref([]);
const bookDescRef = ref();
const showBookList = ref<boolean>(true);
const selectType = (id) => {
  selctType.value = id;
  let arry = data.filter((item) => item.id == id);
  console.log(arry, 'aaa');
  pkglist.value = arry[0].data;
  total.value = pkglist.value.length;
  showBookList.value = true;
};

const showDesc = (id) => {};
const escClick = () => {
  showBookList.value = true;
};
const readBook = (file, url) => {
  window.open(file || url);
};
const isRead = (file, url) => {
  if (file) {
    var index = file.lastIndexOf('.');
    //获取后缀
    var ext = file.substr(index + 1);
    console.log(ext);
    if (ext == 'pdf' || ext == 'PDF') {
      return '立即阅读';
    } else {
      return '立即下载';
    }
  } else if (url) {
    return '立即阅读';
  } else {
    return '立即下载';
  }
};
selectType(1);
const clickDesc = (val) => {
  console.log(val);
  bookDescRef.value.typename = '推荐书目';
  bookDescRef.value.bookId = val.id;
  showBookList.value = false;
  bookDescRef.value.bookDsec();
};
</script>

<style lang="less" scoped>
.box {
  padding-top: 98px;
  width: 100%;
  background: white;
  background: url('@/assets/images/bookbg.svg');
  background-size: 100% 608px;
  background-repeat: no-repeat;
  .head {
    width: 1160px;
    margin: 20px auto;
    display: flex;
    height: 62px;
    background: #ffffff;
    border-radius: 8px;
    line-height: 62px;
    .name {
      font-size: 14px;

      font-weight: 400;
      color: #999999;
      margin: 0 20px;
    }
    .booke_type {
      display: inline-block;
      //   width: 50px;
      cursor: pointer;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      padding: 0 11px;
    }
    .booke_type_color {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1677ff;
    }
  }
  .contentBox {
    width: 1160px;
    margin: 0 auto;
    // text-align: center;
    .no-data {
      text-align: center;
      padding: 60px 0;
      img {
        margin: 0 auto;
      }
      div {
        color: #cccccc;
        margin-top: 10px;
      }
    }
    .content {
      width: 1160px;
      margin: 0 auto;
      //   padding-top: 61px;
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      .item {
        width: 378px;
        height: 200px;
        background: none;
        margin-right: 6px;
        margin-bottom: 20px;
        cursor: pointer;
        .item_bj {
          background: #ffffff;
          border: 1px solid #eeeeee;
          width: 378px;
          height: 200px;
          display: flex;
          justify-content: flex-start;
          .item_img {
            margin-top: 20px;
            margin-left: 10px;
            width: 114px;
            height: 160px;
            .item_cover {
              width: 100%;
              height: 100%;
            }
          }
          .item_ctx {
            margin-top: 19px;
            margin-left: 10px;
            width: 212px;
            height: 200px;
            .item_ctx_title {
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              min-height: 50px;
              color: #333333;
              white-space: normal;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .item_ctx_author {
              margin-top: 4px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              white-space: normal;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .item_ctx_text {
              margin-top: 8px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              white-space: normal;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              line-clamp: 3;
              -webkit-box-orient: vertical;
            }
            .item_ctx_read {
              margin-top: 10px;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
            }
            .msly {
              display: inline-block;
              margin-left: 5px;
              color: #666666;
            }
          }
        }
        .item_bj:hover {
          background: #edf4fe;
          .item_ctx_read {
            color: #1677ff;
          }
          .msly {
            color: #1677ff;
            display: inline-block;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>