<template>
  <ul class="box-rank">
    <li class="item">
      <div class="text title">名次</div>
      <div class="text title" v-if="active == 1">名称</div>
      <div class="text title">完成数</div>
      <div class="text title">未完成</div>
      <div class="text title">完成</div>
      <div class="text title dep" style="text-align: center">部门</div>
    </li>
    <li class="item" v-for="(item, index) in data" :key="index">
      <div class="text title mc" v-if="index == 0">
        <van-image
          width="5vw"
          height="5vw"
          fit="contain"
          :src="require('../../../../assets/gxapp/j.png')"
        />
      </div>
      <div class="text title mc" v-else-if="index == 1">
        <van-image
          width="5vw"
          height="5vw"
          fit="contain"
          :src="require('../../../../assets/gxapp/y.png')"
        />
      </div>
      <div class="text title mc" v-else-if="index == 2">
        <van-image
          width="5vw"
          height="5vw"
          fit="contain"
          :src="require('../../../../assets/gxapp/t.png')"
        />
      </div>
      <div class="text title mc" v-else>{{ index + 1 }}</div>
      <div class="text title" v-if="active == 1">{{ item.jsrmc }}</div>
      <div class="text title">{{ item.ys }}</div>
      <div class="text title">{{ item.ns }}</div>
      <div class="text title">{{ (item.rate * 100).toFixed(0) }}%</div>
      <div class="text title dep">{{ item.ssbm }}</div>
    </li>
    <van-empty description="暂无信息" image="default" v-if="data.length <= 0" />
  </ul>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getGrphbData,getBmpm } from "../../../../api/rwzx.js";
const props = defineProps({
  active: Number, //选中的排行榜  0部门  1 个人
});
//个人排行榜数据
const data = ref([]);
if (props.active == 1) {
  _getGrphbData();
} else {
	_getBmpm()
}
//获取个人排行榜数据
function _getGrphbData() {
  getGrphbData({}).then((res) => {
    if (res.length > 0) data.value = res;
  });
}
//获取部门排名数据
function _getBmpm(){
	getBmpm({}).then(res => {
		 if (res.length > 0) data.value = res;
	})
}
</script>

<style lang="scss" scoped>
@import "../../../../assets/styles/mixin.scss";
.box-rank {
  width: 100%;
  height: 100%;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    @include font_size($font_medium_s);
    height: 8vw;
    .text {
      flex: 2;
      text-align: center;
    }
    .mc {
      color: #3e6ee8;
    }
    .dep {
      flex: 3;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
    }
  }
  .item:nth-child(2n + 1) {
    @include table_item_color($table-item-theme);
  }
  .item:nth-child(1) {
    background: #3e6ee8 !important;
    color: #fff;
  }
}
</style>