<template>
  <CollapseContainer class="sys-container" title="账目记录" :canExpan="false">
    <BasicTable
      ref="tableRef"
      @register="registerTable"
      rowKey="id"
      showTableSetting
      :canResize="true"
      :pagination="{
        pageSize: 10,
        defaultPageSize: 10,
        showSizeChanger: false,
      }"
    >
      <template #form-custom> custom-slot </template>
      <template #action="{ record }">
        <TableAction :actions="createActions(record)" stopButtonPropagation />
      </template>
    </BasicTable>
    <ExpExcelModel @register="register" @success="defaultHeader" />
    <Popup @register="addRegister" :popupData="popupData" @saveData="saveData" />
  </CollapseContainer>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, toRefs, unref } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import Popup from '../popup.vue';
  import { useModal } from '/@/components/Modal';
  import { ExpExcelModel } from '/@/components/Excel';
  import { columns } from './data';
  import { useUserStore } from '/@/store/modules/user';
  import { BasicTable, useTable, TableAction, TableActionType } from '/@/components/Table';

  interface PopupData {
    title: string;
    data: object[];
  }
  interface Btn {
    disable_btn: boolean;
  }

  export default defineComponent({
    name: 'AccountRecord',
    components: { CollapseContainer, BasicTable, TableAction, Popup, ExpExcelModel },
    setup() {
      // init();
      const userStore = useUserStore();
      const id: any = userStore.getUserInfo?.id;
      const tableRef = ref<Nullable<TableActionType>>(null);
      const popupData = reactive<PopupData>({
        title: '添加',
        data: [],
      });
      const btn = reactive<Btn>({
        disable_btn: true,
      });
      const [registerTable] = useTable({
        rowSelection: {
          type: 'checkbox',
          getCheckboxProps: (record) => ({
            disabled: record.id === id || !record.groups[0], // Column configuration not to be checked
          }),
        },
        columns: columns,
        // clickToRowSelect: false, // 点击行不勾选
        dataSource: popupData.data,
        showIndexColumn: false,
        bordered: true,
      });
      const [register, { openModal }] = useModal();
      function getTableAction() {
        // 获取组件
        const tableAction = unref(tableRef);
        if (!tableAction) {
          throw new Error('tableAction is null');
        }
        return tableAction;
      }

      return {
        popupData,
        tableRef,
        registerTable,
        getTableAction,
        openModal,
        register,
        ...toRefs(btn),
      };
    },
  });
</script>
<style>
  .ant-calendar-picker {
    width: 100%;
  }
  @media (max-width: 639px) {
    .sys-container .vben-basic-table-header__toolbar > * {
      margin-right: 3px;
    }

    .sys-container .vben-basic-table .ant-table-wrapper {
      padding: 3px;
    }
  }
</style>
