<template>
  <PageWrapper>
    <a-card>
      <a-tabs :animated="false">
        <template v-for="item in achieveList" :key="item.key">
          <a-tab-pane>
            <template #tab>
              <span> {{ item.name }}</span>
            </template>
          </a-tab-pane>
        </template>
      </a-tabs>
      <div class="flex justify-between">
        <ADatePicker
          mode="year"
          v-model:value="yearValue"
          format="YYYY"
          :open="yearShow"
          @openChange="handleOpenChange"
          @panelChange="handlePanelChange"
          valueFormat="YYYY"
        />
        <a-button>新增</a-button>
      </div>
      <BasicTable class="p0 mt-4" @register="registerTable" />
    </a-card>
  </PageWrapper>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { Tabs, Card, DatePicker, Button } from 'ant-design-vue'
  import { PageWrapper } from '/@/components/Page'
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table'
  // import { Moment } from 'moment';
  export interface TabItem {
    key: string
    name: string
  }
  const achieveList: TabItem[] = [
    {
      key: '1',
      name: '水稻',
    },
    {
      key: '2',
      name: '耙耙柑',
    },
    {
      key: '3',
      name: '活草鱼',
    },
    {
      key: '4',
      name: '生猪',
    },
    {
      key: '5',
      name: '稻虾',
    },
    {
      key: '6',
      name: '乌鱼',
    },
    {
      key: '7',
      name: '鲈鱼',
    },
    {
      key: '8',
      name: '爱媛',
    },
  ]
  const columns: BasicColumn[] = [
    {
      title: '基地',
      dataIndex: 'roleName',
    },
    {
      title: '时间',
      dataIndex: 'roleValue',
    },
    {
      title: '录入时间',
      dataIndex: 'orderNo',
    },
    {
      title: '录入人员',
      dataIndex: 'createTime',
    },
    {
      title: '总产量（斤）',
      dataIndex: 'createTime2',
    },
    {
      title: '种养殖面积（亩）',
      dataIndex: 'createTime3',
    },
    {
      title: '产值（元）',
      dataIndex: 'createTime4',
    },
  ]
  export default defineComponent({
    components: {
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
      [Card.name]: Card,
      [DatePicker.name]: DatePicker,
      [Button.name]: Button,
      PageWrapper,
      BasicTable,
    },
    setup() {
      const yearShow = ref<boolean>(false)
      const yearValue = ref()

      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,
        },
      })

      const handleOpenChange = (open: boolean) => {
        yearShow.value = open
      }
      const handlePanelChange = (e) => {
        yearShow.value = false
        yearValue.value = e
        console.log(e.format('YYYY'))
      }
      return {
        yearShow,
        yearValue,
        achieveList,
        registerTable,
        handleOpenChange,
        handlePanelChange,
      }
    },
  })
</script>

<style lang="less">
  .p0 {
    .ant-table-wrapper {
      padding: 0 !important;
    }
  }
</style>
