<template>
  <div class="w-90% mx-auto left2">
    <Model title="建设用地调查情况排名">
      <div class="!w-90% mx-auto mt-4 h-130 overflow-hidden">
        <a-carousel dot-position="left" style="height: 100%" :dots="false" autoplay>
          <div class="text-[#D8F0FF] h-full" v-for="(v, index) in list" :key="v.name">
            <div>
              <div class="inline-block px-1 mr-1" :class="`${index <= 2 ? '  border-1 border-[#008091] border-solid text-[#00C9D8] ' : ''}`"
                >TOP{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</div
              >

              {{ v.name }}</div
            >
            <a-progress
              :stroke-color="{
                '20%': '#CCF7FF',
                '100%': '#00D2FC',
              }"
              :percent="Proportion(v, curnt)"
            />
          </div>
        </a-carousel>
      </div>
    </Model>
  </div>
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';
  import Model from './model.vue';
  import { jsyddcqk } from '../api';

  const props = defineProps({
    curnt: { type: Number, default: 0 },
  });
  const list = ref([
    {
      name: '深圳',
      num: 13,
    },
    {
      name: '梅州',
      num: 24,
    },
    {
      name: '惠州',
      num: 74,
    },
    {
      name: '金属',
      num: 54,
    },
    {
      name: '铅锌冶炼',
      num: 74,
    },
    {
      name: '其他建筑',
      num: 4,
    },
  ]);
  const zs = ref(0);
  async function init() {
    list.value = await jsyddcqk();

    list.value.forEach((v: any) => {
      zs.value = zs.value + Number(v.zs);
    });
    handel(props.curnt);
  }
  init();
  function Proportion(v, curnt) {
    if (curnt === 0) {
      console.log((Number(v.zs) / zs.value) * 100, 'ces');
      return ((Number(v.zs) / zs.value) * 100).toFixed(0);
    } else if (curnt == 1) {
      return ((Number(v.wdc) / zs.value) * 100).toFixed(0);
    } else if (curnt == 2) {
      return ((Number(v.wcb) / zs.value) * 100).toFixed(0);
    } else if (curnt == 3) {
      return ((Number(v.cb) / zs.value) * 100).toFixed(0);
    }
  }
  watch(
    () => props.curnt,
    (v) => {
      init();
    }
  );
  function handel(v) {
    if (v == 0) {
      list.value.sort(function (a: any, b: any) {
        return b.zs - a.zs;
      });
    } else if (v == 1) {
      list.value.sort(function (a: any, b: any) {
        return b.wdc - a.wdc;
      });
    } else if (v == 2) {
      list.value.sort(function (a: any, b: any) {
        return b.wcb - a.wcb;
      });
    } else if (v == 3) {
      list.value.sort(function (a: any, b: any) {
        return b.cb - a.cb;
      });
    }
  }
</script>
<style lang="less" scoped>
  .ant-carousel :deep(.slick-list) {
    height: 100% !important;
    overflow: hidden;
  }
  .ant-carousel :deep(.slick-slide) {
    > div {
      height: 60px !important;
    }
  }
  :deep(.ant-progress-text) {
    color: #d8f0ff;
  }
</style>
