<template>
  <div style="height: 100%">
    <Card style="margin-top: 20px;padding: 0px;" :bodyStyle="{padding:'0px'}">
      <lt-a-table ltATable id="dnytable" class="dnytable" ref="dynamicTableRef" size="small" bordered :dataSource="tableData"
        :auto-clumns="columns" :search-box="false" export-file-name="导出功能测试" @toggle-advanced="toggleAdvanced"
        :showIndex="true" :row-selection="rowSelection" :OrderParam="orderParama" @row-click="handleRowClick"
        row-class-name="rest" :selectTypeAfterload="1" :is-auto-editable="true"
        :dataFilter="dataFilter" :ellipsis="true"  @on-btn-click="handleBtnClick">
        <!-- <template #export-button>
          <a-button type="primary" size="small">导出</a-button>
        </template> -->
        <!-- <template #summary>
          <a-table-summary-row>
            <a-table-summary-cell>Total</a-table-summary-cell>
            <a-table-summary-cell>
              <a-typography-text type="danger">{{ 66 }}</a-typography-text>
            </a-table-summary-cell>
            <a-table-summary-cell>
              <a-typography-text>{{ 34 }}</a-typography-text>
            </a-table-summary-cell>
          </a-table-summary-row>
          <a-table-summary-row>
            <a-table-summary-cell>Balance</a-table-summary-cell>
            <a-table-summary-cell :col-span="2">
              <a-typography-text type="danger">
                {{ 123 }}
              </a-typography-text>
            </a-table-summary-cell>
          </a-table-summary-row>
        </template> -->
        <!-- <template #toolbar>
          <a-button type="primary" @click="aoaToExcel" size="small"> 数组格式导出 </a-button>
          自定义导出格式，目前支持天天，excel,html,以及csv
        </template> -->
      </lt-a-table>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import {
  type DynamicTableInstance,
} from '../../../../../packages/components/lt-a-table/src';
import { ref } from 'vue';
import { columns, tableData } from "./columns"
import { computed, unref } from "vue"
import { Table, Card } from 'ant-design-vue';
// import ltATable from "../../../../../packages/components/lt-a-table/src/dynamic-table.vue"
// import ltATable from "../../../../../packages/"
const dynamicTableRef = ref<DynamicTableInstance>();



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

const handleRowClick = (record, index, event) => {
  console.log("接收到的数据是：" + record)
  console.log("数据索引是：" + index)
  console.log("事件是" + event)
}

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
}

const selectedRowKeys = ref<DataType['key'][]>([]); // Check here to configure the default column

const onSelectChange = (changableRowKeys: string[]) => {
  console.log('selectedRowKeys changed: ', changableRowKeys);
  selectedRowKeys.value = changableRowKeys;
};

const handleBtnClick = (record, col, key) => {
  record
  col
  key
}

const rowSelection = computed(() => {
  return {
    selectedRowKeys: unref(selectedRowKeys),
    onChange: onSelectChange,
    hideDefaultSelections: true,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          selectedRowKeys.value = newSelectedRowKeys;
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          selectedRowKeys.value = newSelectedRowKeys;
        },
      },
    ],
  };
});

const dataFilter = function (data) {
  // for (let i = 0; i < data.length; i++) {
  //   if (typeof data[i].IsPreparePlan != "undefined") {
  //     data[i].IsPreparePlan = data[i].IsPreparePlan
  //   }
  // }
  return data
}

const columnFilter = [
  "ProductSeries",
  "ProductName",
  "ProdLineId",
  "PlanBatch",
  "Status",
  "EditStatus",
  {
    "prop": "DownloadStatus",
    "type": "CheckBox"
  },
  "OperaStatus",
  {
    "prop": "IsPreparePlan",
    "type": "ComBox",
    "defaultValue": false,
    "options": [
      {
        "label": "备料单",
        "value": true
      },
      {
        "label": "非备料单",
        "value": false
      }
    ],
    "MatchCase": "Equal"
  },
  "VesselId",
  "Field05",
  "Field06"
]

const orderParama = [
  {
    FieldName: "产品系列",
    OrderByFieldName: "ProductSeries",
    OrderType: "Ascending",
  },
  {
    FieldName: "产品编码",
    OrderByFieldName: "ProCode",
    OrderType: "Ascending",
  },
  {
    FieldName: "产品名称",
    OrderByFieldName: "ProductName",
    OrderType: "Descending",
  },
]

</script>

<style>
#dnytable tr[class='ant-table-row ant-table-row-level-0 rest']>td[class='ant-table-cell'] {
  background-color: aqua !important;
  color: black !important;
}

#dnytable tr[class='ant-table-row ant-table-row-level-0 rest']>td[class='ant-table-cell ant-table-cell-fix-left ant-table-selection-column'] {
  background-color: aqua !important;
  color: black !important;
}

#dnytable tr[class='ant-table-row ant-table-row-level-0 rest']>td[class='ant-table-cell ant-table-cell-fix-left'] {
  background-color: aqua !important;
  color: black !important;
}

#dnytable tr[class='ant-table-row ant-table-row-level-0 rest']>td[class='ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last'] {
  background-color: aqua !important;
  color: black !important;
}
</style>


