<script setup>
import { usePageSearch,useColumnsSet,usePageDownload } from "@ksconsole/hooks";
import { ref } from 'vue'
import { getList } from "./getList";

// 页面查询逻辑 推荐使用vue响应式包裹
const searchParams = ref({
  name: ''
})
const {
  tableData,
  pageNum,
  pageChange,
  total,
  search,
  isLoading
} = usePageSearch(getList, searchParams, {
  resultHandle: (res) => {
    tableData.value = res.resourceList
    total.value = res.totalCount
  }
})

const searchOptions = ref([
  {
    key: 'name',
    label: '实例名称',
  },
  {
    key: 'id',
    label: '实例ID',
  },
])
const selectKeys = ref(0)
function onSearch(v) {
  console.log("🚀 ~ onSearch ~ v:", v)
  searchParams.value.name = v.name
  search()
}
function downloadFn(v) {
  console.log("🚀 ~ downloadFn ~ v:", v)
}

const columns = ref([
  {
    key: "instanceType",
    title: "数据1"
  },
  {
    key: "productType",
    title: "数据2"
  },
  {
    key: "instanceName",
    title: "数据3"
  },
  {
    key: "region",
    title: "数据4"
  }
]);
const option = {
  instanceType: [
    {label: "数据1", value: 1},
    {label: "数据2", value: 2}
  ],
  productType: [
    {label: "数据0", value: 0},
    {label: "数据1", value: 1}
  ]
}
/** 
 * 自定义列表配置逻辑 
 * columns: 表头数据
 * key: 唯一标识
 */
const columnKey = 'onlyKey'
const { columnDatas,columnsChange } = useColumnsSet(columns, columnKey)
// test是下载的文件名
const { getDownDatas } = usePageDownload(columns,tableData,'test',option);

const tableInstance = ref(null)
function clickRow() {
  setTimeout(() => {
    selectKeys.value = tableInstance.value.getCheckedData().length
  })
}

</script>

<template>
  <div class="main-content">
    <div class="margin-bottom-20">
      <KsSearch
          :search-options="searchOptions"
          hasRefresh
          @onSearch='onSearch'
          hasDown
          @onExport="getDownDatas"
          :columnDatas="columnDatas"
          :columnKey='columnKey'
          @changeColumns='columnsChange'
      >
        <Button type='primary' ><Icon class="k-icon-add" /> 关联成员 </Button>
        <Button style="margin-left: 8px"> 删除</Button>
      </KsSearch>
    </div>
    <CommonTable
        ref="tableInstance"
        :data="tableData"
        :columns="columnDatas"
        :loading="isLoading"
        class="margin-bottom-20"
        @clickRow="clickRow"
    >
      <TableColumn fixed="right" title="操作" key="test2">
        <template v-slot:template="[data, index]">
          <div>
            <Button type="link">编辑</Button>
            <Button type="link">删除</Button>
          </div>
        </template>
      </TableColumn>
    </CommonTable>
    <KsPagin v-model="pageNum" :total="total" :select-keys="selectKeys" ref="__test" @change="pageChange"/>
  </div>
</template>

<style scoped lang="less">
.flex {
  display: flex;
}
.right {
  justify-content: right;
}
.margin-bottom-20 {
  margin-bottom: 20px;
}
</style>
