<template>
  <div style="height: 100%">
    <Card style="margin-top: 20px">
      <dynamic-table
ref="dynamicTableRef" size="small" bordered v-if="columns.length > 0" :columns="columns"
        :search-box="false" export-file-name="导出功能测试" @toggle-advanced="toggleAdvanced" :url="url"
        :columnFilter="columnFilter" :remoteQueryMode="remoteQueryMode" :pageSize="25" :dataName="dataName"
        :showIndex="true" row-key="FormularId">
        <!-- <template #export-button>
          <a-button type="primary" size="small">导出</a-button>
        </template> -->
        <!-- <template #toolbar>
          <Select ref="select" v-model:value="editableType">
            <Select.Option value="single">单行编辑</Select.Option>
            <Select.Option value="multiple">多行编辑</Select.Option>
            <Select.Option value="cell">可编辑单元格</Select.Option>
          </Select>
        </template> -->
        <!-- <template #header-title>
          <label> 表格头测试
          </label>
        </template>
        <template #toolbar>
          <a-button type="primary" size="small"> 数组格式导出 </a-button>
          自定义导出格式，目前支持，excel,html,以及csv
        </template> -->
      </dynamic-table>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import {
  DynamicTable,
  type DynamicTableInstance,
} from '../../../../../packages/components/lt-a-table/src';
import { ref } from 'vue';
import { columns } from "./columns"
import {Card} from "ant-design-vue"
// import {Select} from "ant-design-vue"
const dynamicTableRef = ref<DynamicTableInstance>();
//模式为3的情况下，数据请求测试方式

const url = 'FormularService/LoadFormularHead'
const dataName = 'Heads'
const remoteQueryMode = 3

const columnFilter = [
  "ProCode",
  "ProductName",
  "FormularId",
  "FormularName",
  "BomId",
  "Remark",
  {
    prop: "IsParent",
    type: "CheckBox"
  },
  {
    prop: 'ProductSeries',
    type: "Tree",
    MatchCase: "Equal",
    mode: "multiple",
    options: [
      {
        id: "1",
        name: '成品',
        children: [
          {
            id: '2',
            name: '成品_纯丙烯酸酯',
          },
          {
            id: '3',
            name: '成品_纯丙烯酸酯_0.5kg包装',
          },
          {
            id: '4',
            name: '成品_纯丙烯酸酯_20kg包装',
          },
          {
            id: '5',
            name: '成品_纯丙烯酸酯_200kg包装',
          },
          {
            id: '6',
            name: '成品_纯丙烯酸酯_40kg包装',
          },
          {
            id: '7',
            name: '成品_纯丙烯酸酯_50kg包装',
          },
        ],
      },
      {
        id: "80",
        name: '配件',
        children: [
          {
            id: '81',
            name: '配件_过滤袋',
            children: [
              {
                id: '1080',
                name: '配件_过滤袋_27微米',
              },
              {
                id: '1081',
                name: '配件_过滤袋_28微米',
              },
              {
                id: '1082',
                name: '配件_过滤袋_29微米',
              },
              {
                id: '1083',
                name: '配件_过滤袋_30微米',
              }
            ],
          },
          {
            id: '82',
            name: '配件_包装桶',
            children: [
              {
                id: '1084',
                name: '配件_包装桶_塑胶桶',
              },
              {
                id: '1085',
                name: '配件_包装桶_铁桶',
              }
            ]
          },
        ],
      },
    ]
  },
  {
    prop: "ModifySaveTime",
    type: "DateTime"
  }
]

// 展开搜索表单时更新英雄皮肤选项值
const toggleAdvanced = (e) => {
  if (e) {
    // 手动设置搜索表单的搜索项
  }
};

</script>

<style lang="less" scoped>

</style>
