<template>
  <!-- <a-tabs :active-key="params.type" @update:active-key="updateType">
    <a-tab-pane
      v-for="option in tabOptions"
      :key="option.key"
      :tab="option.label"
    />
  </a-tabs> -->
  <a-table
    row-key="num"
    :data-source="list"
    :columns="sceneColumns"
    :pagination="pagination"
    :row-selection="{
      selectedRowKeys: typeNums[params.type],
      onChange: changeSelectNums
    }"
  >
  </a-table>
</template>

<script lang="ts" setup>
import { selectSceneColumns as sceneColumns } from './columns'
import { reactive } from 'vue'
import { fetchScenes, SceneType, SceneTypeDesc } from '@/api'
import { usePaging } from '@/hook'

import type { SelectTypeScenes } from '@/store'

defineOptions<{ name: 'select-scene-list' }>()

const props = defineProps<{ typeNums: SelectTypeScenes }>()
const emit = defineEmits<{
  (e: 'update:typeNums', value: SelectTypeScenes): void
}>()

const updateType = (type: any) => {
  pagination.current = 1
  params.type = type
}

const tabOptions = [SceneType.SWKJ, SceneType.SWKK, SceneType.SWSS].map(
  type => ({
    key: type,
    label: SceneTypeDesc[type]
  })
)

const params = reactive({ type: SceneType.SWSS })
const { list, pagination } = usePaging(fetchScenes, params)

const changeSelectNums = (nums: any[]) => {
  const currentNums = props.typeNums[params.type]
  const reserve = currentNums.filter(num =>
    list.value.every(scene => scene.num !== num)
  )
  emit('update:typeNums', {
    ...props.typeNums,
    [params.type]: [...reserve, ...nums]
  })
}
</script>
