<template>
  <CommonPage title="Boss直聘数据">
    <div class="h-full flex flex-col">
       <CrudTable
           ref="$table"
           v-model:query-items="queryItems"
           :columns="columns"
           :get-data="getData"
       >
           <template #queryBar>
               <n-form-item label="数据类型" label-placement="left">
                   <n-select 
                       v-model:value="queryItems.data_type" 
                       :options="dataTypeOptions" 
                       style="width: 200px"
                       @update:value="$table?.handleSearch()"
                   />
               </n-form-item>
           </template>
       </CrudTable>

       <n-modal v-model:show="showDetailModal" preset="card" title="数据详情" style="width: 800px">
           <n-code :code="detailJson" language="json" word-wrap />
       </n-modal>
    </div>
  </CommonPage>
</template>

<script setup>
import { ref, h, onMounted, computed } from 'vue'
import { NButton, NTag, NFormItem, NSelect, NCode, NModal } from 'naive-ui'
import CommonPage from '@/components/page/CommonPage.vue'
import CrudTable from '@/components/table/CrudTable.vue'
import api from '@/api'

const $table = ref(null)
const queryItems = ref({
    data_type: 'job',
    platform: 'boss'
})
const showDetailModal = ref(false)
const detailJson = ref('')

const dataTypeOptions = [
    { label: '职位', value: 'job' },
    { label: '公司', value: 'company' }
]

const columns = computed(() => {
    if (queryItems.value.data_type === 'job') {
        return [
            { 
                title: 'ID', 
                key: 'id', 
                width: 100 
            },
            { 
                title: '职位ID', 
                key: 'job_id', 
                width: 200 
            },
            { 
                title: '创建时间', 
                key: 'created_at', 
                width: 200 
            },
            { 
                title: '更新时间', 
                key: 'updated_at', 
                width: 200 
            },
            {
                title: '操作',
                key: 'actions',
                width: 100,
                align: 'center',
                fixed: 'right',
                render(row) {
                    return h(NButton, {
                        size: 'small',
                        onClick: () => {
                            // 优先展示原始 json_data，如果没有则展示整个 row
                            const content = row.json_data ? JSON.parse(row.json_data) : row
                            detailJson.value = JSON.stringify(content, null, 2)
                            showDetailModal.value = true
                        }
                    }, { default: () => '详情' })
                }
            }
        ]
    } else {
        return [
            { 
                title: 'ID', 
                key: 'id', 
                width: 100 
            },
            { 
                title: '公司名称', 
                key: 'company_name', 
                width: 250 
            },
            { 
                title: '创建时间', 
                key: 'created_at', 
                width: 200 
            },
            { 
                title: '更新时间', 
                key: 'updated_at', 
                width: 200 
            },
            {
                title: '操作',
                key: 'actions',
                width: 100,
                align: 'center',
                fixed: 'right',
                render(row) {
                    return h(NButton, {
                        size: 'small',
                        onClick: () => {
                            const content = row.json_data ? JSON.parse(row.json_data) : row
                            detailJson.value = JSON.stringify(content, null, 2)
                            showDetailModal.value = true
                        }
                    }, { default: () => '详情' })
                }
            }
        ]
    }
})

const getData = async (params) => {
    params.platform = 'boss'
    const res = await api.queryPlatformData(params)
    return {
        data: res.data?.items || [],
        total: res.data?.total || 0
    }
}

onMounted(() => {
    $table.value?.handleSearch()
})
</script>
