<template>
    <div class="ddkzConfigList">
        <div class="ddkzCondition">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="dateRange" type="daterange" range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
            <div class="searchButton" @click="searchChatList">搜索</div>
        </div>
        <div class="ddkzContent">
            <el-table :data="meetingList" tooltip-effect="dark" style="width: 100%;" height="calc(100% - 60px)"
                @selection-change="handleSelectionChange">
                <!-- <el-table-column type="selection" width="55">
                </el-table-column> -->
                <el-table-column prop="nickname" label="主题" align="center"></el-table-column>
                <el-table-column prop="chatroomOwner" 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="danger" @click="deleteMeeting(scope.row)">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
    </div>
</template>

<script>
import { getChatRoomList } from "@/api/chat/chatRoom";
export default {
    data() {
        return {
            dateRange: [],
            meetingList: []
        }
    },
    methods: {
        handleSelectionChange() { },
        deleteMeeting(item) { },
        queryChatRoomListFn(param) {
            getChatRoomList(param).then(res => {
                this.meetingList = res;
            });
        },
        searchChatList(){
            if(this.dateRange.length==2){
                this.queryChatRoomListFn({startTime:this.dateRange[0],endTime:this.dateRange[1],userId:this.userInfo.account})
            }else{
                this.queryChatRoomListFn({userId:this.userInfo.account})
            }
        }
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    mounted() {
        this.queryChatRoomListFn({userId:this.userInfo.account});
    }
}
</script>

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

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

        .el-date-editor {
            background: none;

            span {
                color: white;
            }

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

        .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;
        }
    }

    .ddkzContent {
        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;
            }
        }
    }
}
</style>