<template>
  <div class="all-book-page content-bg">
    <div class="modify-top"></div>
    <div class="belong-school">
      <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
        <van-col span="2">
          <van-image v-if="kgInfo.logo" round width="2rem" height="2rem" lazy-load :src="kgInfo.logo" style="vertical-align: text-bottom;" >
            <template v-slot:error>加载失败</template>
          </van-image>
          <van-image v-else round width="2rem" height="2rem" lazy-load :src="icon_avatar" style="vertical-align: text-bottom;" >
            <template v-slot:error>加载失败</template>
          </van-image>
        </van-col>
        <van-col span="22">
          <p class="title">{{ kgInfo.name }}</p>
        </van-col>
      </van-row>
    </div>
    <div class="summary">
      <div class="ding left"></div>
      <div class="wrapper">
        <div class="content-box">
          <van-row class="van-hairline--bottom">
            <van-col span="12" class="van-hairline--right">
              <div class="text-box">
                <span class="text">视频上传</span>
                <span class="number">&nbsp;{{ kgInfo.mission_num }}<span style="color: #888888;">/{{ kgInfo.mission_target }}</span></span>
              </div> 
            </van-col>
            <van-col span="12">
              <div class="text-box">
                <span class="text">作品总数</span>
                <span class="number">&nbsp;{{ kgInfo.prod_num }}</span>
              </div> 
            </van-col>
          </van-row>
          <van-row>
            <van-col span="12" class="van-hairline--right">
              <div class="text-box">
                <span class="text">捐书金额</span>
                <span class="number">&nbsp;¥&nbsp;{{ kgInfo.donate_amt }}</span>
              </div> 
            </van-col>
            <van-col span="12">
              <div class="text-box">
                <span class="text">参与人数</span>
                <span class="number">&nbsp;{{ kgInfo.perf_num }}</span>
              </div> 
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="ding right"></div>
    </div>
    <div class="book-list">
      <div class="header van-hairline--bottom">
        <van-row>
          <van-col span="8" class="left">
            <span class="text" style="border-bottom: 2px solid #F9D95C;">所有书籍</span>
          </van-col>
          <van-col span="8"></van-col>
          <van-col span="8" class="right">
            <van-icon :name="icon_book" size="0.8rem" style="vertical-align: middle;" />
            &nbsp;<span style="vertical-align: middle;">共 {{ kgInfo.book_num }} 种</span>
            </van-col>
        </van-row>
      </div>
      <template v-for="(item, key) in kgInfo.book" :key="key">
        <book-card :item="item" type="B" :user_id="kgInfo.user_id" @on-click="onClick(item)"></book-card>
      </template>
      <van-empty v-if="emptyStatus"
        class="custom-image"
        :image="no_image"
        description="暂无书籍"
      />
    </div>
    <div style="height: 1rem;"></div>
    <shortcut-fixed type="B" :item="['me']"></shortcut-fixed>
  </div>
</template>

<script setup>
import icon_avatar from '@images/que-logo@2x.png'
import no_image from '@images/que-shuju@2x.png'

import icon_book from '@images/shu@2x.png'
import BookCard from '@/components/BookCard/index.vue'
import ShortcutFixed from '@/components/ShortcutFixed/index.vue'

import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import { Toast } from 'vant';

import IMAGE from '@/views/html2canvas.vue'

const $route = useRoute();
const $router = useRouter();

const items = reactive([])
const onClick = (item) => {
  // 调整书籍详情页
  $router.push({
    path: '/client/bookDetail',
    query: {
      id: item.id
    }
  });
}

// 因为不能让空图标提前出来的写法
const emptyStatus = ref(false);

const kgInfo = ref({});
axios.get('/srv/?a=kg_info')
.then(res => {
  if (res.data.code === 1) {
    kgInfo.value = res.data.data;
    if (!res.data.data.book.length) {
      emptyStatus.value = true;
    }
  } else {
    console.warn(res);
    if (!res.data.show) return false;
    Toast({
      icon: 'close',
      message: res.data.msg
    });
  }
})
.catch(err => {
  console.error(err); 
});

// 测试动态路由
/**
 * , {
   path: '/image',
   name: 'html转图片',
   component: () => import('./views/html2canvas.vue'),
   meta: {
     title: ''
   }
 }
 */

// $router.addRoute({ path: '/image', name: 'html转图片', meta: { title: 'html转图片' }, component: IMAGE})

onMounted(() => {
  // setTimeout(() => {
  //   $router.push({
  //     path: '/image'
  //   })
  // }, 3000);
})
</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');
  .all-book-page {
    .belong-school {
      padding: 1.5rem;
      padding-bottom: 0;
      height: 3rem;
      .title {
        color: #222222; 
        display: inline-block; 
        vertical-align: super; 
        margin-left: 1rem;
      }
      
    }
    .summary {
      position: relative;
      .wrapper {
        position: relative;
        z-index: 100;
        .content-box {
          margin: 1rem; 
          background-color: #FFFFFF; 
          border-radius: 8px; 
          text-align: center; 
          color: #713610;
          .text-box {
            padding: 1.5rem 2rem;
            overflow: auto;
            .text {
              color: #222222; 
              border-bottom: 2px solid #F9D95C; 
              font-size: 0.85rem;
              display: inline-block; 
              float: left;
            }
            .number {
              display: inline-block; 
              float: right;
            }
          }
        }
      }
    }
    .book-list {
      margin: 1rem;
      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);
      .header {
        padding: 1rem 0; 
        margin: 0 1rem; 
        text-align: center; 
        vertical-align: middle;
        .left {
          color: #222222; 
          font-size: 1.15rem;
        }
        .right {
          color: #888888; 
          font-size: 0.9rem;
        }
      }
    }
    .ding {
      z-index: 110;
      position: absolute;
      top: 7.5rem;
      width: 1rem;
      height: 3rem;
      background-image: url('@images/ding03@2x.png');
      background-size: contain;
      background-repeat: no-repeat;
      &.left {
        left: 8rem;
      }
      &.right {
        right: 8rem;
      }
    }
  }
</style>