<template>
  <PageWrapper>
    <a-card title="全市数据统计">
      <template #extra>
        <a-button size="small">编辑</a-button>
      </template>
      <a-card-grid class="!md:w-1/3 !xl:w-1/7 !w-full">
        <CountItem :data="{ title: '幅员面积', icon: 'city', unit: '平方公里', value: 794.41 }" />
      </a-card-grid>
      <a-card-grid class="!md:w-1/3 !xl:w-1/7 !w-full">
        <CountItem :data="{ title: '镇街', icon: 'city', unit: '个', value: 13 }" />
      </a-card-grid>
      <a-card-grid class="!md:w-1/3 !xl:w-1/7 !w-full">
        <CountItem :data="{ title: '水产品产量', icon: 'city', unit: '万吨', value: 3.72 }" />
      </a-card-grid>
      <a-card-grid class="!md:w-1/3 !xl:w-1/7 !w-full">
        <CountItem :data="{ title: '粮食产量', icon: 'city', unit: '万吨', value: 33.28 }" />
      </a-card-grid>
      <a-card-grid class="!md:w-1/3 !xl:w-1/7 !w-full">
        <CountItem :data="{ title: '人口', icon: 'city', unit: '万人', value: 77.94 }" />
      </a-card-grid>
      <a-card-grid class="!md:w-1/3 !xl:w-1/7 !w-full">
        <CountItem :data="{ title: '耕地总面积', icon: 'city', unit: '万亩', value: 59.66 }" />
      </a-card-grid>
      <a-card-grid class="!md:w-1/3 !xl:w-1/7 !w-full">
        <CountItem :data="{ title: '生猪年出栏', icon: 'city', unit: '万头', value: 42.01 }" />
      </a-card-grid>
    </a-card>

    <a-card title="基地数据" class="!mt-4">
      <template #extra>
        <a-button size="small">新增</a-button>
      </template>
      <BasicTable @register="registerTable" />
    </a-card>
  </PageWrapper>
</template>

<script lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { defineComponent } from 'vue';
  import { Card } from 'ant-design-vue';
  import CountItem from './components/CountItem.vue';

  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  const columns: BasicColumn[] = [
    {
      title: '基地名称',
      dataIndex: 'roleName',
    },
    {
      title: '基地农作物',
      dataIndex: 'roleValue',
    },
    {
      title: '负责人',
      dataIndex: 'orderNo',
    },
    {
      title: '经度',
      dataIndex: 'createTime',
    },
    {
      title: '纬度',
      dataIndex: 'remark1',
    },
    {
      title: '基地面积',
      dataIndex: 'remark2',
    },
    {
      title: '就业人数',
      dataIndex: 'remark3',
    },
  ];
  export default defineComponent({
    components: {
      [Card.name]: Card,
      [Card.Grid.name]: Card.Grid,
      CountItem,
      PageWrapper,
      BasicTable,
    },
    setup() {
      const [registerTable, { reload }] = useTable({
        // api: getRoleListByPage,
        columns,
        useSearchForm: false,
        showTableSetting: false,
        bordered: true,
        showIndexColumn: false,
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: undefined,
        },
      });
      return {
        registerTable,
      };
    },
  });
</script>

<style scoped></style>
