<template>
    <div class="content-view">
        <div class="table-head-tool">
            <Button type="primary" @click="showAddWarp">新增</Button>
            <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.message_type" style="width: 120px" clearable @on-change="query(1)">
                        <Option value="question">提问</Option>
                        <Option value="feedback">反馈</Option>
                        <Option value="suggestion">建议</Option>
                    </Select>
                </FormItem>
                <FormItem label="处理状态">
                    <Select v-model="gridOption.param.seachOption.status" style="width: 120px" clearable @on-change="query(1)">
                        <Option value="pending">待处理</Option>
                        <Option value="processing">处理中</Option>
                        <Option value="completed">已完成</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>
    </div>
</template>
<script>


import ai_messagesServer from '@/api/ai/ai_messages_server.js'
export default {
    data() {
        let rules = {}

        rules["user_id"] = [{ required: true, type: "number", message: '请填写用户ID', trigger: 'change' }];
        rules["message_type"] = [{ required: true, message: '请填写消息类型' }];
        rules["content"] = [{ required: true, message: '请填写消息内容' }];

        return {
            seachTypes: [
                { key: 'user_id', value: '用户ID' },
                { key: 'nickname', value: '用户昵称' }
            ],
            gridOption: {
                param: {
                    seachOption: {
                        key: 'nickname',
                        value: '',
                        message_type: null,
                        status: null
                    },
                    pageOption: {
                        page: 1,
                        pageSize: 20
                    }
                },
                data: [],
                rules: rules
            },
            listColumns: [
                { title: 'ID', key: 'id', minWidth: 80 },
                { title: '用户ID', key: 'user_id', minWidth: 120 },
                { title: '用户昵称', key: 'nickname', minWidth: 120 },
                { title: '消息类型', key: 'message_type', minWidth: 120 },
                { title: '消息内容', key: 'content', minWidth: 300 },
                { title: 'AI回复', key: 'ai_response', minWidth: 300 },
                { title: '创建时间', key: 'create_time', minWidth: 150 },
                { 
                    title: '操作', 
                    key: 'action', 
                    width: 200,
                    type: 'template',
                    render: (h, params) => {
                        let btns = [
                            {
                                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: '用户ID', key: 'user_id', type: 'number', required: true },
                { title: '消息类型', key: 'message_type', type: 'text', required: true },
                { title: '消息内容', key: 'content', type: 'textarea', required: true },
                { title: 'AI回复', key: 'ai_response', type: 'textarea' },
                { title: '处理状态', key: 'status', type: 'select', options: [
                    { value: 'pending', label: '待处理' },
                    { value: 'processing', label: '处理中' },
                    { value: 'completed', label: '已完成' },
                    { value: 'failed', label: '处理失败' }
                ]}
            ]
        }
    },
    mounted() {
        this.query(1);
    },
    methods: {
        query(page) {
            this.gridOption.param.pageOption.page = page;
            ai_messagesServer.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 ai_messagesServer.del(row)
                this.$Message.success('删除成功！')
                this.query(1)
            })
        },
        exportCsv() {
            ai_messagesServer.exportCsv(this.gridOption.param).then(res => {
                window.framework.funTool.downloadFile(res, 'AI消息管理.csv');
            });
        },
        resetQuery() {
            this.gridOption.param.seachOption = {
                key: 'nickname',
                value: '',
                message_type: null,
                status: null
            };
            this.query(1);
        }
    },
    computed: {
        seachTypePlaceholder() {
            const selected = this.seachTypes.find(item => item.key === this.gridOption.param.seachOption.key);
            return selected ? selected.value : '请选择搜索类型';
        }
    }
}
</script>
