<template>
  <div class="right_center">
    <div class="right_center-title flex">
      <div class="flex items-center">
        <img src="@/assets/img/home/title_arrow.png" alt="">
        部门满意度排行榜
      </div>
    </div>
    <div class="right_center-content">
      <template v-if="list.length">
        <div class="scroll" v-loading="loading">
          <div class="scroll-item" v-for="(item, index) in list" :key="index">
            <span class="scroll-item-area" :class="index<=2 ? 'three' : ''">NO.{{ index + 1 }}</span>
            <el-tooltip placement="top">
              <template #content> {{ item.visitOrgName }}</template>
              <span class="scroll-item-title">{{ item.visitOrgName }}</span>
            </el-tooltip>
            <span class="scroll-item-hotspot"><CountUp :endVal="item.visitCount " :duration="2"/>(件)</span>
            <span class="scroll-item-num">{{ item.satisfiedRate }}%</span>
          </div>
        </div>
      </template>
      <template v-else>
        <EmptyCom class="mt-20"></EmptyCom>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import CountUp from "@/components/count-up";
import {departmentSatisfaction} from "api/home";
import dayjs from "dayjs";
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<any>([]);
const loading = ref(false);
const getData = async () => {
  loading.value = true;
  try {
    const {result} = await departmentSatisfaction({
      StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
      EndDate: dayjs(date.value[1]).format('YYYY-MM-DD'),
    });
    list.value = result;
    loading.value = false;
  } catch (e) {
    console.log(e);
    loading.value = false;
  }
}
onMounted(() => {
  getData();
});
</script>
<style scoped lang="scss">
.right_center {
  padding: 0 30px;
  font-size: 15px;

  &-title {
    font-size: 20px;
    color: #fff;
    justify-content: space-between;
    align-items: center;
  }

  &-content {
    margin-top: 15px;

    .scroll {
      height: 300px;
      overflow: hidden;

      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 5px;
        color: #D2D4D5;
        margin-bottom: 15px;

        &:nth-child(odd) {
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: 5px;
        }


        &-area {
          display: inline-block;
          background-color: #69BBF6;
          padding: 0 6px;
          color: #333;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
          white-space: nowrap;
          position: relative;

          &:after {
            content: "";
            border-left: 8px solid #69BBF6;
            border-right: 12px solid transparent;
            border-top: 12px solid transparent;
            border-bottom: 11px solid transparent;
            width: 0;
            height: 0;
            position: absolute;
            right: -20px;
          }
        }

        .three {
          background-color: #ECA455;
          position: relative;
        }

        .three:after {
          content: "";
          border-left: 8px solid #ECA455;
          border-right: 12px solid transparent;
          border-top: 12px solid transparent;
          border-bottom: 11px solid transparent;
          width: 0;
          height: 0;
          position: absolute;
          right: -20px;
        }

        &-title {
          width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-left: 20px;
        }

        &-hotspot {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1;
          margin-left: 30px;
        }
      }
    }
  }
}

.count-up-wrap {
  display: inline-block;
}
</style>