<template>
  <div class="w-100">
    <Model title="地区超标分析">
      <div class="grid grid-cols-3 text-center">
        <div v-for="v in columns" :key="v.title">{{ v.title }}</div>
      </div>
      <a-carousel dot-position="left" :dots="false" autoplay>
        <div class="text-[#fff] !grid !grid-cols-3 text-center" v-for="(v, index) in list" :key="v.name">
          <div>{{ index + 1 }}</div>
          <div>{{ v.name }}</div>
          <div>{{ v.num }}</div>
        </div>
      </a-carousel>
    </Model>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import Model from './model.vue';
  const columns = ref([
    {
      title: '序号',
      dataIndex: 'index',
    },
    {
      title: '市',
      dataIndex: 'name',
    },
    {
      title: '超标地块数量(个)',
      dataIndex: 'dksl',
    },
  ]);
  const list = ref([
    {
      name: '广州市',
      num: 18,
    },
    {
      name: '深圳市',
      num: 17,
    },
    {
      name: '韶关市',
      num: 16,
    },
    {
      name: '惠州市',
      num: 15,
    },
    {
      name: '东莞市',
      num: 12,
    },
    {
      name: '中山市',
      num: 9,
    },
  ]);
</script>
<style lang="less" scoped>
  .ant-carousel :deep(.slick-list) {
    height: 160px !important;
  }
  .ant-carousel :deep(.slick-slide) {
    height: 30px !important;
  }
</style>
