<template>
    <div>
        <div class="top-box flex-align">
            <div>
                <a-button type="primary" @click="_UserMessageDeleteList">删除</a-button>
            </div>
            <div class="flex">
                <a-select :default-value="''" style="width: 260px;margin-right:8px;" placeholder="选择类型"
                    @change="statusChange">
                    <a-select-option :key="''">全部</a-select-option>
                    <a-select-option :key="0">解析任务</a-select-option>
                    <a-select-option :key="1">生成任务</a-select-option>
                </a-select>
                <a-input-search style="width:400px;" placeholder="搜索学段" enter-button @search="onSearch" />
            </div>

        </div>
        <a-table :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :columns="columns"
            :loading="loading" :dataSource="data" size="small" :rowKey="record => record.id" :pagination="pagination"
            @change="handleChange">
            <template slot="isRead" slot-scope="text">
                <span :style="{'color':text?'green':'orange'}">{{text?'已读':'未读'}}</span>
            </template>
            <template slot="creationTime" slot-scope="text">
                {{text|sliceTime}}
            </template>
            <template slot="action" slot-scope="text,record">
                <a class="m-r8" @click="toDetails(record)">详情</a>
                <a @click="_UserMessageDelete(record)">删除</a>
            </template>
        </a-table>
    </div>
</template>
<script>
    const columns = [
        {
            title: "消息内容",
            dataIndex: "message",
            key: "message",
            scopedSlots: { customRender: "message" },
            ellipsis: true,
            width: 180
        },
        {
            title: "时间",
            dataIndex: "creationTime",
            key: "creationTime",
            scopedSlots: { customRender: "creationTime" },
            ellipsis: true,
            width: 100
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            width: 100,
            align: "center"
        },
    ]
    import { myPagination } from '@/mixins/myPagination.js'
    import { GetUserMessage, UserMessageDelete, UserMessageDeleteList } from '@/api/api'
    export default {
        mixins: [myPagination],
        components: {
        },
        data() {
            return {
                columns,
                loading: false,
                data: [],
                selectedRowKeys: [],
                KeyWisReadrd: '',
                KeyWord: '',
                MessageType: ''
            }
        },
        mounted() {
            this._GetUserMessage();
        },
        methods: {
            //删除消息（多个）
            _UserMessageDeleteList() {
                if (this.selectedRowKeys.length == 0) {
                    this.$message.error('请选择需要删除的消息!')
                    return;
                }
                let _this = this;
                this.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要这${_this.selectedRowKeys.length}条消息吗?`,
                    onOk() {
                        _this.loading = true;
                        let data = {
                            idList: _this.selectedRowKeys
                        }
                        UserMessageDeleteList(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._GetUserMessage();
                            _this.selectedRowKeys = [];
                            _this.loading = false;
                        }).catch(err => {
                            _this.loading = false;
                        })
                    }
                });
            },
            //删除消息（单个）
            _UserMessageDelete(record) {
                let _this = this;
                this.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要此条消息吗?`,
                    onOk() {
                        _this.loading = true;
                        let data = {
                            id: record.id
                        }
                        UserMessageDelete(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._GetUserMessage();
                            _this.loading = false;
                        }).catch(err => {
                            _this.loading = false;
                        })
                    }
                });
            },
            //消息列表
            _GetUserMessage() {
                this.loading = true;
                let data = {
                    KeyWord: this.KeyWord,
                    isRead: this.isRead,
                    MessageType: this.MessageType,
                    SkipCount: (this.pagination.current - 1) * this.pagination.pageSize,
                    MaxResultCount: this.pagination.pageSize,
                    isPreview: false
                }
                GetUserMessage(data).then(res => {
                    console.log(res, '消息列表')
                    this.data = res.items;
                    this.pagination.total = res.totalCount;
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                })
            },
            showModal(type, record = {}) {
                this.$refs.EditLearningSection.showModal(type, record)
            },
            onSearch(val) {
                this.KeyWord = val;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._GetUserMessage();
            },
            //表格选项选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            //表格change
            handleChange(pagination, filters, sorter) {
                const pager = { ...this.pagination };
                pager.current = pagination.current;
                this.pagination = pager;
                this._GetUserMessage();
            },
            toDetails(item) {
                console.log(item, 'item')
                switch (item.messageType) {
                    case 0: this.$router.push({
                        name: 'questionImportList'
                    })
                        break;
                    case 1: this.$router.push({
                        name: 'examPaperManage'
                    })
                        break;
                }
            },
            statusChange(value) {
                console.log(value)
                this.MessageType = value;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._GetUserMessage();
            },
        }
    }
</script>
<style scoped>
    .top-box {
        height: 64px;
        padding: 0 24px;
    }
</style>