<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: 13,
    },
    {
      name: '专用化学产品制造',
      num: 4,
    },
    {
      name: '皮革鞣制加工',
      num: 4,
    },
    {
      name: '金属制品业',
      num: 4,
    },
    {
      name: '铅锌冶炼',
      num: 4,
    },
    {
      name: '其他建筑、安全用金',
      num: 4,
    },
  ]);
</script>
<style lang="less" scoped>
  .ant-carousel :deep(.slick-list) {
    height: 160px !important;
  }
  .ant-carousel :deep(.slick-slide) {
    height: 30px !important;
  }
</style>
