<template>
  <div class="all-book-page content-bg">
    <div class="modify-top" />
    <div class="belong-school">
      <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
        <van-col span="2">
          <van-image round width="3rem" height="3rem" lazy-load :src="kgInfo.logo ? kgInfo.logo : icon_logo" style="vertical-align: text-bottom;" />
        </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 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 bg-gradient">视频上传</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 bg-gradient">作品总数</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 bg-gradient">捐书金额</span>
                <span class="number">&nbsp;¥&nbsp;{{ kgInfo.donate_amt }}</span>
              </div>
            </van-col>
            <van-col span="12">
              <div class="text-box">
                <span class="text bg-gradient">参与人数</span>
                <span class="number">&nbsp;{{ kgInfo.perf_num }}</span>
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="ding right" />
    </div>
    <div class="book-list">
      <div class="header van-hairline--bottom">
        <van-row>
          <van-col span="8" class="left">
            <span class="text bg-gradient">所有书籍</span>
          </van-col>
          <van-col span="8" />
          <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="USER_ROLE.BUSINESS" :user_id="kgInfo.user_id" />
      </template>
      <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无书籍" />
    </div>
    <div style="height: 1rem;" />
    <shortcut-fixed :type="USER_ROLE.BUSINESS" :item="['me']" />
  </div>
</template>

<script setup>
import { no_image, icon_logo, icon_book } from '@/utils/generateIcons'
import { ShortcutFixed, BookCard } from '@/utils/generateModules'
import { USER_ROLE } from '@/constant'

import { ref } from 'vue'
import axios from '@/utils/axios';
import { Toast } from 'vant';

// 因为不能让空图标提前出来的写法
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); 
});
</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: 2rem;
      }
      
    }
    .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 1rem;
            overflow: auto;
            .text {
              color: #222222; 
              // border-bottom: 3px solid @base-color; 
              // text-decoration: underline;
              // text-decoration-color: @base-color;
              font-size: 0.85rem;
              display: block; 
              float: left;
            }
            .bg-gradient {
              background: linear-gradient(@base-color, @base-color) no-repeat;
              /*调整下划线的宽度占百分之百  高度是3px */
              background-size: 100% 4px;
              /* 调整下划线的起始位置 左侧是0 上边是1.15em */
              background-position: 0 1.1em;
            }
            .number {
              display: 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;
        }
        .bg-gradient {
          background: linear-gradient(@base-color, @base-color) no-repeat;
          /*调整下划线的宽度占百分之百  高度是3px */
          background-size: 100% 3px;
          /* 调整下划线的起始位置 左侧是0 上边是1.15em */
          background-position: 0 1.2rem;
        }
      }
    }
    .ding {
      z-index: 110;
      position: absolute;
      top: 7.5rem;
      width: 1rem;
      height: 3rem;
      // background-image: url('@images/ding03@2x.png');
      background-image: url('http://gyzs.onwall.cn/ding03%402x.png');
      background-size: contain;
      background-repeat: no-repeat;
      &.left {
        left: 8rem;
      }
      &.right {
        right: 8rem;
      }
    }
  }
</style>