<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2022-05-30 13:51:47
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-05-31 18:08:05
 * @FilePath: /tswj/src/views/client/donateList.vue
 * @Description: 幼儿园儿童捐赠金额排行榜
-->
<template>
  <div class="wrapper">
    <van-row>
      <van-col span="20" style="padding: 1rem 0.5rem 1rem 0;">
        <div :class="[kgInfo.multi_name ? 'heightHigh' : 'heightLow', 'kg-name']">
          <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
            <van-col span="4">
              <van-image round width="4rem" height="4rem" :src="kgInfo.avatar ? kgInfo.avatar : icon_avatar" style="vertical-align: text-bottom;" />
            </van-col>
            <van-col span="20">
              <div v-if="kgInfo.multi_name" style="margin-left: 1.5rem;">
                <p>{{ kgInfo.multi_name[0] }}</p>
                <p>{{ kgInfo.multi_name[1] }}</p>
              </div>
              <p v-else style="margin-left: 1.5rem;">
                {{ kgInfo.name }}
              </p>
            </van-col>
          </van-row>
        </div>
      </van-col>
      <van-col span="4">
        <div class="flower">
          <van-icon :name="icon_flower" color="#c5c5c5" size="1.5rem" style="vertical-align: bottom;" />&nbsp;3000
        </div>
      </van-col>
    </van-row>
  </div>
  <div v-for="(rank, indexKey) in infoList" :key="indexKey" class="van-hairline--bottom">
    <van-row style="padding: 0.5rem;">
      <van-col span="2">
        <div v-if="indexKey < 3" class="glob-center">
          <van-icon v-if="indexKey === 0" :name="icon_ranking1" size="1.75rem" />
          <van-icon v-if="indexKey === 1" :name="icon_ranking2" size="1.75rem" />
          <van-icon v-if="indexKey === 2" :name="icon_ranking3" size="1.75rem" />
        </div>
        <div v-else class="glob-center" style="text-align: center; color: #84909F;">{{ indexKey + 1 }}&nbsp;</div>
      </van-col>
      <van-col span="4">
        <van-image v-if="rank.avatar" round width="3rem" height="3rem" :src="rank.avatar ? rank.avatar : icon_avatar" />
      </van-col>
      <van-col span="12">
        <div class="name-info glob-center">
          <p>{{ rank.name }}</p>
        </div>
      </van-col>
      <van-col span="6" style="text-align: right; font-size: 1rem;">
        <div class="glob-center" style="color: #222222;">
          <van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
          <span>&nbsp;2000</span>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
import { icon_avatar, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const infoList = ref([{
  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
  name: '杨妮妮'
}, {
  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
  name: '杨妮妮'
}, {
  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
  name: '杨妮妮'
}, {
  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
  name: '杨妮妮'
}, {
  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
  name: '杨妮妮'
}])

const kgInfo = ref({
  name: '杨浦民办科技幼稚园',
  multi_name: '',
  avatar: '',
})
// TEMP: 测试数据
// kgInfo.value.name = kgInfo.value.name + ' ' + kgInfo.value.name;
// 有空格分割name
if (kgInfo.value.name.indexOf(' ') > -1) {
  kgInfo.value.multi_name = kgInfo.value.name.split(' ');
}
</script>

<style lang="less" scoped>
.wrapper {
  padding: 0 2rem 0 0.5rem;
  background-color: #F7F7F7;
  position: relative;

  .rank {
    position: relative;

    .avatar {
      position: absolute;
      top: 0;
      left: 20%;
    }

    .text {
      position: absolute;
      top: 0.5rem;
      left: 40%;
      color: #84909F;
    }
  }

  .flower {
    text-align: center;
    position: absolute;
    top: 40%;
    color: #713610;
    font-size: 1.25rem;
  }

  .kg-name {
    position: relative;
    height: 3rem;
  }

  .heightLow {
    height: 3rem;
  }

  .heightHigh {
    height: 6rem;
  }
}
</style>