<template>
  <PageWrapper contentBackground>
    <template #footer>
      <a-tabs v-model:activeKey="incrementTypeId" @change="changeTable">
        <a-tab-pane :key="0" :tab="t('routes.equity.incrementType.0')" >
        </a-tab-pane>
        <a-tab-pane :key="1" :tab="t('routes.equity.incrementType.1')" >
        </a-tab-pane>
      </a-tabs>
      </template>
      
      <div class="desc-wrap-BasicTable">
            <BasicTable v-if="!incrementTypeId" @register="registerTable">
              <template #toolbar>
                <a-button type="primary" @click="handleInvoice"> {{t('routes.equity.add')}}</a-button>
              </template>
              <template #action="{ record }">
                  <TableAction
                    stopButtonPropagation
                    :actions="[
                      {
                        label: t('routes.equity.renew'),
                        //icon: 'la:file-invoice-dollar',
                        onClick: headleDetails.bind(null, record),
                      }
                    ]"
                  />
              </template>
            </BasicTable>
            <BasicTable v-else @register="registerDownTable">
              <template #toolbar>
                <a-button type="primary" @click="handleInvoice"> {{t('routes.equity.addDowm')}}</a-button>
              </template>
            </BasicTable>
          </div>
    <AddModal @update="reload" @register="registerAddModal" />
    <EditModal @register="registerEditModal" @update="reload" />
    <DownModal @register="registerDownModal" @update="reload" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, computed } from 'vue';
  import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { useModal } from '/@/components/Modal';
  import { Descriptions,Tabs } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { listApi, dowmListApi } from '/@/api/equity'
  import { useUserStore } from '/@/store/modules/user';
  import { searchForm, columns, columnsDown, DownSchemas } from './data'
  import AddModal from './InvoiceModal.vue';
  import EditModal from './EditModal.vue';
  import DownModal from './DownModal.vue'
  import { usePermissionStore } from '/@/store/modules/permission';
  interface apiDataParam {
    orderSn?: string;
    payTimeStart?: string;
    payTimeEnd?: string;
    invoiceTimeStart?: string;
    invoiceTimeEnd?: string;
    orderBy?: string;
    sortBy?: string;
  }
  export default defineComponent({
    components: {
      AddModal,
      EditModal,
      DownModal,
      BasicTable,
      TableAction,
      PageWrapper,
      TableImg,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    setup() {
      const { t } = useI18n();
      const userStore = useUserStore();
      const permissionStore = usePermissionStore();
      const { getUserInfoAction } = userStore
      const agent = computed(() => userStore.getAgent);
      const { getCheckPerm } = permissionStore;
      const incrementTypeId = ref<number>(0); //0看看 、1看见、2深时
      const apiData = reactive<apiDataParam>({
        orderSn: '',
        payTimeStart: '',
        payTimeEnd: '',
        invoiceTimeStart: '',
        invoiceTimeEnd: '',
        orderBy: '',
        sortBy: '',
      });
      const [registerAddModal, { openModal: openAddModal }] = useModal();
      const [registerDownModal, { openModal: openDownModal }] = useModal();
      const [registerEditModal, { openModal: openEditModal }] = useModal();
      const [registerTable, { reload:reloadEqiuty }] = useTable({
        api: listApi,
        title: '',
        // titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn:false,
        // searchInfo: { incrementTypeId:0 },
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        actionColumn: {
          width: 100,
          title: t('common.operating'),
          fixed: 'right',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        canResize: false,
      });
      const [registerDownTable, { reload:reloadDown }] = useTable({
        api: dowmListApi,
        title: '',
        // titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
        columns: columnsDown,
        useSearchForm: true,
        formConfig: DownSchemas,
        showTableSetting: true,
        showIndexColumn:false,
        searchInfo: { incrementTypeId:1 },
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        canResize: false,
      });
      function handleDelete(record: Recordable) {
        console.log('点击了删除', record);
      }
      function handleInvoice(record: Recordable) {
        if(incrementTypeId.value == 0){
          openAddModal(true, {
            ...record,
          });
        }else{
          openDownModal(true, {
            ...record,
          });
        }
      }
    function handleEdit(record: Recordable) {
      console.log('record', record);
    }
    function headleDetails(record: Recordable) {
      console.log('record', record);
      openEditModal(true, {
        ...record,
      });
    }
    function reload(value){
      if(value){
        getUserInfoAction()
      }
      if(incrementTypeId.value == 0){
        reloadEqiuty()
      }else{
        reloadDown()
      }

    }
      return {
        registerTable,
        registerDownTable,
        handleDelete,
        registerAddModal,
        registerEditModal,
        handleInvoice,
        handleEdit,
        headleDetails,
        reload,
        reloadEqiuty,
        reloadDown,
        incrementTypeId,
        getCheckPerm,
        registerDownModal,
        t,
      };
    },
  });
</script>