<template>
  <div class="donate-list-page">
    <div style="background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); padding: 1rem; text-align: center; color: #713610;">
      <van-row>
        <van-col span="11" style="line-height: 1.5;">
          <p>捐赠总金额</p>
          <p style="font-weight: bold; font-size: 1.25rem;">3562.5元</p>
        </van-col>
        <van-col span="1"><div style="border-right: 1px solid #733912; height: 100%; opacity: 0.15;"></div></van-col>
        <van-col span="11" style="line-height: 1.5;">
          <p>点亮书籍</p> 
          <p style="font-weight: bold; font-size: 1.25rem;">4个</p>
        </van-col>
      </van-row>
    </div>

    <div class="donate-book-wrapper">
      <template v-for="(item, key) in dataList" :key="key">
        <div class="book-row">
          <van-row>
            <van-col span="8" class="book-col" v-for="(v, key) in item">
              <div @click="showCert(v)" v-if="v.status === 'ENABLE'" class="ENABLE">
                <van-image width="90%" height="95%" :src="v.src" />
              </div>
              <div v-else class="DISABLE">
                <van-image width="90%" height="95%" :src="v.src" />
                <div class="mask">
                  <img :src="icon_lock">
                </div>
              </div>
              <p class="van-ellipsis text">{{ v.name }}</p>
            </van-col>
          </van-row>
        </div>
      </template>
    </div>
  </div>

  <van-overlay :show="show" @click="show = false">
    <div style="width: auto; height: 100%; margin: 2rem 2rem 0 2rem; overflow: hidden;">
      
      <van-swipe class="my-swipe">
        <van-swipe-item>
          <donate-cert></donate-cert>
          <div style="height: 2rem;"></div>
        </van-swipe-item>
        <van-swipe-item>
          <donate-cert></donate-cert>
        </van-swipe-item>
        <van-swipe-item>
          <donate-cert></donate-cert>
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>
  </van-overlay>

</template>

<script setup>
import DonateCert from '@/components/DonateCert/index.vue'

import icon_lock from '@images/suo@2x.png'

import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import _ from 'lodash'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

const show = ref(false);

const rawList = ref([
  {
    name: '逃家小兔',
    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
    status: 'ENABLE'
  },
  {
    name: '小猫的情绪',
    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
    status: 'DISABLE'
  },
  {
    name: '逃家小兔',
    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
    status: 'ENABLE'
  },
  {
    name: '小猫的情绪',
    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
    status: 'DISABLE'
  },
  {
    name: '逃家小兔',
    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
    status: 'DISABLE'
  },
  {
    name: '小猫的情绪',
    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
    status: 'DISABLE'
  },
])
let dataList = ref([]);

// 显示捐赠证书
const showCert = (v) => {
  console.warn(v);
  show.value = true
}

  onMounted(() => {
    dataList.value = _.chunk(rawList.value, 3);
  })
</script>

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

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

  }
}
</script>

<style lang="less" scoped>
.donate-list-page {
  .donate-book-wrapper {
    padding: 0 1rem;
    .book-row {
      margin: 1rem 0; 
      text-align: center;
      .book-col {
        padding: 0 0.5rem;
        .ENABLE {
          background: #FFFFFF; 
          box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.15); 
          border-radius: 5px; 
          border: 1px solid #FFE000;
        }
        .DISABLE {
          border-radius: 6px; 
          position: relative;
          .mask {
            position: absolute; 
            width: 100%; 
            height: 100%; 
            background: rgba(0, 0, 0, 0.4); 
            border-radius: 6px; 
            top: 0;
            img {
              margin-top: 20%; 
              width: 50%;
            }
          }
        }
        .text {
          font-size: 1rem; 
          margin-top: 0.5rem; 
          color: #222222;
        }
      }
    }
  }
}

.custom-indicator {
  position: absolute;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
  width: 100%;
}
</style>