<template>
    <div class="ddkzConfigList">
        <div class="ddkzCondition">
            <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-select style="margin-left: 10px;" v-model="form.status" placeholder="请选择演习状态" clearable>
                <el-option v-for="item in exerciseList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-input class="myInput" v-model="form.keyword"></el-input>
            <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 type="index" width="60" label="序号" align="center"></el-table-column>
                <el-table-column prop="nickname" label="主题" align="center"></el-table-column>
                <el-table-column prop="conRemark" label="演习内容" align="center"></el-table-column>
                <el-table-column prop="createTime" label="演习结果" align="center"></el-table-column>
                <el-table-column prop="status.name" label="演习状态" align="center"></el-table-column>
                <el-table-column prop="createTime" label="开始时间" align="center"></el-table-column>
                <el-table-column prop="result" label="演习结果" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="300">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status.value !== 'ONGOING'" size="mini" type="danger"
                            @click="deleteExercise(scope.row)">删除</el-button>
                        <el-button v-if="scope.row.status.value == 'CREATED' && scope.row.teamInfo.teamType == 'DIRECTOR'" size="mini" type="success"
                            @click="startExercise(scope.row)">启动</el-button>
                        <el-button v-if="scope.row.status.value == 'ONGOING' && scope.row.teamInfo.teamType == 'DIRECTOR'" size="mini" type="warning"
                            @click="stopExercise(scope.row)">结束</el-button>
                        <el-button v-if="scope.row.status.value == 'CREATED'"  size="mini" type="primary"  @click="configExercise(scope.row)">配置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <DdkzConfigExercise ref="myConfigExercise" :currentExercise="myCurrentExercise"></DdkzConfigExercise>
    </div>
</template>

<script>
import { getChatRoomList, startExercise, stopExercise, removeExercise } from "@/api/chat/chatRoom";
import ddkzConfigExercise from "@/view/sjgl/ddkzConfig/ddkzConfigExercise.vue";
export default {
    data() {
        return {
            form: {
                dateRange: [],
                status: null,
                keyword: null
            },

            meetingList: [],
            exerciseList: [{ label: '待开始', value: 'CREATED' }, { label: '进行中', value: 'ONGOING' }, { label: '已结束', value: 'CLOSED' }],
            myCurrentExercise:{}
        }
    },
    components: {
        DdkzConfigExercise: ddkzConfigExercise
    },
    methods: {
        handleSelectionChange() { },
        //删除演习
        deleteExercise(item) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeExercise(item.id).then(res => {
                    if (res == 1) {
                        this.$message.success('删除演习成功！');
                        this.searchChatList();
                    }
                }).catch(error => {
                    this.$message.error(error.message);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //启动演习
        startExercise(item) {
            startExercise(item.id).then(res => {
                if (res == 1) {
                    this.$message.success('启动成功！');
                    this.searchChatList();
                }
            }).catch(error => {
                this.$message.error(error.message);
            });
        },
        //结束演习
        stopExercise(item) {
            this.$prompt('请输入演习结果', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputType: 'textarea'
            }).then(({ value }) => {
                let params = {
                    chatRoomId: item.id,
                    result: value
                };
                stopExercise(params).then(res => {
                    if (res == 1) {
                        this.$message.success('此演习结束！');
                        this.searchChatList();
                    }
                }).catch(error => {
                    this.$message.error(error.message);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });

        },
        queryChatRoomListFn(param) {
            getChatRoomList(param).then(res => {
                this.meetingList = res;
            });
        },
        searchChatList() {
            if (this.form.dateRange.length == 2) {
                this.queryChatRoomListFn({ startTime: this.form.dateRange[0], endTime: this.form.dateRange[1], userId: this.userInfo.account, status: this.form.status == '' ? null : this.form.status, keyword: this.form.keyword == '' ? null : this.form.keyword })
            } else {
                this.queryChatRoomListFn({ userId: this.userInfo.account, status: this.form.status == '' ? null : this.form.status, keyword: this.form.keyword == '' ? null : this.form.keyword })
            }
        },
        //配置演习
        configExercise(item){
            this.$nextTick(() => {
                this.$refs.myConfigExercise.showDialog();
            })
            this.myCurrentExercise = item;
        }
    },
    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 {
            float: left;
            width: 200px;
            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;
        }
    }

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