<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2022-05-30 10:20:34
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-06-01 21:40:50
 * @FilePath: /tswj/src/components/RankingList/index.vue
-->
<template>
  <div class="wrapper">
    <van-row>
      <van-col span="2" class="rank">
        <div v-if="indexKey < 3" class="avatar">
          <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="text">{{ indexKey + 1 }}</div>
      </van-col>
      <van-col span="18" style="padding: 1rem 0.5rem 1rem 0;">
        <div :class="[rankInfo.multi_name ? 'height6rem' : 'height3rem', 'kg-name']" @click="go('/client/chooseBook', { kg_id: rankInfo.id })">
          <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
            <van-col span="4">
              <van-image round width="3rem" height="3rem" :src="rankInfo.logo ? rankInfo.logo : icon_logo" style="vertical-align: text-bottom;" />
            </van-col>
            <van-col span="20">
              <div v-if="rankInfo.multi_name" style="margin-left: 0.5rem;">
                <p style="line-height: 2;">{{ rankInfo.multi_name[0] }}</p>
                <p>{{ rankInfo.multi_name[1] }}</p>
              </div>
              <p v-else style="margin-left: 0.5rem;">
                {{ rankInfo.name }}
              </p>
            </van-col>
          </van-row>
        </div>
      </van-col>
      <van-col span="2">
        <div class="flower" @click="go('/client/donateList', { kg_id: rankInfo.id })">
          <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />&nbsp;{{ rankInfo.qty }}
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { icon_logo, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower } from '@/utils/generateIcons.js'

import { ref } from 'vue'
import _ from 'lodash'

import { useGo } from '@/hooks/useGo'
const go = useGo()

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  item: {
    type: Object,
    default(rawProps) {
      return rawProps
    }
  },
  indexKey: {
    type: Number,
    default(rawProps) {
      return rawProps
    }
  }
})
const emit = defineEmits(['on-icon-click']);
const handle = () => {
  emit('on-icon-click', '')
}
const rankInfo = ref('');
rankInfo.value = _.cloneDeep(props.item);
// 有空格分割name
if (rankInfo.value.name.indexOf(' ') > -1) {
  rankInfo.value.multi_name = rankInfo.value.name.split(' ');
}
</script>

<style lang="less" scoped>
.wrapper {
  margin: 1rem 0;
  background-color: #FFF;
  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;
  }

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

  .height3rem {
    height: 3rem;
  }

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