<template>
  <div class="w-100">
    <Model title="建设用地风险管控与修复名录变化情况">
      <a-radio-group v-model:value="value2" button-style="solid">
        <a-radio-button value="1">按年</a-radio-button>
        <a-radio-button value="2">按季度</a-radio-button>
        <a-radio-button value="3">按月</a-radio-button>
        <a-radio-button value="4">按周</a-radio-button>
        <a-radio-button value="5">按天</a-radio-button>
      </a-radio-group>
      <div class="grid grid-cols-5 text-center mt-3">
        <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-5 text-center" v-for="(v, index) in list" :key="v.name">
          <div>{{ index + 1 }}</div>
          <div>{{ v.name }}</div>
          <div>{{ v.num }}</div>
          <div>{{ v.xzdk }}</div>
          <div>{{ v.ycdk }}</div>
        </div>
      </a-carousel>
    </Model>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import Model from './model.vue';
  const value2 = ref('3');
  const columns = ref([
    {
      title: '序号',
      dataIndex: 'index',
    },
    {
      title: '市',
      dataIndex: 'name',
    },
    {
      title: '地块总数',
      dataIndex: 'dksl',
    },
    {
      title: '新增地块',
      dataIndex: 'dksl',
    },
    {
      title: '移除地块',
      dataIndex: 'dksl',
    },
  ]);
  const list = ref([
    {
      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,
    },
  ]);
</script>
<style lang="less" scoped>
  .ant-carousel :deep(.slick-list) {
    height: 200px !important;
  }
  .ant-carousel :deep(.slick-slide) {
    height: 30px !important;
  }
</style>
