<template>
  <Card :bodyStyle="{ padding: '0 10px' }">
    <template #title>
      <DatePicker
        mode="year"
        v-model:value="yearValue"
        format="YYYY"
        :open="yearShow"
        @openChange="handleOpenChange"
        @panelChange="handlePanelChange"
        valueFormat="YYYY"
      />
    </template>
    <template #extra>
      <a-button size="small">新增</a-button>
    </template>
    <div class="py-5 text-base px-6px">
      <span>总计产值：</span>
      <span class="text-[#5564d7]">￥0</span>
    </div>
    <BasicTable @register="registerTable" />
  </Card>
</template>

<script lang="ts">
  import { ref } from 'vue'
  import { Card, DatePicker } from 'ant-design-vue'
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table'
  // import { Moment } from 'moment';
  const columns: BasicColumn[] = [
    {
      title: '产业',
      dataIndex: 'roleName',
    },
    {
      title: '占比',
      dataIndex: 'roleValue',
    },
    {
      title: '时间',
      dataIndex: 'orderNo',
    },
    {
      title: '产值（￥）',
      dataIndex: 'createTime',
    },
  ]
  export default {
    components: {
      BasicTable,
      Card,
      DatePicker,
    },
    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 {
        yearValue,
        yearShow,
        handleOpenChange,
        handlePanelChange,
        registerTable,
      }
    },
  }
</script>

<style lang="less" scoped></style>
