<template>
  <div class="w-90% mx-auto right2 text-base">
    <Model title="风险管控和修复名录排名">
      <div class="w-95% mx-auto pb-5">
        <div class="flex text-center mt-3 titles">
          <div v-for="v in columns" :key="v.title">{{ v.title }}</div>
        </div>
        <!-- autoplay -->
        <a-carousel dot-position="left" :dots="false" autoplay>
          <div class="text-[#fff] !flex text-center content" v-for="(v, index) in list" :key="v.name">
            <div>{{ index + 1 }}</div>
            <div>{{ v.name }}</div>
            <div>{{ v.yc }}</div>
            <div>{{ v.wyc }}</div>
            <div>{{ v.zs }}</div>
          </div>
        </a-carousel>
      </div>
    </Model>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import Model from './model.vue';
  import { fxgkhxfmlt } from '../api';

  const list = ref<any>([
    {
      name: '广州市',
      num: 18,
      xzdk: 15,
      ycdk: 2,
    },
    {
      name: '深圳市',
      num: 17,
      xzdk: 15,
      ycdk: 2,
    },
    {
      name: '韶关市',
      num: 16,
      xzdk: 15,
      ycdk: 2,
    },
    {
      name: '惠州市',
      num: 15,
      xzdk: 15,
      ycdk: 2,
    },
    {
      name: '东莞市',
      num: 12,
      xzdk: 15,
      ycdk: 2,
    },
    {
      name: '中山市',
      num: 9,
      xzdk: 15,
      ycdk: 2,
    },
  ]);
  async function init() {
    list.value = await fxgkhxfmlt();
  }
  init();

  const columns = ref([
    {
      title: '排名',
      dataIndex: 'index',
    },
    {
      title: '市级名称',
      dataIndex: 'name',
    },
    {
      title: '移出地块数量',
      dataIndex: 'dksl',
    },
    {
      title: '未移出地块数量',
      dataIndex: 'dksl',
    },
    {
      title: '地块总数',
      dataIndex: 'dksl',
    },
  ]);
</script>
<style lang="less" scoped>
  .ant-carousel :deep(.slick-list) {
    height: 240px !important;
  }
  .ant-carousel :deep(.slick-slide) {
    height: 40px !important;
    line-height: 40px;
    background: rgba(0, 201, 216, 0.08);
    margin-top: 5px;
    font-size: 16px;
  }
  .content {
    > div {
      width: 20%;
    }
    > div:nth-child(1) {
      width: 10%;
    }
    > div:nth-child(4) {
      width: 30%;
    }
  }
  .right2 {
    .titles {
      font-size: 13px;
      background: linear-gradient(135deg, rgba(116, 136, 172, 0.55), rgba(129, 162, 224, 0.56));
      padding: 5px 0;
      > div {
        width: 20%;
      }
      > div:nth-child(1) {
        width: 10%;
      }
      > div:nth-child(4) {
        width: 30%;
      }
    }
  }
</style>
