import { NTabs, NTabPane, NButton, NScrollbar } from 'naive-ui'
import TrajTable from './components/TrajTable'
import TrajUpload from './components/TrajUpload'
import Panel from '@/components/Panel/index.vue'
import { useDaodan } from './daodan'

const panels = ['手动配置', 'STK轨迹文件配置']
export default defineComponent({
  setup() {
    const { daodanData, showOrHideDdConfig } = useDaodan()
    const name = ref('手动配置')

    const data = ref([
      {
        name: '起始点',
        lon: 120,
        lat: 21,
        alt: 0,
        time: 1183135260000,
      },
      {
        name: '中间特征点',
        lon: 120,
        lat: 21,
        alt: 0,
        time: 1183135260000,
        detached: false,
      },
      {
        name: '落点',
        lon: 120,
        lat: 21,
        alt: 0,
        time: 1183135260000,
      },
    ])
    const handleClose = () => {}
    return () => (
      <div>
        <Panel title={`${daodanData.value.targetName}配置`}>
          <div class="flex h-full w-full flex-col gap-2 p-2">
            <NTabs
              class="flex h-[calc(100%-42px)] flex-col"
              v-model:value={name.value}
              type="card"
              tab-style="min-width: 80px;"
              onClose={handleClose}
            >
              {panels.map(panel => (
                <NTabPane
                  class="flex-1 overflow-y-auto rounded-b-[var(--n-tab-border-radius)] border border-[var(--n-tab-border-color)] border-t-transparent"
                  key={panel}
                  tab={panel}
                  name={panel}
                >
                  <NScrollbar>
                    <div class="px-4 pb-4">
                      <div class="detail-container">
                        {panel === '手动配置' ? (
                          <>
                            <TrajTable title="轨迹点" data={data.value} />
                            <TrajTable title="拦截弹" data={data.value} />
                          </>
                        ) : (
                          <>
                            <TrajUpload title="轨迹点" />
                            <TrajUpload title="拦截弹" />
                          </>
                        )}
                      </div>
                    </div>
                  </NScrollbar>
                </NTabPane>
              ))}
            </NTabs>
            <div class="flex justify-end gap-2">
              <NButton type="primary" onClick={() => showOrHideDdConfig({})}>
                确认
              </NButton>
              <NButton onClick={() => showOrHideDdConfig({})}>取消</NButton>
            </div>
          </div>
        </Panel>
      </div>
    )
  },
})