<template>
  <div class="book-detail-page content-bg">
    <div class="modify-top"></div>
    <div class="book-detail">
      <div style="text-align: center;">
        <van-image
          width="220"
          height="220"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed"
        />
      </div>
      <div class="book-intro">
        <p class="book-post">逃家小兔绘本</p>
        <div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">
          从前有一只小兔子，总是想要离家出走。有一天他对妈妈说：“我要跑走啦！”“如果你跑走了我就去追你，因为你是我的小宝贝呀！”妈妈说。
          一场爱的捉迷藏就此展开了
        </div>
        <div v-if="hasToggle">
          <div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" name="http://gyzs.onwall.cn/icon-zhankai%402x.png" /></div>
          <div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" name="http://gyzs.onwall.cn/icon-guanbi%402x.png" /></div>
        </div>
      </div>
    </div>
    <div style="height: 1rem;"></div>
    <to-me @on-click="gotoMe()"></to-me>
  </div>
</template>

<script setup>
import ToMe from '@/components/ToMe/index.vue'
import tools from '@/common/tool'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

  const items = reactive([])

  const gotoMe = () => {
    console.warn('跳转我的地址');
  }

  // 判断是否显示简介的展开图标
  let hasToggle = ref(false); // 判断是否有展开文字，默认没有
  let isToggle = ref(true); // 判断展开状态，默认展开

  const onToggle = (v) => { // 展开/折叠
    isToggle.value = v
  }

  onMounted(() => {
    // 判断是否显示简介的展开图标
    hasToggle.value = tools.hasEllipsis('book-intro');
    for (let index = 0; index < 20; index++) {
      items.push({
        id: index,
        avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
      })
    }
  })
</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
@import url('@css/content-bg.less');
  .book-detail-page {
    overflow: auto;
    .book-detail {
      margin: 1rem; 
      margin-top: 1.25rem;
      padding-top: 1rem;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
      .book-intro {
        padding: 1rem;
        .book-post {
          color: #222222; 
          font-size: 1.25rem; 
          font-weight: bold;
        }
        #book-intro {
          color: #333333; 
          margin-top: 0.25rem;
        }
        .book-toggle-icon {
          text-align: right; 
          color: #713610; 
          font-size: 1rem;
        }
      }
    }
  }
</style>