<template>
  <div class="center-float">
    <div class="table-header">
      <span>排名</span>
      <span>区域</span>
      <span>受理量</span>
      <span>办结率</span>
    </div>
    <div class="table-body">
      <template v-if="list.length">
        <div v-for="(item,index) in list" :key="item.id" class="table-body-item">
          <span :class="index<=2 ? 'num' : ''"><CountUp :endVal="index + 1" :duration="1"/></span>
          <span :class=" (index<=2 ? 'color' : '')">{{ item.areaName }}</span>
          <span :class=" (index<=2 ? 'color' : '')"> {{ item.acceptedCount }}</span>
          <span class="color">{{ item.completionRate }}%</span>
        </div>
      </template>
      <template v-else>
        <EmptyCom style="font-size: 14px" class="mt-5"></EmptyCom>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, watch} from 'vue'
import CountUp from "@/components/count-up";
import dayjs from "dayjs";
import {areaAccept} from "api/home";
import EmptyCom from "@/components/empty-com";

const props = defineProps({
  dateArray: {
    type: Array,
    default: () => []
  }
})
const date = ref([]);
watch(() => props.dateArray, (val: any) => {
  date.value = val;
}, {immediate: true})

watch(() => props.dateArray, (val: any) => {
  getData();
})
const list = ref([
  {
    id: 1,
    area: '北京',
    acceptNum: 100,
    finishRate: '100%'
  },
  {
    id: 2,
    area: '上海',
    acceptNum: 100,
    finishRate: '100%'
  },
  {
    id: 3,
    area: '广东',
    acceptNum: 100,
    finishRate: '100%'
  },
  {
    id: 4,
    area: '天津',
    acceptNum: 100,
    finishRate: '100%'
  },
  {
    id: 5,
    area: '重庆',
    acceptNum: 100,
    finishRate: '100%'
  },
  {
    id: 6,
    area: '四川',
    acceptNum: 100,
    finishRate: '100%'
  },
  {
    id: 7,
    area: '江苏',
    acceptNum: 100,
    finishRate: '100%'
  },
  {
    id: 8,
    area: '浙江',
    acceptNum: 100,
    finishRate: '100%'
  },
  {
    id: 9,
    area: '安徽',
    acceptNum: 100,
    finishRate: '100%'
  },
  {
    id: 10,
    area: '福建',
    acceptNum: 100,
    finishRate: '100%'
  }
])
const getData = async () => {
  try {
    const {result} = await areaAccept({
      StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
      EndDate: dayjs(date.value[1]).format('YYYY-MM-DD'),
    });
    list.value = result;
  } catch (e) {
    console.log(e);
  }
}


onMounted(() => {
  getData();
});
</script>
<style scoped lang="scss">
.center-float {
  width: 200px;
  background: rgba(23, 75, 92, .4);
  border: 1px solid #246682;
  border-radius: 4px;
  font-size: 14px;
  padding: 10px;

  .table-header {
    display: flex;
    justify-content: space-between;

    span {
      flex: 1;
      text-align: center;
      font-weight: bold;
    }
  }

  .table-body {
    margin-top: 10px;

    .table-body-item {
      display: flex;
      justify-content: space-between;
      padding-bottom: 12px;

      &:last-child {
        padding-bottom: 0;
      }

      span {
        flex: 1;
        text-align: center;
      }

      .num {
        color: #A7D232;
      }

      .color {
        color: #1FDBFD;
      }
    }
  }
}
</style>