<template>
  <div class="donate-list-page">
    <div class="donate-header">
      <van-row>
        <van-col span="11" class="sum">
          <p>捐赠总金额</p>
          <p>{{ donateInfo.total ? donateInfo.total : 0 }}&nbsp;元</p>
        </van-col>
        <van-col span="1"><div class="line"></div></van-col>
        <van-col class="book" span="11">
          <p>点亮书籍</p> 
          <p>{{ donateInfo.num ? donateInfo.num : 0 }}&nbsp;个</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, index) in item" :key="index">
              <div @click="showCert(v)" v-if="v.is_donate" class="ENABLE">
                <van-image width="90%" height="7rem" :src="v.cover" />
              </div>
              <div v-else class="DISABLE">
                <van-image width="90%" height="7rem" :src="v.cover" />
                <div class="mask">
                  <img :src="icon_lock">
                </div>
              </div>
              <!-- <p class="van-ellipsis text">{{ v.name }}</p> -->
              <p class="text">{{ v.name }}</p>
            </van-col>
          </van-row>
        </div>
      </template>
    </div>
    <van-empty v-if="!dataList.length"
      class="custom-image"
      :image="no_image"
      description="暂无捐赠信息"
    />
  </div>

  <van-overlay :show="show" @click="onHide">
    <div style="width: auto; height: 100%; margin: 2rem 2rem 0 2rem; overflow: hidden;">
      <van-swipe class="my-swipe" ref="swipe">
        <van-swipe-item v-for="(d, k) in certItems" :key="k">
          <donate-cert :item="d"></donate-cert>
          <div style="height: 2rem;"></div>
        </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 no_image from '@images/que-shuju@2x.png'

import { ref, reactive, onMounted, getCurrentInstance, nextTick, watch } 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 donateInfo = ref('');
const dataList = ref([]);
axios.post('/srv/?a=my_donate')
.then(res => {
  if (res.data.code === 1) {
    donateInfo.value = res.data.data;
    dataList.value = _.chunk(res.data.data.book, 3);
  } else {
    console.warn(res);
    if (!res.data.show) return false;
    Toast({
      icon: 'close',
      message: res.data.msg
    });
  }
})
.catch(err => {
  console.error(err); 
});

// 显示捐赠证书
const show = ref(false);
const certItems = ref([])
const showCert = (v) => {
  // 捐款成功后，查询生成捐赠证书
  axios.get('/srv/?a=cert_list', {
    params: {
      book_id: v.id
    }
  })
  .then(res => {
    if (res.data.code === 1) {
      certItems.value = res.data.data;
      show.value = true
    } else {
      console.warn(res);
      if (!res.data.show) return false;
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err); 
  })
}

const onHide = () => {
  show.value = false;
}

// 关闭弹框后重置index
const internalInstance = getCurrentInstance();
watch(show, (v) => {
  if (!v) {
    setTimeout(() => {
      nextTick(() => {
        internalInstance.ctx.$refs.swipe.swipeTo(0);
      })
    }, 1000)
  }
})

</script>

<style lang="less" scoped>
.donate-list-page {
  .donate-header {
    background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); 
    padding: 1rem; 
    text-align: center; 
    color: #713610;
    .sum {
      line-height: 1.5;
      p:last-child {
        font-weight: bold; 
        font-size: 1.25rem;
      }
    }
    .line {
      border-right: 1px solid #733912; 
      height: 100%; 
      opacity: 0.15;
    }
    .book {
      line-height: 1.5;
      p:last-child {
        font-weight: bold; 
        font-size: 1.25rem;
      }
    }
  }
  .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>