<template>
    <div class="fullheight">
        <ht-table
            @load="loadData"
            :data="data"
            :pageResult="pageResult"
            :selection="true"
            :quick-search-props="[{prop: 'subject', label: '标题'}]"
            :show-export="false"
            :show-custom-column="false"
            ref="htTable"
            @row-click="rowClick"
            @select="selectd"
        >
            <template v-slot:toolbar>
                <el-select
                    v-model="value"
                    size="mini"
                    @change="changes"
                    style="
                        padding-right: 10px;
                        width: 150px;
                        border-radius: 5px;
                    "
                >
                    <el-option
                        style="border-radius: 5px"
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-button-group>
                    <el-button
                        size="small"
                        @click="Markread()"
                        type="warning"
                        style="border-radius: 5px"
                        v-prevent-click
                        >标记为已读</el-button
                    >
                    <ht-delete-button
                        url="${uc}/msg/messageReceiver/v1/remove"
                        :htTable="$refs.htTable"
                        >删除</ht-delete-button
                    >
                </el-button-group>
            </template>
            <template>
                <ht-table-column
                    type="index"
                    width="50"
                    align="center"
                    label="序号"
                />
                <ht-table-column
                    prop="subject"
                    label="标题"
                    :sortable="true"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="{row}">
                        <el-link
                            type="primary"
                            @click="showDialog(row)"
                            title="查看详情"
                            >{{ row.subject }}</el-link
                        >
                    </template>
                </ht-table-column>
                <ht-table-column
                    prop="userConfigType"
                    label="消息状态"
                    width="120"
                    :filters="[
                        {text: '已读', value: 2},
                        {text: '未读', value: 1},
                    ]"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.receiveTime">
                            <el-tag type="warning">已读</el-tag>
                        </span>
                        <span v-else>
                            <el-tag type="success">未读</el-tag>
                        </span>
                    </template>
                </ht-table-column>
                <ht-table-column
                    prop="owner"
                    label="发信人"
                    :sortable="true"
                    :show-overflow-tooltip="true"
                >
                </ht-table-column>
                <ht-table-column prop="createTime" label="发信时间">
                </ht-table-column>
            </template>
        </ht-table>
        <message-info ref="messageDialog" @close="handleClose"></message-info>
    </div>
</template>
<script>
import MessageInfo from '@/components/message/MessageInfo'
import uc from '@/api/uc.js'
export default {
    components: {
        MessageInfo
    },
    data() {
        return {
            relationDialogVisible: false,
            data: [],
            options: [
                {
                    value: '0',
                    label: '全部消息',
                },
                {
                    value: '1',
                    label: '未读',
                },
                {
                    value: '2',
                    label: '已读',
                },
            ],
            value: '1',
            pageResult: {
                page: 1,
                pageSize: 50,
                total: 0,
            },
            filterQuery: {
                property: 'receiveTime',
                value: 1, //1是未读，2是已读，0是全部
                operation: 'EQUAL',
                relation: 'AND',
                group: 'filterTime',
            },
            title: '',
            sendpeople: '',
            sendtime: '',
            content: '',
            checkBoxData: [],
            messageInfo: {},
            activeRow: {},
        }
    },
    mounted() {
        this.$validator = this.$root.$validator
    },
    methods: {
        rowClick(row, column, event) {
            this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
        },
        showDialog(row) {
            let _self = this
            this.activeRow = row
            this.$http
                .get('${uc}/msg/messageReceiver/v1/get?id=' + row.id)
                .then((res) => {
                    if(res.data){
                        this.$refs.messageDialog.open(res.data)
                    }
                    if (!row.receiveTime) {
                        uc.messageMark(row.id).then(() => {})
                    }
                })
        },
        loadData(param, cb) {
            let paramCopy = {}
            if (param && param.querys && param.querys.length) {
                param.querys.push(this.filterQuery)
            } else if (param) {
                param.querys = [this.filterQuery]
            } else if (!param) {
                paramCopy.querys = [this.filterQuery]
                paramCopy.pageBean = this.pageResult
            }
            this.$http
                .post(
                    '${uc}/msg/messageReceiver/v1/list',
                    paramCopy.querys ? paramCopy : param
                )
                .then(
                    (resp) => {
                        let response = resp.data
                        this.data = response.rows
                        this.pageResult = {
                            page: response.page,
                            pageSize: response.pageSize,
                            total: response.total,
                        }
                    },
                    (error) => {
                        reject(error)
                    }
                )
                .finally(() => {
                    if (cb) {
                        cb()
                    }
                })
        },
        selectd() {
            this.checkBoxData = this.$refs.htTable.selection
        },
        Markread() {
            var ids = []
            if (this.checkBoxData && this.checkBoxData.length > 0) {
                for (let index = 0; index < this.checkBoxData.length; index++) {
                    ids.push(this.checkBoxData[index].id)
                }
            }
            if (ids.length > 0) {
                uc.messageMark(ids).then((res) => {
                    this.$message({
                        message: '标记成功',
                        type: 'success',
                    })
                    this.loadData()
                })
            } else {
                this.$message({
                    message: '请选择要标记的数据',
                    type: 'warning',
                })
            }
        }, //标记为已读
        changes(value) {
            if (value == 1) {
                this.filterQuery.value = 1
            } else if (value == 2) {
                this.filterQuery.value = 2
            } else if (value == 0) {
                this.filterQuery.value = 0
            }
            let param = {
                pageBean: {
                    page: 1,
                    pageSize: 50,
                    total: 0,
                },
                querys: [this.filterQuery],
            }
            this.loadData(param)
        }, //选择未读/已读
        handleClose() {
            if (!this.activeRow.receiveTime) {
                this.loadData()
            }
        },
    },
}
</script>

<style lang="scss" scoped>
>>> .el-dialog__body {
    padding-top: 0px;
}
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
    height: calc(100% - 170px);
}

// /deep/ .el-input__inner {
//   border-radius: 5px;
// }
// .dialogbox {
//   display: flex;
//   align-items: center;
//   margin-bottom: 18px;
//   .dialogfir {
//     width: 100px;
//     margin-right: 10px;
//     font-size: 14px;
//     line-height: 32px;
//     text-align: right;
//   }
//   p {
//     margin-top: 20px;
//     max-height: 300px;
//     overflow: auto;
//     width: calc(100% - 10px);
//   }
// }
/deep/.box {
    margin-left: 20px;
    .title {
        display: flex;
        align-items: center;
        padding: 5px 0;
        margin-bottom: 5px;
        div {
            font-size: 14px;
        }
    }
    .content {
        display: flex;
        align-items: center;
        padding: 5px 0;
        font-size: 16px;
        div {
            font-size: 14px;
        }
    }
    .info {
        display: flex;
        align-items: center;
        padding: 5px 0;
        font-size: 16px;
        div {
            font-size: 14px;
        }
        p {
            margin-top: 10px;
            font-size: 14px;
        }
    }
}
</style>
