<template>
  <div class="choose-book-page content-bg">
    <div class="modify-top"></div>
    <div class="belong-school">
      <van-image
        round
        width="2rem"
        height="2rem"
        lazy-load
        src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        style="vertical-align: text-bottom;"
      >
        <template v-slot:error>加载失败</template>
      </van-image>
      <p class="title">杨浦民办科技幼稚园</p>
    </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 items" :key="key">
        <book-card :item="item" @on-click="onClick(item)"></book-card>
      </template>
    </div>
    <div style="height: 1rem;"></div>
    <to-me @on-click="gotoMe()"></to-me>
  </div>
</template>

<script setup>
import MyButton from '@/components/MyButton/index.vue'
import BookCard from '@/components/BookCard/index.vue'
import ToMe from '@/components/ToMe/index.vue'

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 styleObject = reactive({
  backgroundColor: '#F4675A', 
  color: '#FFFFFF', 
  borderColor: '#F4675A'
})
const items = reactive([])
const onClick = (item) => {
  console.warn(item.id);
}
const gotoMe = () => {
  console.warn('跳转我的地址');
}
  onMounted(() => {
    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');
  .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;
      }
    }
    .group4 {
      width: 160px;
      height: 15px;
      margin-left: 83px;
    }

    .layer1 {
      width: 15px;
      height: 15px;
      background-color: rgba(244, 103, 90, 1);
      border-radius: 50%;
    }

    .layer2 {
      width: 15px;
      height: 15px;
      background-color: rgba(244, 103, 90, 1);
      border-radius: 50%;
    }
    .group18 {
      z-index: 69;
      position: absolute;
      left: 113px;
      top: 129px;
      width: 5px;
      height: 44px;
      border-radius: 0 0 2.5px 2.5px;
      background-color: rgba(255, 212, 167, 1);
    }

    .group19 {
      z-index: 70;
      position: absolute;
      left: 258px;
      top: 129px;
      width: 5px;
      height: 44px;
      border-radius: 0 0 2.5px 2.5px;
      background-color: rgba(255, 212, 167, 1);
    }
  }
</style>