<!-- 套餐详情 -->
<template>
  <div class="main">
    <fullLoading :show="detailLoading" v-if="detailLoading" />
    <div class="pkg-detail-main" v-else>
      <authority v-if="!authorityFlag" />
      <div class="content" v-else>
        <div class="header">
          <span class="header-title" @click="escClick">{{ typename || '全部' }}</span
          ><span class="line">/</span><span class="book-name">{{ bookDesc.name }}</span>
        </div>
        <div class="book_desc">
          <div class="book_desc_left">
            <img :src="bookDesc.cover" alt="" />
          </div>
          <div class="book_desc_right">
            <div class="desc_right_header">
              <div>{{ bookDesc.name }}</div>
              <div
              ><span v-if="bookDesc.isbn">ISBN: {{ bookDesc.isbn }}</span>
              </div>
            </div>
            <div v-if="bookDesc.author" class="desc_right_author"> {{ bookDesc.author }} 著 </div>
            <div class="desc_right_ctx" v-if="bookDesc.brief">
              <!--                       <span v-if="hide">{{bookctx.length>50 ? bookctx.slice(0,50)+'...' : bookctx }}</span>-->
              <!--                       <span v-if="!hide">{{bookctx}}</span>-->
              <!--                       <span v-if="bookctx.length>50" @click="hideCtxClick">{{hideCtx}}</span>-->

              <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
                <div class="intro-content" id="setItemRef" :ref="setItemRef">
                  <!-- <span class="merchant-desc">{{ bookDesc.brief }}</span>
                  <div class="unfold" @click="hideCtxClick" v-if="showExchangeButton">
                    <p v-if="exchangeButton"
                      ><span>展开</span><img src="@/assets/images/down.png" alt=""
                    /></p>
                    <p v-else><span>收起</span><img src="@/assets/images/up.png" alt="" /></p>
                  </div> -->
                </div>
              </div>
            </div>
            <div class="desc_right_read">
              <div class="read_txt" @click="readPdf(bookDesc.uploadFile, bookDesc.linkAddress)">{{
                isRead(bookDesc.uploadFile, bookDesc.linkAddress)
              }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, watch, nextTick, defineExpose, defineEmits } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { message } from 'ant-design-vue';
  import pathNav from '../../components/common/pathNav.vue';
  import wares from '../../api/commodity';
  import authority from '@/views/common/authority.vue';
  import fullLoading from '@/components/global/FullLoading.vue';
  import book from '../../api/book';
  const emit = defineEmits(['escClick']);
  const router = useRouter();

  const route = useRoute();

  const navObj = reactive({
    navlist: [
      {
        name: '套餐采购',
        path: '/packageManage',
        active: false,
      },
      {
        name: '套餐详情',
        active: true,
      },
    ],
  });
  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 fixTop = ref(20);
  const pkgDetail = ref<any>({});
  const detailLoading = ref<boolean>(false);
  const authorityFlag = ref<Boolean>(true);

  const getDatail = () => {
    detailLoading.value = false;
    var startRequestTime = new Date().getTime();
  };

  getDatail();

  const spinning = ref<boolean>(false);

  const bookObj = reactive({
    bookList: [],
  });

  const goToPage = (path) => {
    router.push({
      path: path,
      query: {
        id: route.query.id,
      },
    });
  };

  const typename = ref<string>('');
  const hide = ref<boolean>(true);
  const showTotal = ref<boolean>(true); // 简介全部显示
  const exchangeButton = ref<boolean>(true); // 展开/收起文字改变
  const showExchangeButton = ref<boolean>(true); // 是否显示 展开/收起 文字
  const hideCtx = ref<string>('展开');
  const desc = ref<string>('');
  const hideCtxClick = () => {
    showTotal.value = !showTotal.value;
    exchangeButton.value = !exchangeButton.value;
  };
  const setItemRef = (val) => {
    desc.value = val;
  };
  const button = ref(null);
  const setItemRefctxt = ref();
  const escClick = (val) => {
    console.log('1111');
    emit('escClick', false);
  };
  const fun = () => {
    nextTick(() => {
      // if (!desc.value) {
      //     return;
      // }
      //     let newDiv = document.getElementById('setItemRef');
      //     //const descHeight = window.getComputedStyle(newDiv).height.replace('px', '');
      //    console.log(bookDesc.value.brief.length,'1')
      console.log(bookDesc.value.brief.length, '321');
      console.log(document.body.clientWidth, '123');
      if (document.body.clientWidth > 600) {
        if (bookDesc.value.brief.length > 200) {
          showExchangeButton.value = true;
          exchangeButton.value = true;
          showTotal.value = false;
        } else {
          showExchangeButton.value = false;
          showTotal.value = true;
        }
      } else {
        if (bookDesc.value.brief.length > 100) {
          showExchangeButton.value = true;
          exchangeButton.value = true;
          showTotal.value = false;
        } else {
          showExchangeButton.value = false;
          showTotal.value = true;
        }
      }
    });
  };
  // 详情
  const bookId = ref<number>(0);
  let bookDesc = ref<any>({});
  const bookDsec = () => {
    let params = {
      bookId: bookId.value,
    };
    book.viewBookDetails(params).then((res) => {
      const { data, code, message } = res.data;
      if (code === 200) {
        bookDesc.value = data;
        showExchangeButton.value = true;
        exchangeButton.value = true;
        showTotal.value = false;
        fun();
      }
    });
  };
  defineExpose({
    bookId,
    bookDsec,
    typename,
  });

  const readPdf = (file, url) => {
    window.open(file || url);
  };
</script>

<style lang="less" scoped>
  .main {
    background: white;
    // margin-top: 100px;
  }
  .pkg-detail-main {
    width: 1160px;
    margin: 0 auto;
    background: white;
  }
  .content {
    // width: 1160px;
    width: 867px;
    // margin: 0 auto;
    /*display: flex;*/
    /*justify-content: space-between;*/
    .header {
      padding: 24px 0;
      .header-title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
      }
      .line {
        font-size: 14px;
        color: #999999;
        padding: 0 8px;
      }
      .book-name {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 22px;
      }
    }
    .book_desc {
      display: flex;
      justify-content: space-between;
      /*flex: 1;*/
      .book_desc_left {
        width: 180px;
        height: 253px;

        margin-right: 32px;
        img {
          width: 180px;
          height: 253px;
        }
      }
      .book_desc_right {
        margin-left: 20px;
        width: 655px;
        word-break: break-all;
        .desc_right_header {
          display: flex;
          justify-content: space-between;
          padding-bottom: 12px;
          align-items: center;
          div:first-child {
            width: 469px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 16px;
          }
          div:last-child {
            width: 154px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
          }
        }
        .desc_right_author {
          padding-bottom: 12px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 20px;
        }
        .desc_right_ctx {
          width: 655px;
          min-height: 113px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 20px;
          .total-introduce {
            height: auto;
            overflow: hidden;
            font-size: 14px;
            .intro-content {
              .merchant-desc {
                width: 100%;
                line-height: 20px;
              }
            }
            .unfold {
              display: block;
              width: 50px;
              height: 20px;
              text-align: left;
              p {
                margin: 0;
                line-height: 20px;
                color: #1677ff;
                cursor: pointer;
                img {
                  display: inline-block;
                  width: 12px;
                  height: 12px;
                  margin: -4px 0 0 4px;
                }
              }
            }
          }
          .detailed-introduce {
            font-size: 14px;
            color: #666;
            .intro-content {
              //最大高度设为3倍的行间距
              max-height: 80px;
              line-height: 20px;
              background-color: #fff;
              .merchant-desc {
                width: 100%;
                line-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
              }
              .unfold {
                width: 50px;
                height: 20px;
                text-align: left;
                p {
                  margin: 0;
                  color: #1677ff;
                  cursor: pointer;
                  img {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    margin: -4px 0 0 4px;
                  }
                }
              }
            }
          }
        }
        .desc_right_read {
          /*display: flex;*/
          /*justify-content: flex-start;*/
          margin-top: 36px;
          .read_txt {
            cursor: pointer;
            width: 96px;
            height: 40px;
            background: #1677ff;
            border-radius: 4px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 40px;
            text-align: center;
          }
        }
      }
    }
  }
  @media screen and (min-width: 600px) and (max-width: 1024px) {
    .pkg-detail-main {
      width: 100%;
    }
    .content {
      /*width: 867px;*/
      width: 100%;
      padding: 0 20px;
      .book_desc {
        .book_desc_right {
          flex: 1;
          .desc_right_header {
            div:first-child {
              flex: 1;
            }
          }
          .desc_right_ctx {
            flex: 1;
            width: 100%;
          }
        }
      }
    }
  }
  @media screen and (max-width: 600px) {
    .main {
      margin-top: 130px;
    }
    .pkg-detail-main {
      width: 100%;
    }
    .content {
      /*width: 867px;*/
      width: 100%;
      padding: 0 20px;
      .header {
        padding: 15px 0;
        .header-title {
          font-size: 12px;
        }
        .line {
          font-size: 12px;
        }
        .book-name {
          font-size: 12px;
        }
      }
      .book_desc {
        display: flex;
        justify-content: space-between;
        .book_desc_left {
          width: 150px;
          height: 240px;
          margin-right: 5px;
          img {
            width: 150px;
            height: 240px;
          }
        }
        .book_desc_right {
          margin-left: 10px;
          width: 655px;
          word-break: break-all;
          .desc_right_header {
            display: block;
            padding-bottom: 5px;
            div:first-child {
              width: 100%;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              line-height: 14px;
              padding-bottom: 5px;
            }
            div:last-child {
              width: 100%;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              line-height: 16px;
            }
          }
          .desc_right_author {
            padding-bottom: 8px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 14px;
          }
          .desc_right_ctx {
            width: 100%;
            min-height: 113px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 12px;
            .total-introduce {
              height: auto;
              overflow: hidden;
              font-size: 14px;
              .intro-content {
                .merchant-desc {
                  width: 100%;
                  line-height: 20px;
                }
              }
              .unfold {
                display: block;
                width: 50px;
                height: 20px;
                text-align: left;
                p {
                  margin: 0;
                  line-height: 20px;
                  color: #1677ff;
                  cursor: pointer;
                  img {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    margin: -4px 0 0 4px;
                  }
                }
              }
            }
            .detailed-introduce {
              font-size: 12px;
              color: #666;
              .intro-content {
                //最大高度设为3倍的行间距
                max-height: 80px;
                line-height: 20px;
                background-color: #fff;
                .merchant-desc {
                  width: 100%;
                  line-height: 20px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 4;
                  -webkit-box-orient: vertical;
                }
                .unfold {
                  width: 50px;
                  height: 20px;
                  text-align: left;
                  p {
                    margin: 0;
                    color: #1677ff;
                    cursor: pointer;
                    img {
                      display: inline-block;
                      width: 12px;
                      height: 12px;
                      margin: -4px 0 0 4px;
                    }
                  }
                }
              }
            }
          }
          .desc_right_read {
            /*display: flex;*/
            /*justify-content: flex-start;*/
            margin-top: 16px;
            .read_txt {
              cursor: pointer;
              width: 66px;
              height: 30px;
              background: #1677ff;
              border-radius: 4px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 30px;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>
<style lang="less">
  .tootip {
    .ant-tooltip-inner {
      width: 128px;
    }
  }
</style>
