<template>
    <div class="content-view">
        <div class="table-head-tool">
            <Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
                <FormItem :label-width="20" class="flex">
                    <Select v-model="gridOption.param.seachOption.key" style="width: 120px"
                        :placeholder="seachTypePlaceholder">
                        <Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
                    </Select>
                    <Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search
                        placeholder="请输入关键字" @on-search="query(1)" />
                </FormItem>
                <FormItem label="平台">
                    <Select v-model="gridOption.param.seachOption.platform" style="width: 120px" clearable @on-change="query(1)">
                        <Option value="boss">Boss直聘</Option>
                        <Option value="liepin">猎聘</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="query(1)">查询</Button>
                    <Button type="default" @click="resetQuery" class="ml10">重置</Button>
                    <Button type="default" @click="exportCsv">导出</Button>
                </FormItem>
            </Form>
        </div>
        <div class="table-body">
            <tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
                @changePage="query"></tables>
        </div>
        <editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"></editModal>
        
        <!-- 详情组件 -->
        <ResumeInfoDetail ref="resumeDetail" @on-close="handleDetailClose" />
    </div>
</template>

<script>
import resumeInfoServer from '@/api/profile/resume_info_server.js'
import ResumeInfoDetail from './resume_info_detail.vue'

export default {
    components: {
        ResumeInfoDetail
    },
    data() {
        let rules = {}
        rules["sn_code"] = [{ required: true, message: '请填写设备SN码', trigger: 'blur' }]
        rules["platform"] = [{ required: true, message: '请选择平台', trigger: 'change' }]
        rules["name"] = [{ required: true, message: '请填写姓名', trigger: 'blur' }]

        return {
            seachTypes: [
                { key: 'name', value: '姓名' },
                { key: 'sn_code', value: '设备SN码' },
                { key: 'phone', value: '电话' }
            ],
            gridOption: {
                param: {
                    seachOption: {
                        key: 'name',
                        value: '',
                        platform: null
                    },
                    pageOption: {
                        page: 1,
                        pageSize: 20
                    }
                },
                data: [],
                rules: rules
            },
            listColumns: [
                { title: 'ID', key: 'id', minWidth: 80 },
                { title: '设备SN码', key: 'sn_code', minWidth: 120 },
                { 
                    title: '平台', 
                    key: 'platform', 
                    minWidth: 100,
                    render: (h, params) => {
                        const platformMap = {
                            'boss': { text: 'Boss直聘', color: 'blue' },
                            'liepin': { text: '猎聘', color: 'green' }
                        }
                        const platform = platformMap[params.row.platform] || { text: params.row.platform, color: 'default' }
                        return h('Tag', { props: { color: platform.color } }, platform.text)
                    }
                },
                { title: '姓名', key: 'name', minWidth: 120 },
                { title: '电话', key: 'phone', minWidth: 130 },
                { title: '邮箱', key: 'email', minWidth: 180 },
                { title: '期望职位', key: 'expectedPosition', minWidth: 150 },
                { title: '期望薪资', key: 'expectedSalary', minWidth: 120 },
                { title: '工作经验', key: 'workExperience', minWidth: 100 },
                { title: '学历', key: 'education', minWidth: 100 },
                { title: '更新时间', key: 'last_modify_time', minWidth: 150 },
                { 
                    title: '操作', 
                    key: 'action', 
                    width: 250,
                    type: 'template',
                    render: (h, params) => {
                        let btns = [
                            {
                                title: '查看',
                                type: 'info',
                                click: () => {
                                    this.showDetail(params.row)
                                },
                            },
                            {
                                title: '编辑',
                                type: 'primary',
                                click: () => {
                                    this.showEditWarp(params.row)
                                },
                            },
                            {
                                title: '删除',
                                type: 'error',
                                click: () => {
                                    this.delConfirm(params.row)
                                },
                            },
                        ]
                        return window.framework.uiTool.getBtn(h, btns)
                    },
                }
            ],
            editColumns: [
                { title: '设备SN码', key: 'sn_code', type: 'text', required: true },
                { title: '平台', key: 'platform', type: 'select', required: true, options: [
                    { value: 'boss', label: 'Boss直聘' },
                    { value: 'liepin', label: '猎聘' }
                ]},
                { title: '姓名', key: 'name', type: 'text', required: true },
                { title: '电话', key: 'phone', type: 'text' },
                { title: '邮箱', key: 'email', type: 'text' },
                { title: '期望职位', key: 'expectedPosition', type: 'text' },
                { title: '期望薪资', key: 'expectedSalary', type: 'text' },
                { title: '工作年限', key: 'workExperience', type: 'text' },
                { title: '学历', key: 'education', type: 'text' },
                { title: '技能', key: 'skills', type: 'textarea' },
                { title: '自我介绍', key: 'selfIntroduction', type: 'textarea' },
                { title: '简历内容', key: 'resumeContent', type: 'textarea' }
            ]
        }
    },
    mounted() {
        this.query(1)
    },
    methods: {
        query(page) {
            this.gridOption.param.pageOption.page = page
            resumeInfoServer.page(this.gridOption.param).then(res => {
                this.gridOption.data = res.data.rows
                this.gridOption.param.pageOption.total = res.data.count
            })
        },
        showAddWarp() {
            this.$refs.editModal.showModal()
        },
        showEditWarp(row) {
            this.$refs.editModal.showModal(row)
        },
        delConfirm(row) {
            window.framework.uiTool.delConfirm(async () => {
                await resumeInfoServer.del(row)
                this.$Message.success('删除成功！')
                this.query(1)
            })
        },
        exportCsv() {
            resumeInfoServer.exportCsv(this.gridOption.param).then(res => {
                window.framework.funTool.downloadFile(res, '简历信息.csv')
            })
        },
        resetQuery() {
            this.gridOption.param.seachOption = {
                key: 'name',
                value: '',
                platform: null
            }
            this.query(1)
        },
        showDetail(row) {
            // 优先使用 resumeId，如果没有则使用 id
            const resumeId = row.resumeId || row.id
            if (resumeId) {
                this.$refs.resumeDetail.show(resumeId)
            } else {
                this.$Message.warning('简历ID不存在')
            }
        },
        handleDetailClose() {
            // 详情关闭后的回调，可以在这里刷新列表
            // this.query(this.gridOption.param.pageOption.page)
        }
    },
    computed: {
        seachTypePlaceholder() {
            const selected = this.seachTypes.find(item => item.key === this.gridOption.param.seachOption.key)
            return selected ? selected.value : '请选择搜索类型'
        }
    }
}
</script>

<style scoped>
.ml10 {
    margin-left: 10px;
}

.flex {
    display: flex;
    align-items: center;
}
</style>

