<template>
    <div class="box">
        <div class="condition">
            <div class="main" :style="tableData && tableData.length ? 'height: calc(100% - 50px);' : 'height: calc(100% - 46px);'">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    v-loading="loading"
                    stripe
                    height="100%"
                    :header-cell-style="headerStyle"
                    @expand-change="changeMessageState"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column width="25">
                        <template slot-scope="scope">
                            <el-badge class="item" type="warning" is-dot v-if="!scope.row.read"></el-badge>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题内容" min-width="300" show-overflow-tooltip></el-table-column>
                    <el-table-column label="项目">
                        <template slot-scope="scope">
                            {{ scope.row.project[0].localName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="模块" width="200">
                        <template slot-scope="scope">
                            {{ moduleMap[scope.row.module] ? moduleMap[scope.row.module] : scope.row.module }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="消息时间"> </el-table-column>
                    <el-table-column label="消息类型">
                        <template slot-scope="scope">
                            <div>
                                <i
                                    :class="iconClassMap[scope.row.type] ? iconClassMap[scope.row.type] : 'msg-icon el-icon-warning warning-color'"
                                    style="font-size: 14px"
                                ></i>
                                <span>{{ typeMap[scope.row.type] ? typeMap[scope.row.type] : scope.row.type }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column type="expand">
                        <template slot-scope="scope">
                            <p>{{ scope.row.content.message }}</p>
                            <el-link
                                v-for="(btn, index) in scope.row.content.buttonList"
                                style="float: left; font-size: 12px; color: white"
                                :key="index"
                                :href="`/image-service/common/file_get?systemId=revit&key=${btn.url}`"
                                :download="btn.fileName ? btn.fileName : ''"
                            >
                                {{ btn.name }}
                            </el-link>
                        </template>
                    </el-table-column>
                    <template slot="empty">
                        <div style="height: 60%; transform: translateY(50%)">
                            <i class="icon-wushuju iconfont"></i>
                            暂无数据
                        </div>
                    </template>
                </el-table>
            </div>
            <el-pagination
                class="right"
                v-show="tableData && tableData.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNumber"
                :page-sizes="page.pageSizes"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { messgeQuery, messgeUpdate } from "@/api/messagecenter";
import { Component, Vue } from "vue-property-decorator";
import Bus from "@/utils/bus.ts";
import { UserModule } from "@/store/modules/user";

@Component({
    name: "MsgAllDetails",
    components: {},
})
export default class extends Vue {
    // 消息数据
    private tableData: any[] = [];
    // loading标识
    private loading = false;
    // 分页配置
    private page = {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0,
    };
    // 列表样式
    private headerStyle = {
        backgroundColor: "#e1e4e5",
        color: "#2b2b2b",
        lineHeight: "30px",
    };
    // 消息模块映射
    private moduleMap = {
        Model: "模型文件管理",
    };
    // 消息类型图标映射
    private iconClassMap = {
        Success: "msg-icon el-icon-success success-color",
        Error: "msg-icon el-icon-error error-color",
        Warning: "msg-icon el-icon-warning warning-color",
        Info: "msg-icon el-icon-info info-color",
    };
    // 消息类型文字映射
    private typeMap = {
        Success: "成功",
        Error: "错误",
        Warning: "警告",
        Info: "提醒",
    };

    get userId(): string {
        return UserModule.userId;
    }

    mounted() {
        this.getTableData();
    }

    /**
     * 获取列表数据
     */
    private async getTableData() {
        let params = {
            cascade: [
                {
                    name: "project",
                },
            ],
            filters: `userId='${this.userId}';type!='Refresh'`,
            orders: "createTime desc, id asc",
            pageNumber: this.page.pageNumber,
            pageSize: this.page.pageSize,
        };
        this.loading = true;
        const res = await messgeQuery(params);
        if (res.result === "success") {
            this.tableData = res.content;
            this.page.total = res.total;
            this.loading = false;
        }
    }

    /**
     * 切换每页显示数量
     */
    private handleSizeChange(val: number) {
        this.page.pageSize = val;
        this.getTableData();
    }

    /**
     * 切换页码
     */
    private handleCurrentChange(val: number) {
        this.page.pageNumber = val;
        this.getTableData();
    }

    /**
     * 更新消息状态：已读、未读
     */
    private async changeMessageState(val: any) {
        if (!val.Read) {
            val.Read = true;
            const params = {
                content: [
                    {
                        id: val.id,
                        read: true,
                    },
                ],
            };
            const res = await messgeUpdate(params);
            // 展开更新为已读状态,未读数量同步变更
            if (res.result === "success") Bus.$emit("getUnreadCountUpdate");
        }
    }
}
</script>

<style scoped lang='scss'>
.box {
    height: 100%;
    .condition {
        padding: 10px;
        display: flex;
        height: 100%;
        flex-direction: column;
        border: 1px solid #dfe6ec;
        background: #fff;

        .main {
            margin-top: 10px;

            a {
                text-decoration: none;
            }
        }

        .right {
            text-align: right;
            margin-top: 10px;
        }
    }
}

.el-badge.item {
    height: 10px;
}

.el-table__expanded-cell {
    p {
        margin-left: 40px;
    }
}

.el-link {
    margin: 20px 0 0 40px;
    background: #409eff;
    border-radius: 3px;
    padding: 3px 15px;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 120px;
    width: 100%;
}

.success-color {
    color: #67c23a;
}

.error-color {
    color: #f56c6c;
}

.warning-color {
    color: #e6a23c;
}

.info-color {
    color: #909399;
}
</style>
