<script setup>
import { CommonTable, KsSearch,KsPagin, KsStatus } from '@ksconsole/components'
import { usePageSearch } from "@ksconsole/hooks";
import { Icon, TableColumn, Button} from '@king-design/vue';
import { ref } from 'vue'
import { getList } from "../../mock/index.js";
import { sample } from 'lodash-es'

function isValidValue(value) {
  return ![undefined, null, ''].includes(value) && !Number.isNaN(value);
}

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

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 statusMap = [
  {
    type: 'loading',
    text: '处理中'
  },
  {
    type: 'success',
    text: '正常'
  },
  {
    type: 'error',
    text: '异常'
  },
  {
    type: 'info',
    text: '待审批'
  }
]

const columns = ref([
  {
    key: "instanceType",
    title: "普通",
  },
  {
    type: 'slot',
    slotName: 'middle'
  },
  {
    type: 'format',
    key: "productType",
    title: "文本格式化",
    format([data, row, i]) {
      return `自定义${row.instanceType + i}`
    },
    group: [
      {label: '全部', value: ''},
      {label: '运行中', value: 'active'},
      {label: '已关闭', value: 'stopped'}
    ]
  },
  {
    key: "instanceName",
    title: "link可点击带回调",
    type: 'link',
    click: ([val, row, i]) => {
      alert(`我被点击了${val}`)
    },
    format([data, row, i]) {
      return `别看了点我`
    },
  },
  {
    key: "region",
    title: "状态",
    type: 'status',
    width: 100,
    props([data, row, i]) {
      return statusMap[i]
    }
  }
]);

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

function getTableInstance() {
  console.log('tableInstance-', tableInstance.value.getTableInstance().tree)
}


</script>

<template>
  <div class="main-content">
    <Button @click="getTableInstance">getTableInstance</Button>
    <KsStatus type="info" text="待审批" />
    <KsStatus type="loading" text="待审批" />
<!--    <div class="margin-bottom-20">-->
<!--      <KsSearch-->
<!--          :search-options="searchOptions"-->
<!--          :hasDown="true"-->
<!--          @onSearch='onSearch'-->
<!--          @export="downloadFn"-->
<!--      >-->
<!--        <Button type='primary' ><Icon class="k-icon-add" /> 关联成员 </Button>-->
<!--        <Button > 删除</Button>-->
<!--      </KsSearch>-->
<!--    </div>-->
    <CommonTable
        ref="tableInstance"
        :data="tableData"
        :columns="columns"
        :loading="isLoading"
        :rowKey="row => row.instanceId"
        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>
    <div>selectKeys {{ selectKeys }}</div>
    <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>
