<template>

  <div style="height: 100%">
    <!-- <Card title="查询表单基本使用示例" style="margin-top: 20px"> -->
    <dynamic-table
ref="dynamicTableRef" size="small" bordered :data-request="loadData" :columns="columns"
      :search-box="true" export-file-name="导出功能测试" rowKey="heroid" @toggle-advanced="toggleAdvanced">
      <template #export-button>
        <a-button type="primary" size="small">导出</a-button>
      </template>
      <!-- <template #toolbar>
        <a-button type="primary" @click="aoaToExcel" size="small"> 数组格式导出 </a-button>
         自定义导出格式，目前支持天天，excel,html,以及csv 
      </template> -->
    </dynamic-table>
    <!-- </Card> -->
  </div>
</template>

<script lang="ts" setup>
// import { Card } from 'ant-design-vue';
import {
  DynamicTable,
  type DynamicTableInstance,
} from '../../../../../packages/components/lt-a-table/src/index';
import { columns, tableData } from './columns';
import { ref } from 'vue';
// import { aoaToSheetXlsx } from '../../../../../src/components/basic/excel';
const dynamicTableRef = ref<DynamicTableInstance>();


// 展开搜索表单时更新英雄皮肤选项值
const toggleAdvanced = (e) => {
  if (e) {
    // 手动设置搜索表单的搜索项
    dynamicTableRef.value?.getQueryFormRef().updateSchema([
      {
        field: 'price',
        componentProps: {
          options: [
            {
              label: '0-199',
              value: '0-199',
            },
            {
              label: '200-999',
              value: '200-999',
            },
          ],
        },
      },
    ]);
  }
};

const loadData = async (params) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        list: tableData,
        ...params,
      });
    }, 500);
  });
};

  // const aoaToExcel = () => {
  //   const colFilters = columns.filter((n) => n.dataIndex !== '$action');
  //   const colFilterKeys = colFilters.map((n) => n.dataIndex);
  //   // 保证data顺序与header一致
  //   aoaToSheetXlsx({
  //     data: tableData
  //       .map((item) => {
  //         return colFilterKeys.reduce((p, k) => {
  //           p[k] = Array.isArray(item[k]) ? item[k].toString() : item[k];
  //           return p;
  //         }, {});
  //       })
  //       .map((item) => Object.values(item)),
  //     // ['头像', '英雄名称', '英雄称号', '定位']
  //     header: colFilters.map((column) => column.title),
  //     filename: '二维数组方式导出excel.xlsx',
  //   });
  // };
</script>

<style lang="less" scoped>

</style>
