<template>
    <div class="corporate-customers">
        <div class="full-page bg">
            <div class="search-box">
                <SuperSearch
                    :searchForm="queryParams"
                    :basisOption="basisOption"
                    @is-show-advance="advanced()"
                    @search="handleSearch"
                    @reset="loadData"
                />
            </div>
            <div class="main-table-container">
                <div class="table-container" style="padding: 20px">
                    <div
                        class="btn-box"
                        ref="btnPanel"
                        style="margin-bottom: 10px"
                    >
                        <el-button
                            icon="el-icon-s-claim"
                            type="warning"
                            plain
                            class="btn"
                            :disabled="!this.currentDataDel.length"
                            @click="markAsRead()"
                        >
                            标为已读
                        </el-button>
                        <el-button
                            icon="el-icon-delete"
                            type="danger"
                            plain
                            class="btn btn-delete"
                            :disabled="!this.currentDataDel.length"
                            @click="handleDelete()"
                        >
                            删除
                        </el-button>
                    </div>
                    <div class="table-content" ref="tableRef">
                        <el-table
                            stripe
                            v-loading="tableLoading"
                            element-loading-background="rgba(10 ,38 ,61, 0.9)"
                            :data="tableData"
                            row-key="id"
                            :max-height="tableMaxHeight"
                            class="table-list"
                            border
                            @selection-change="handleSelectionChange"
                            @sort-change="sortChange"
                        >
                            <el-table-column
                                reserve-selection
                                type="selection"
                                width="55"
                                align="center"
                            ></el-table-column>
                            <el-table-column
                                type="index"
                                width="70"
                                label="序号"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="subject"
                                sortable
                                show-overflow-tooltip
                                min-width="180"
                                align="center"
                                label="标题"
                            />
                            <el-table-column
                                prop="receiveTime"
                                show-overflow-tooltip
                                min-width="120"
                                align="center"
                                label="消息状态"
                            >
                                <template slot-scope="{row: {receiveTime}}">
                                    <el-tag
                                        v-if="receiveTime"
                                        type="warning"
                                        size="medium"
                                        >已读</el-tag
                                    >
                                    <el-tag v-else type="danger">未读</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="owner"
                                show-overflow-tooltip
                                sortable
                                min-width="120"
                                align="center"
                                label="发件人"
                            >
                            </el-table-column>
                            <el-table-column
                                v-if="tableData.some((i) => i.receiveTime)"
                                prop="receiveTime"
                                show-overflow-tooltip
                                align="center"
                                label="已读时间"
                                min-width="90"
                            />
                            <el-table-column
                                prop="createTime"
                                show-overflow-tooltip
                                align="center"
                                label="发信时间"
                                :min-width="
                                    tableData.some((i) => i.receiveTime)
                                        ? '90'
                                        : '180'
                                "
                            />
                            <el-table-column
                                show-overflow-tooltip
                                min-width="120"
                                align="center"
                                label="操作"
                            >
                                <template v-slot="{row}">
                                    <el-link
                                        v-if="!row.receiveTime"
                                        type="warning"
                                        :underline="false"
                                        style="margin-right: 15px"
                                        @click="markAsRead(row)"
                                    >
                                        标为已读
                                    </el-link>
                                    <el-link
                                        type="primary"
                                        :underline="false"
                                        style="margin-right: 15px"
                                        @click="showDialog('isShowDetail', row)"
                                    >
                                        详情
                                    </el-link>
                                    <el-link
                                        type="danger"
                                        :underline="false"
                                        style="margin-right: 15px"
                                        @click="handleDelete(row)"
                                    >
                                        删除
                                    </el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination
                            ref="paginationPanel"
                            style="margin-top: 10px"
                            :pageResult="queryParams"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </div>
        </div>

        <!--  详情弹层  -->
        <detail-dialog
            :isShowDetail.sync="isShowDetail"
            width="40%"
            title="消息通知"
            :rowInfo="rowInfo"
            @close-dialog="closeDetail"
        />
    </div>
</template>

<script>
import pagination from '../../components/SuperPagination'
import {TableMixin} from '@/mixins/tableMixin'
import SuperSearch from '@/components/SuperSearch/index.vue'
import {
    markMessage,
    messageReceiver,
    removeMessage,
} from '@/api/MessageReminder'
import DetailDialog from '@/views/MessageReminder/components/DetailDialog.vue'

export default {
    name: 'MessageReminder',
    components: {
        DetailDialog,
        SuperSearch,
        pagination,
    },
    mixins: [TableMixin],
    data() {
        return {
            isShowDetail: false,
            tableMaxHeight: '600px',
            loading: false,
            tableLoading: false,
            tableData: [],
            queryParams: {
                page: 1,
                pageSize: 20,
                total: 0,
                subject: '',
                receiveTime: '1',
            },
            sorter: [
                {
                    direction: 'ASC',
                    property: 'createTime',
                },
                {
                    direction: '',
                    property: 'subject',
                },
                {
                    direction: '',
                    property: 'owner',
                },
            ],
            currentDataDel: [],
            basisOption: [
                {
                    itemLabel: '消息状态',
                    itemProp: 'receiveTime',
                    itemType: 'newRadio',
                    searchType: 'basic',
                    labelWidth: '100px',
                    option: [
                        // {name: '全部消息', value: '0'},
                        {name: '未读', value: '1'},
                        {name: '已读', value: '2'},
                    ],
                },
                {
                    itemLabel: '标题',
                    itemProp: 'subject',
                    itemType: 'input',
                    labelWidth: '90px',
                    searchType: 'advance',
                },
            ],
            rowInfo: {},
        }
    },
    computed: {
        // 加工为后端需要的请求格式
        computedQuery() {
            const querys = [
                {
                    operation: 'EQUAL',
                    property: 'receiveTime',
                    relation: 'AND',
                    group: 'filterTime',
                },
                {
                    operation: 'LIKE',
                    property: 'subject',
                    relation: 'OR',
                    group: 'quick',
                },
            ]
            const {pageSize, page, ...item} = this.queryParams
            return {
                pageBean: {pageSize, page},
                querys: querys.flatMap((i) => {
                    const value = item[i.property]
                    if (Array.isArray(value) && !value.length) return []
                    if (value === '') return []
                    return {group: 'main', ...i, value}
                }),
                sorter: this.sorter.filter((i) => i.direction !== ''),
            }
        },
    },
    created() {
        this.loadData()
    },
    mounted() {},
    methods: {
        //获取数据
        async loadData() {
            this.tableLoading = true
            const {
                data: {rows, total},
            } = await messageReceiver(this.computedQuery)
            this.tableData = rows
            this.queryParams.total = total
            this.tableLoading = false
        },

        // 删除
        handleDelete(row) {
            this.$confirm('确定删除选中的消息吗？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    let ids = (row ? row.id : this.currentDataDel.join()) || ''
                    if (!ids) return
                    try {
                        const {
                            data: {state, message},
                        } = await removeMessage(ids)
                        if (state) {
                            this.queryParams.page = 1
                            await this.loadData()
                            this.$message.success(message)
                        } else {
                            this.$message.error(message)
                        }
                    } catch {
                        this.$message.error('删除消息失败')
                    }
                })
                .catch((_) => _)
        },

        // 标记为已读
        markAsRead(row) {
            this.$confirm('确定标记选中的消息为已读状态吗？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    let ids = (row ? row.id : this.currentDataDel.join()) || ''
                    if (!ids) return
                    try {
                        const {
                            data: {state, message},
                        } = await markMessage(ids)
                        if (state) {
                            await this.loadData()
                            this.$message.success(message)
                        } else {
                            this.$message.error(message)
                        }
                    } catch {
                        this.$message.error('标记失败')
                    }
                })
                .catch((_) => _)
        },
        advanced() {},

        // 顶部搜索
        handleSearch() {
            this.loadData()
        },

        //表格选中
        handleSelectionChange(val) {
            console.log(val)
            this.currentDataDel = val.flatMap((item) =>
                item.id ? item.id : []
            )
        },

        //分页页数
        handleCurrentChange(page) {
            this.queryParams.page = page
            this.loadData()
        },

        //分页大小
        handleSizeChange(pageSize) {
            this.queryParams.pageSize = pageSize
            this.loadData()
        },

        // 排序切换
        sortChange({prop: property, order}) {
            let direction = ''
            switch (order) {
                case 'ascending':
                    direction = 'ASC'
                    break
                case 'descending':
                    direction = 'DESC'
                    break
            }
            this.sorter.forEach((i) => {
                if (i.property !== property) return (i.direction = '')
                i.direction = direction
            })
            this.loadData()
        },

        // 展示弹层
        showDialog(dialog, rowInfo = {}) {
            this[dialog] = true
            this.rowInfo = rowInfo // 保存点击行信息
        },

        //  关闭详情弹层
        closeDetail() {
            if (!this.rowInfo.receiveTime) {
                this.queryParams.page = 1
                this.loadData()
            }
        },
    },
    beforeDestroy() {},
}
</script>

<style lang="scss" scoped>
@import "~@/assets/css/element-variables";

.search-box {
  //height: 350px;
  padding: 20px;
  transition: all 1s;
  border-radius: 8px;
  background-color: $--system-module-color1;
}
.corporate-customers .full-page .main-table-container .table-content{
    height: calc(100% - 50px);
}

</style>
