<!-- 套餐列表 -->
<template>
  <div class="pkg-main">
    <!-- 图书type -->
    <div class="book-header">
      <div class="header-top">
        <div class="booke">
          <div v-for="item in bookType" :key="item.id">
            <span
              class="booke_type"
              :class="{ booke_type_color: item.id === selctType }"
              @click="selectType(item.id, item.name)"
              @mouseup="onMouseup(item)"
            >
              {{ item.name }}
            </span>
          </div>
          <!-- <div>
            <span
              class="booke_type"
              :class="{ booke_type_color: selctType == 9999 }"
              @click="recommend"
            >
              推荐书目
            </span>
          </div> -->
        </div>
        <div class="input_search">
          <a-input-search
            v-model:value="input_search_book"
            :maxlength="100"
            placeholder="搜索名称"
            class="input_style"
            @search="onSearch"
            enter-button
          />
        </div>
      </div>
    </div>
    <div class="h5booke-header">
      <div class="header-top">
        <div class="booke">
          <a-dropdown>
            <a class="ant-dropdown-link">
              {{ typetext || '全部' }}<img src="@/assets/images/down.png" alt="" />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item
                  v-for="item in bookType"
                  :key="item.id"
                  @click="selectType(item.id, item.name)"
                >{{ item.name }}</a-menu-item
                >
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <div class="input_search">
          <a-input-search
            v-model:value="input_search_book"
            :maxlength="100"
            placeholder="搜索名称"
            class="input_style"
            @search="onSearch"
            enter-button
          />
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="booklist">
      <booklist ref="bookeRef" @showDesc="showDesc" v-show="isShowBookList && !recommendVisit" />
      <bookdesc
        v-show="!isShowBookList"
        ref="bookDescRef"
        style="margin-top: 100px"
        @escClick="escClick"
      />
      <recommendBox v-if="recommendVisit" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import { message } from 'ant-design-vue';
  import { ref, onMounted } from 'vue';
  import wares from '../../api/commodity';
  import booklist from '@/views/packageManage/index.vue';
  import bookdesc from '@/views/packageManage/detail.vue';
  import recommendBox from '@/views/packageManage/recommend.vue';
  import book from '../../api/book';

  const router = useRouter();
  const bookType = ref([{ name: '全部', id: 999999 }]);
  const isShowBookList = ref<boolean>(true);

  const input_search_book = ref<string>('');
  const selctType = ref<number>(999999);

  const bookeRef = ref();
  const bookDescRef = ref();

  const getType = () => {
    book
      .getBookTypeDropDown()
      .then((res) => {
        const { data, code, msg } = res.data;
        if (code === 200) {
          bookType.value.push(...data);
          bookeRef.value.refTYpe = selctType.value;
          bookeRef.value.getSubType();
        }
      })
      .catch((err) => {
        message.info(err.msg);
      });
  };
  getType();
  //
  const onMouseup = (val) => {
    console.log(val);
  };
  // 选择type
  const typetext = ref<string>('');
  const typename = ref<string>('');
  const recommendVisit = ref<Boolean>(false);
  const selectType = (type, name) => {
    recommendVisit.value = false;
    typetext.value = name;
    typename.value = name;
    selctType.value = type;
    bookeRef.value.refTYpe = type;
    bookeRef.value.selctType = type;
    bookeRef.value.refbookName = input_search_book.value;
    bookeRef.value.pageSize = 9;
    bookeRef.value.current = 1;
    bookeRef.value.search_iconFlag = false;

    bookeRef.value.getSubType();
    isShowBookList.value = true;
  };

  const recommend = () => {
    selctType.value = 9999;
    recommendVisit.value = true;
    isShowBookList.value = true;
    // isShowBookList.value = false;
  };
  // 搜索

  const onSearch = () => {
    bookeRef.value.refTYpe = selctType.value;
    bookeRef.value.refbookName = input_search_book.value;
    bookeRef.value.pageSize = 9;
    bookeRef.value.current = 1;
    bookeRef.value.search_iconFlag = false;
    bookeRef.value.getSubType();
    isShowBookList.value = true;
  };

  // 隐藏bookelist 传值id
  const showDesc = (id) => {
    bookDescRef.value.typename = typename.value;
    bookDescRef.value.bookId = id;
    isShowBookList.value = false;
    bookDescRef.value.bookDsec();
  };
  function goToPage(path, type, name) {
    router.push({
      path: path,
      query: {
        type: type,
        name: name,
      },
    });
  }
  const escClick = () => {
    isShowBookList.value = true;
  };
</script>
<style lang="less" scoped>
  .booklist {
    background: white;
  }
  .pkg-main {
    width: 100%;
    margin: 0 auto;
    .h5booke-header {
      display: none;
    }
    .book-header {
      position: fixed;
      top: 80px;
      height: 50px;
      width: 100%;
      z-index: 2;
      background: white;
      border-bottom: 1px solid #ffeeeeee;
      .header-top {
        width: 1160px;
        margin: 0 auto;
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .booke {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        .booke_type {
          display: inline-block;
          width: 120px;
          height: 48px;
          cursor: pointer;
          text-align: center;
          line-height: 48px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
        }
        .booke_type_color {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #1677ff;
          border-bottom: 1px solid #1677ff;
        }
      }
      .input_style {
        width: 200px;
        height: 32px;
      }
    }
  }

  @media screen and (min-width: 600px) and (max-width: 1024px) {
    .header-top {
      width: 100% !important;
      padding: 0 20px !important;
    }
  }
  @media screen and (max-width: 600px) {
    .pkg-main {
      width: 100%;
      margin: 0 auto;
      .book-header {
        display: none;
        position: fixed;
        top: 40px;
        height: 100px;
        width: 100% !important;
        z-index: 99999;
        background: white;
        border-bottom: 1px solid #ffeeeeee;
      }
      .h5booke-header {
        width: 100% !important;
        position: fixed;
        height: 100px;
        display: block;
        .header-top {
          margin: 0 auto;
          height: 80px;
          margin-top: 40px;
          height: 100px;
          background: white;
          display: flex;
          justify-content: space-around;
          align-items: center;
          border-bottom: 1px solid #ffeeeeee;
        }
      }
      .input_search {
        margin-top: 10px;
        display: flex;
        justify-content: center;
      }
      .input_style {
        width: 200px;
        height: 32px;
      }
      .ant-dropdown-link {
        display: inline-block;
        margin-top: 10px;
        height: 32px;
        line-height: 32px;
      }
      img {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: -4px 0 0 4px;
      }
    }
  }
</style>
