<template>
  <div class="choose-book-page content-bg">
    <div class="modify-top"></div>
    <div class="belong-school">
      <template v-if="kg_id">
        <van-image round width="2rem" height="2rem" lazy-load :src="kindergartenInfo.logo"
          style="vertical-align: text-bottom;">
          <template v-slot:error>加载失败</template>
        </van-image>
        <p class="title">{{ kindergartenInfo.name }}</p>
      </template>
    </div>
    <div style="position: relative;">
      <div class="ding left"></div>
      <div style="position: relative; z-index: 100;">
        <van-row>
          <van-col span="4"></van-col>
          <van-col span="16">
            <my-button type="custom" :custom-style="styleObject">幼儿园爱心书籍</my-button>
          </van-col>
          <van-col span="4"></van-col>
        </van-row>
      </div>
      <div class="ding right"></div>
    </div>
    <div class="book-list">
      <template v-for="(item, key) in kindergartenInfo.book_list" :key="key">
        <book-card type="C" :item="item" @on-click="onClick(item)"></book-card>
      </template>
    </div>
    <div style="height: 1rem;"></div>
    <shortcut-fixed type="C" :item="['home', 'me']"></shortcut-fixed>
  </div>
</template>

<script setup>
import MyButton from '@/components/MyButton/index.vue'
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 _ from 'lodash'
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

// 自定义按钮颜色样式
const styleObject = reactive({
  backgroundColor: '#F4675A',
  color: '#FFFFFF',
  borderColor: '#F4675A'
})

// 页面数据绑定
const kg_id = $route.query.kg_id ? $route.query.kg_id : '';
const kindergartenInfo = ref({
  id: '',
  logo: '',
  name: '',
  book_list: []
});
onMounted(() => {
  if (kg_id) { // 从学校列表进入
    axios.get('/srv/?a=kg_book_list', {
      params: {
        kg_id
      }
    })
      .then(res => {
        if (res.data.code === 1) {
          kindergartenInfo.value = res.data.data;
        } else {
          console.warn(res);
          Toast({
            icon: 'close',
            message: res.data.msg
          });
        }
      })
      .catch(err => {
        console.error(err);
      })
  } else { // 从访客进入
    axios.get('/srv/?a=book_list')
      .then(res => {
        if (res.data.code === 1) {
          kindergartenInfo.value = {
            book_list: res.data.data
          }
        } else {
          console.warn(res);
          Toast({
            icon: 'close',
            message: res.data.msg
          });
        }
      })
      .catch(err => {
        console.error(err);
      })
  }
})

// 跳转书籍详情页
const onClick = (item) => {
  $router.push({
    path: '/client/bookDetail',
    query: {
      id: item.id
    }
  });
}

const gotoMe = () => {
  console.warn('跳转我的地址');
}
</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');

.choose-book-page {
  .belong-school {
    padding: 1.5rem;

    .title {
      color: #222222;
      display: inline-block;
      vertical-align: super;
      margin-left: 1rem;
    }

  }

  .book-list {
    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);
  }

  .ding {
    z-index: 69;
    position: absolute;
    top: 2.5rem;
    width: 1rem;
    height: 3rem;
    background-image: url('@images/ding-left@2x.png');
    background-size: contain;
    background-repeat: no-repeat;

    &.left {
      left: 8rem;
    }

    &.right {
      right: 8rem;
    }
  }
}
</style>