<!-- 套餐列表 -->
<template>
  <div>
    <div class="pkg-main" v-if="search_icon">
      <div class="head" v-if="refTYpe == 1">
        <div class="name">分类：</div>
        <div class="navBox">
          <div v-for="item in subTypeList" :key="item.id">
            <span
              class="booke_type"
              :class="{ booke_type_color: item.id === selctType }"
              @click="selectType(item.id)"
            >
              {{ item.name }}
            </span>
            <a-divider type="vertical" />
          </div>
        </div>
      </div>
      <div class="no-data" v-if="!total">
        <img src="@/assets/images/kongdata.svg" />
        <div>暂时还没有内容哦</div>
      </div>
      <div class="content" v-else>
        <div class="item" v-for="item in pkglist" :key="item.id" @click="clickDesc(item.id)">
          <div class="item_bj">
            <div class="item_img">
              <img :src="item.cover" 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 class="pagination" v-if="total">
        <a-pagination
          :show-total="(total) => `总共 ${total} 条`"
          show-size-changer
          :pageSizeOptions="['9', '18', '27', '36']"
          v-model:current="current"
          v-model:pageSize="pageSize"
          :total="total"
          show-quick-jumper
          @showSizeChange="sizeChange"
          @change="cuerrchange"
        />
      </div>
    </div>
    <div class="main-icon" v-else>
      <div class="no-data">
        <img src="@/assets/images/seachericonnull.svg" />
        <div>很抱歉没有找到相关的内容，请换个关键词试试！</div>
      </div>
    </div>
    <div>
      <div
        class="suspension"
        @click="explainVisible = true"
        @mouseover="mouseOver"
        @mouseleave="mouseLeave"
      >
        <div class="book_svg_div">
          <img v-if="!moveStyle" src="@/assets/images/bookDiv.svg" />
          <img v-else src="@/assets/images/bookHover.svg" />
        </div>

        <div :style="moveStyle ? 'color: #1677FF;' : 'color: rgba(102, 102, 102, 0.85);'"
          >阅读说明</div
        >
      </div>
      <div class="model_div" ref="explainModel">
        <a-modal v-model:visible="explainVisible" title="阅读说明">
          <div class="model_conter"
            >若是文件格式为docx、doc、ppt、pptx、xls、ppsx可以使用office软件打开；若是文件格式为avi、rmvb、flv、swf、wmv、f4v、rm、IFO、mp4、VOB、MTS属于视频文件，可以使用视频播放器打开,其中MTS需要使用索尼软件播放视频；rar、zip为压缩文件，可以用winrar或7-Zip等解压缩软件解压查看；mp3、wma音频文件需要音频软件播放；mobi、chm、pdg、epub、azw3、pdz属于电子书格式，可以使用对应电子书阅读器阅读，例如EPUB电子书阅读器或超星阅读器；psd、MPG、jpeg可以直接用图片工具查看；若是djvu文件需使用djvu阅读器阅读，cfg文件需使用记事本打开，pps文件需要安装pps网络电视查看；若是exe文件，请直接下载安装。</div
          >
          <template #footer>
            <div class="model_btn">
              <a-button type="primary" @click="explainVisible = false">确认</a-button>
            </div>
          </template>
        </a-modal>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useRouter, useRoute } from 'vue-router';
  import { message } from 'ant-design-vue';
  import { ref, onMounted, defineExpose, watch, reactive } from 'vue';
  import book from '../../api/book';

  const router = useRouter();
  const explainModel = ref();
  const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
  const pkglist = ref<any>({});
  const bookType = ref([
    { label: '全部', id: 0 },
    { label: '电子图书', id: 1 },
    { label: '文献资料', id: 2 },
    { label: '学术论文', id: 3 },
  ]);

  const selctType = ref<number>(0);

  const current = ref<number>(1);
  const pageSize = ref<number>(9);
  let total = ref<any>(0);

  // 搜索
  const search_icon = ref<boolean>(true);
  const search_iconFlag = ref<boolean>(false);

  function goToPage(path, id) {
    router.push({
      path: path,
      query: {
        id: id,
      },
    });
  }

  const refbookName = ref<string>('');
  const refTYpe = ref<number>(0);
  // 图书列表
  const getbookList = () => {
    let params = {
      bookName: refbookName.value || '',
      pageNum: current.value,
      pageSize: pageSize.value,
      // type: refTYpe.value || '',
      // subType: selctType.value ? selctType.value : '',
      currentCateId: selctType.value && selctType.value != 999999 ? selctType.value : '',
    };
    book
      .bookRetrieval(params)
      .then((res) => {
        const { data, code, message } = res.data;
        if (code === 200) {
          pkglist.value = data.records;
          total.value = data.total;
          if (search_iconFlag.value) {
            search_icon.value = false;
          } else {
            search_icon.value = true;
          }
        }
      })
      .catch((err) => {
        message.info(err.data.message);
      });
  };
  const subTypeList = ref([
    {
      name: '全部',
      id: 0,
    },
  ]);
  const getSubType = () => {
    if (refTYpe.value) {
      book.listCategory({ pid: refTYpe.value }).then((res) => {
        const { code, data } = res.data;
        subTypeList.value = [{ name: '全部', id: 0 }];
        if (code === 200) {
          subTypeList.value.push(...data);
        }
        console.log(subTypeList.value);
        getbookList();
      });
    }
  };
  onMounted(() => {
    getSubType();
  });
  const selectType = (id) => {
    selctType.value = id;
    getbookList();
    // 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 cuerrchange = (num) => {
    current.value = num;
    getbookList();
  };
  const sizeChange = (page, size) => {
    pageSize.value = size;
    getbookList();
  };
  const emit = defineEmits(['showDesc']);
  const clickDesc = (id) => {
    window.scrollTo(0, 0);
    emit('showDesc', id);
  };
  const readBook = (file, url) => {
    window.open(file || url);
    //console.log(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 '立即下载';
    }
  };
  //改变悬浮求样式
  const moveStyle = ref<boolean>(false);
  const mouseOver = () => {
    moveStyle.value = true;
  };
  const mouseLeave = () => {
    moveStyle.value = false;
  };

  const explainVisible = ref<boolean>(false);

  defineExpose({
    getSubType,
    refbookName,
    refTYpe,
    current,
    pageSize,
    search_iconFlag,
    selctType,
  });
</script>
<style lang="less" scoped>
  .model_btn {
    :deep(.ant-btn-primary) {
      background: #1677ff;
      border-color: #1677ff;
    }
  }
  .suspension {
    position: fixed;
    cursor: pointer;
    top: 50%;
    right: 35px;
    padding: 1px 8px;
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    .book_svg_div {
      width: 48px;
      height: 48px;
      overflow: hidden;
    }
  }
  .main-icon {
    width: 100%;
    background: white;
    padding-top: 60px;
    .no-data {
      text-align: center;
      padding-top: 200px;
      img {
        margin: 0 auto;
      }
      div {
        color: #cccccc;
        margin-top: 10px;
      }
    }
  }
  .pkg-main {
    width: 100%;
    background: white;
    background: url('@/assets/images/bookbg.svg');
    background-size: 100% 608px;
    background-repeat: no-repeat;
    padding-top: 140px;
    .no-data {
      text-align: center;
      padding-top: 80px;
      padding-bottom: 40px;
      img {
        padding: 0px auto;
      }
      div {
        color: #cccccc;
        margin-top: 10px;
      }
    }
    .content {
      width: 1160px;
      margin: 0 auto;

      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;
          align-items: center;
          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;
          }
        }
      }
    }
  }
  .pagination {
    text-align: center;
    padding-bottom: 40px;
    margin-top: 40px;
  }

  @media screen and (max-width: 600px) {
    .pagination {
      text-align: center;
      padding-bottom: 40px;
      margin-top: 8px;
    }
    /deep/ .ant-pagination-total-text {
      display: none;
    }
    .main-icon {
      width: 100% !important;
      background: white;
      padding-top: 60px;
      overflow: hidden;

      .no-data {
        text-align: center;
        padding-top: 400px;
        img {
          margin: 0 auto;
        }
        div {
          color: #cccccc;
          margin-top: 10px;
        }
      }
    }
    .pkg-main {
      width: 100% !important;
      background: white;
      padding-top: 9.25rem;
      margin: 0 !important;
      .no-data {
        text-align: center;
        padding-top: 80px;
        padding-bottom: 80px;
        img {
          padding: 0px auto;
        }
        div {
          color: #cccccc;
          margin-top: 10px;
        }
      }
      .content {
        width: 100% !important;
        margin: 0 auto;
        padding-top: 0px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        .item {
          width: 100%;
          flex: 1;
          height: 200px;
          background: none;
          padding: 0 20px;
          margin-bottom: 20px;
          cursor: pointer;
          .item_bj {
            background: #ffffff;
            border: 1px solid #eeeeee;
            width: 100%;
            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: auto;
              flex: 1;
              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;
            }
          }
        }
      }
    }
  }
  .head {
    width: 1160px;
    margin: 20px auto;
    display: flex;
    background: #ffffff;
    border-radius: 8px;

    min-height: 62px;
    .navBox {
      display: flex;
      line-height: 62px;
      flex-wrap: wrap;
      flex: 1;
    }
    .name {
      font-size: 14px;
      font-weight: 400;
      line-height: 62px;
      color: #999999;
      width: 100px;
      text-align: center;
    }
    .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;
    }
  }
</style>
