<template>
  <div style="height: 100%">
    <Card title="表单自动获取数据示例" style="margin-top: 20px">
      <dynamic-table
ref="dynamicTableRef" size="small" bordered v-if="columns.length > 0" :columns="columns"
        :search-box="true" export-file-name="导出功能测试" @toggle-advanced="toggleAdvanced" :url="url"
        :columnFilter="columnFilter" :remoteQueryMode="remoteQueryMode" :pageSize="25" :dataName="dataName"
        :ifMonitor="true" :signalrUrl="signalrUrl" :showIndex="true" :accessToken="accessToken">
        <template #export-button>
          <a-button type="primary" size="small">导出</a-button>
        </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"
const dynamicTableRef = ref<DynamicTableInstance>();
//模式为3的情况下，数据请求测试方式

const columnFilter = [
  "ProductSeries",
  "ProductName",
  "BomId",
  "DisPlayProName"
]

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

const getBaseUrlInfo = function () {
  let baseURL = ""
  if (
    typeof LtConfig.baseURL == 'undefined' ||
    LtConfig.baseURL == null ||
    LtConfig.baseURL == ""
  ) {
    baseURL = window.location.protocol +
      "//" +
      window.location.hostname +
      ":" +
      location.port
  } else {
    if (LtConfig.baseURL.indexOf("http") == -1) {
      baseURL = "http://" +
        LtConfig.baseURL +
        ":" +
        LtConfig.port
    } else {
      baseURL =
        LtConfig.baseURL +
        ":" +
        LtConfig.port
    }
  }
  return baseURL

}

const url = '/WorkPlanService/SubcribeWorkPlanHead'
const dataName = 'Datas'
const remoteQueryMode = 3
const signalrUrl = getBaseUrlInfo() + "/notify"
const accessToken = "7371f9f2-3703-4673-9b5a-0240e1f2d4d3"
</script>

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