<template>
    <div class="yxsp">
        <div class="yxspCondition">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="form.dateRange" type="daterange" range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
            <el-input  v-model="form.chatRoomName" placeholder="请输入聊天室名称" clearable></el-input>
            <el-select style="margin-left: 10px;" v-model="form.status" placeholder="请选择审批状态" clearable>
                <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <div class="searchButton" @click="searchChatList">搜索</div>
        </div>
        <div class="yxspContent">
            <el-table :data="meetingList" tooltip-effect="dark" style="width: 100%;" height="calc(100% - 60px)">
                <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
                <el-table-column prop="chatRoomInfo.nickname" label="演习标题" align="center"></el-table-column>
                <el-table-column prop="teamInfo.teamName" label="演习方" align="center"></el-table-column>
                <el-table-column prop="title" label="发送标题" align="center"></el-table-column>
                <el-table-column prop="content" label="发送内容" align="center"></el-table-column>
                <el-table-column prop="remark" label="发送附件" align="center"></el-table-column>
                <el-table-column prop="createTime" label="开始时间" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="500">
                    <template slot-scope="scope">
                        <!-- <el-button size="mini" type="primary">详情</ el-button> -->
                        <el-button v-if="(scope.row.messageStatus?scope.row.messageStatus.value:null) == 'PENDING_APPROVAL'" size="mini" type="success"
                            @click="passNotice(scope.row)">同意</el-button>
                        <el-button v-if="(scope.row.messageStatus?scope.row.messageStatus.value:null) == 'PENDING_APPROVAL'" size="mini" type="danger"
                            @click="rejectNotice(scope.row)">驳回</el-button>
                        <el-tag v-if="(scope.row.messageStatus?scope.row.messageStatus.value:null) == 'PASS'" type="success" effect="dark">已通过</el-tag>
                        <el-tag v-if="(scope.row.messageStatus?scope.row.messageStatus.value:null) == 'REFUSE'" type="danger" effect="dark">未通过</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-div">
                <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                    :current-page="pageObj.currentPage" :total="pageObj.total" @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" :page-size="pageObj.everySize" :page-sizes="[10, 20, 50, 100]">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { getApprovalPending } from '@/api/chat/chatApproval';
import { updateStatus } from '@/api/chat/chatRecords';
import { getTime_extent } from '@/util/http_util.js';
export default {
    data() {
        return {
            form: {
                dateRange: [],
                chatRoomName: null,
                status: null
            },
            stateList: [
                { label: '已同意', value: 'PASS' },
                { label: '已拒绝', value: 'REFUSE' },
                { label: '待审批', value: 'PENDING_APPROVAL' },
            ],
            meetingList: [],
            pageObj: {
                currentPage: 1,
                everySize: 10,
                total: 0
            }
        }
    },
    methods: {
        rejectNotice(item) {
            updateStatus(item.id, 'REFUSE').then(res => {
                this.$message.success(res);
                this.searchChatList();
            }).catch(error => {
                this.$message.error(error);
            })
        },
        passNotice(item) {
            updateStatus(item.id, 'PASS').then(res => {
                this.$message.success(res);
                this.searchChatList();
            }).catch(error => {
                this.$message.error(error);
            })
        },
        searchChatList() {
            if (this.form.dateRange.length == 2) {
                this.getApprovalPendingFn(this.form.chatRoomName, this.pageObj.currentPage, this.pageObj.pageSize, this.form.dateRange[0], this.form.dateRange[1], this.userInfo.account, this.form.status);
            } else {
                this.getApprovalPendingFn(this.form.chatRoomName, this.pageObj.currentPage, this.pageObj.pageSize, null, null, this.userInfo.account, this.form.status);
            }
        },
        getApprovalPendingFn(...params) {
            getApprovalPending(...params).then(res => {
                this.meetingList = res.records;
                this.pageObj.currentPage = res.currentPage;
                this.pageObj.pageSize = res.pageSize;
                this.pageObj.total = res.total;
            }).catch(error => {
                this.$message.error(error.message);
            })
        },
        handleCurrentChange(currentPage) {
            this.pageObj.currentPage = currentPage;
            this.searchChatList();

        },
        handleSizeChange(pageSize) {
            this.pageObj.everySize = pageSize;
            this.searchChatList();
        },

    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    mounted() {
        this.getApprovalPendingFn(null, this.pageObj.currentPage, this.pageObj.pageSize, this.form.dateRange.length > 0 ? this.form.dateRange[0] : null, this.form.dateRange.length > 0 ? this.form.dateRange[1] : null, this.userInfo.account, null);
    }
}
</script>

<style lang="scss">
.yxsp {
    width: 100%;
    height: 100%;

    .yxspCondition {
        width: 100%;
        height: 80px;
        display: flex;

        .el-date-editor {
            background: none;

            span {
                color: white;
            }

            .el-range-input {
                color: white;
                background: none;
            }
        }

        .el-input {
            float: left;
            width: 200px;
            height: 40px;
            margin-left: 10px;

            .el-input__inner {
                background: none;
                color: #ffff;
                border: 1px solid #3a5f94c9 !important;
            }
        }

        .el-input__inner {
            border: 1px solid #3a5f94c9 !important;
        }

        .searchButton {
            width: 80px;
            height: 30px;
            line-height: 30px;
            margin-top: 4px;
            margin-left: 20px;
            font-size: 14px;
            text-align: center;
            // background-image: url(../../../assets/img/fzjc/7.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border: 1px solid #3a5f94c9 !important;
            border-radius: 5px;
            cursor: pointer;
        }
    }

    .yxspContent {
        width: 100%;
        height: calc(100% - 50px);
        overflow-y: auto;

        .el-table tr {
            background-color: transparent !important;
            color: #ffffffc7;
        }

        .el-table thead tr {
            height: 40px;
            background: url(../../../assets/img/setting/tr1.png) no-repeat;
            background-size: 100% 100%;
        }

        .el-table th {
            background-color: transparent;
        }

        tbody tr {
            border-bottom: 1px solid #252631;
        }

        .el-table td {
            border-bottom: 1px solid #252631;
            border-right: unset;
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #82848a78;
        }

        .el-table th {
            border: unset;
        }

        .el-table--fit {
            background: none !important;
            border: unset;
        }

        .el-icon-delete-solid {
            color: red;
            cursor: pointer;
            font-size: 18px;
        }

        .el-icon-edit {
            color: #1172d8;
            cursor: pointer;
            font-size: 20px;
        }

        .el-icon-view {
            color: #00ffff;
            font-size: 20px;
            cursor: pointer;
        }

        .el-table--group::after,
        .el-table--border::after,
        .el-table::before {
            background-color: unset;
        }

        .pagination-div {
            width: 100%;
            height: 50px;

            .el-pagination {
                margin-top: 9px;
                text-align: right;

                .el-pagination__total {
                    color: white;
                }

                .el-pagination__jump {
                    color: white;
                }
            }

            .myPagination.is-background .el-pager li:not(.disabled).active {
                color: #fff;
                border: 1px solid #146a80;
                box-shadow: 0 0 10px #1b6097;
                background-color: #1d2d46;
            }

            .el-input--suffix .el-input__inner{
                height: 28px;
            }
        }
    }
}
</style>