<script setup lang="ts">
import { getMubiao, getMubiaoPos } from '@/api/Mubiao'
import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
import { useMubiao } from './hooks/mubiao'

const { addMubiao } = useMubiao()

const country = ref<string>('CN')
const countryOptions = [
  {
    label: '中',
    value: 'CN',
  },
  {
    label: '英',
    value: 'EN',
  },
  {
    label: '美',
    value: 'US',
  },
]

const type = ref<string>('all')
const typeOptions = [
  {
    label: '全部',
    value: 'all',
  },
  {
    label: '已完成',
    value: 'done',
  },
  {
    label: '未完成',
    value: 'undone',
  },
]

const columns: DataTableColumns = [
  {
    type: 'selection',
    disabled(row) {
      return row.name === 'Edward King 3'
    },
  },
  {
    title: '目标',
    key: 'targetName',
  },
  {
    title: '类别',
    key: 'targetType',
  },
]

const data = ref([])

const paginationReactive = reactive<Record<string, string | number | Function>>(
  {
    page: 1,
    pageSize: 50,
    showSizePicker: true,
    pageSizes: [20, 50, 100],
    onChange: (page: number) => {
      paginationReactive.page = page
    },
    onUpdatePageSize: (pageSize: number) => {
      paginationReactive.pageSize = pageSize
      paginationReactive.page = 1
    },
  }
)

// const checkedRowKeys = ref<DataTableRowKey[]>([])
const handleCheck = (rowKeys: DataTableRowKey[]) => {
  // checkedRowKeys.value = rowKeys
  // console.log('rowKeys', rowKeys)
  // const selectedList = data.value.filter(item => rowKeys.includes(item.id))
  addMubiao(rowKeys)
}

const getMubiaoData = async () => {
  const { code, data: resData } = await getMubiao()
  if (code === '200') {
    data.value = resData || []
  }
}

onMounted(() => {
  getMubiaoData()
})
</script>

<template>
  <div class="flex flex-col gap-2 w-h-full">
    <div class="flex items-center gap-2">
      <div class="whitespace-nowrap">国别</div>
      <n-select v-model:value="country" :options="countryOptions" />
      <div class="whitespace-nowrap">性质</div>
      <n-select v-model:value="type" :options="typeOptions" />
    </div>

    <div class="flex items-center gap-2">
      <div class="whitespace-nowrap">类型</div>
      <n-select v-model:value="type" :options="typeOptions" />
    </div>
    <n-data-table
      class="flex-1"
      :columns="columns"
      :data="data"
      :row-key="(rowData: Record<string, any>) => rowData.id"
      :pagination="paginationReactive"
      flex-height
      @update:checked-row-keys="handleCheck"
    />
  </div>
</template>

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