<script lang="ts" setup>
import ADropTable from '@/components/a-drop-table/ADropTable.vue'
import {
  type IconName,
  icons,
} from '@/components/a-icon/iconfont.ts'
import AIcon from '@/components/a-icon/AIcon.vue'
import Strings from '@/common/utils/strings.ts'

const model = defineModel<string | undefined | null>()
const dropTableLoader = (param: { keywords: string } & G.PageParam) => {
  const dataList = icons.glyphs
    .filter(it => it.name.toLowerCase().includes(param.keywords.toLowerCase()) || it.font_class.toLowerCase().includes(param.keywords.toLowerCase()))
    .sort((a, b) => a.unicode_decimal - b.unicode_decimal)
  return Promise.resolve({
    current: param.current!,
    size: param.size,
    pages: Math.ceil(dataList.length / param.size!),
    total: dataList.length,
    records: dataList
      .filter((_, i) => {
        return i >= (param.current! - 1) * param.size! && i < param.current! * param.size!
      })
      .map(it => ({
        id: it.font_class,
        ...it,
      })),
  } as G.PageResult)
}

</script>

<template>
  <ADropTable v-model="model"
    :loader="dropTableLoader"
    display-field="font_class">
    <template #displayArea="{displayData}">
      <div v-if=" Strings.isBlank(displayData)" class="display-area">请选择</div>
      <AIcon v-else :name="displayData as IconName" class="display-area"/>
    </template>
    <template #columns>
      <ElTableColumn label="图标" prop="font_class">
        <template #default="{row}">
          <AIcon :name="row.font_class as IconName"/>
          <span style="margin-left: 10px;display: inline-block">{{ row.font_class }}</span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="名称" prop="name"/>
    </template>
  </ADropTable>
</template>

<style lang="stylus" scoped>
.display-area {
  cursor pointer
}
</style>
