<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" />
        </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">
      <van-swipe ref="swipe" class="my-swipe">
        <van-swipe-item v-for="(d, k) in dataList" :key="k">
          <donate-cert :item="d" />
          <div style="height: 2rem;" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>
    <van-empty v-if="!dataList.length" class="custom-image" :image="no_image" description="暂无捐赠信息" />
  </div>
</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 = res.data.data.donate_list;
    } 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: 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: 1rem;
  color: #999999;
  text-align: center;
  width: 100%;
}
</style>