<template>
  <BodyPanlHeader>
    <a-button type="primary" @click="insertScene">创建场景</a-button>
    <div>
      <a-input-search
        v-model:value="filterName"
        style="width: 280px"
        placeholder="请输入场景名称"
        allow-clear
      />
    </div>
  </BodyPanlHeader>

  <BodyPanlBody>
    <a-table
      :data-source="filterScene"
      :columns="sceneColumns"
      :pagination="pagination"
    />
  </BodyPanlBody>
</template>

<script lang="ts" setup>
import InsertScene from './insert.vue'
import { computed, reactive, ref } from 'vue'
import { BodyPanlHeader, BodyPanlBody } from '@/layout/panl'
import { useProject } from '@/store'
import { sceneColumns } from './columns'
import { renderModal } from '@/helper'

const filterName = ref('')
const projectStore = useProject()
const filterScene = computed(() =>
  projectStore.scenes.filter(
    scene => !scene.name || scene.name?.includes(filterName.value)
  )
)

const pagination = reactive({
  current: 1,
  total: filterScene.value.length,
  pageSize: 7,
  onChange(num: number) {
    pagination.current = num
  }
})

const insertScene = () => {
  renderModal(InsertScene, {
    showBim: !projectStore.current!.bimData,
    project: projectStore.current!,
    async onSave({ type, payload }) {
      if (type === 'bim') {
        await projectStore.addBim(payload)
      } else if (type === 'scene') {
        await projectStore.replaceScenes(payload)
      }
    }
  })
}
</script>
