<template>
    <el-container class="home">
        <el-header class="home-header">
            <div class="button-list-left">
                <div v-for="(item, index) in modules.leftModule"
                    :class="['module-info', isSelected == index ? 'selectedModule' : '']" @click="choiceModule(index)"
                    v-text="item.name">
                </div>
            </div>
            <div class="button-list-right">
                <div v-for="(item, index) in modules.rightModule"
                    :class="['module-info', isSelected - 3 == index ? 'selectedModule' : '']" @click="choiceModule(index + 3)"
                    v-text="item.name">
                </div>
            </div>
            <h1><span>东部战区心理战训练系统</span></h1>
            <div class="home-date">
                <span class="date" v-text="myDate.day"></span>&emsp;&emsp;
                <span class="week" v-text="myDate.week"></span>
            </div>
            <div class="top-nav3">
                <div class="top-nav3-content">
                    <div class="top-nav3-content-user" @click="dialogVisible = true;">
                        <i class="el-icon-user-solid"></i><span v-text="userInfo.username"></span>
                    </div>
                    <!-- <div class="top-nav3-content-user" v-if="noteNum > 0">
                        <a @click="queryNotification()" class="nav-link">
                            <div class="nav-counter nav-counter-red" v-text="noteNum"></div>
                        </a>
                    </div> -->
                    &emsp;
                    <el-dropdown @command="handleCommand" style="float: left;margin-top:10px;margin-left: 10px;">
                        <span class="el-dropdown-link">
                            <i class="el-icon-more setting_button"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="hide-drop">
                            <el-dropdown-item v-for="(item, index) in manager_module_backstage" v-text="item.name"
                                :command="item.name" :key="index"></el-dropdown-item>
                            <el-dropdown-item command="修改密码">修改密码</el-dropdown-item>
                            <el-dropdown-item command="安全退出">安全退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- <div class="search-div" v-show="manager_module_search_qz.length > 0"><i class="el-icon-search"
                            :title="manager_module_search_qz.length > 0 ? manager_module_search_qz[0].name : ''"
                            @click="search(manager_module_search_qz.length > 0 ? manager_module_search_qz[0].path : '')"></i>
                    </div> -->
                </div>
                &emsp;
            </div>

        </el-header>
        <el-main class="home-content">
            <router-view></router-view>
        </el-main>
        <!-- 修改密码弹框 -->
        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="21%" center :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="130px">
                <el-form-item label="原密码">
                    <el-input v-model="form.oldPwd"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="form.newPwd"></el-input>
                </el-form-item>
                <el-form-item label="再次输入新密码">
                    <el-input v-model="form.definePwd"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="editPassword">确 定</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<script>
import "../assets/css/home.css";
// import jh_bg from "../assets/img/main/logo-bg.png";
// import jh from "/static/img/main/logo.png";
import { endLoading, get, post } from "../util/http_util";
import { queryDictItem } from '../api/dictitem';
import Push from 'push.js'
import dayjs from 'dayjs';

export default {
    name: "home",
    data() {
        return {
            // jh_bg: jh_bg,
            // jh: jh,
            // activeIndex: "1",
            manager_module: [],
            manager_module_backstage: [],
            manager_module_search_qz: [],
            index: 0,
            visualizingIndex: 0,
            imgList: [],
            dialogVisible: false,
            form: {
                oldPwd: '',
                newPwd: '',
                definePwd: ''
            },
            title_top: '',
            title_bottom: '',
            marquees_txt: '',
            new_id: '',
            modules: {
                leftModule: [
                    { id: 1, title: '目标对象库', eg: 'Target Object Library' },
                    { id: 2, title: '战法策略库', eg: 'Method Strategy Library' },
                    { id: 3, title: '信息制品库', eg: 'Infomation product Library' },
                ],
                rightModule: [
                    { id: 4, title: '导调控制模块', eg: 'Pilot Control Module' },
                    { id: 5, title: '学习训练模块', eg: 'Learning And Training Module' },
                    { id: 6, title: '新技术实验模块', eg: 'New Technology Experiment Module' },
                ],
            },
            isSelected: 0,
            myDate:{
                day:null,
                week:null
            }
        };
    },
    methods: {
        search(path) {
            this.$store.commit("activeIndex", "0");
            this.$router.push(path);
        },
        handleSelect(key, keyPath) {
            if (key != (this.visualizingIndex + 1).toString()) {
                this.index = key - 1;
                this.$router.push(this.manager_module[this.index].path);
                // this.activeIndex = key + "";
                this.$store.commit("activeIndex", key + "");
            } else {
                // window.open('#/visualizing');
            }
        },
        handleCommand(command) {
            // this.activeIndex = "0";
            this.$store.commit("activeIndex", "-1");
            if (command == '用户管理') {
                this.$router.push("user");
            } else if (command == '数据管理') {
                this.$router.push("sjgl");
            } else if (command == "安全退出") {
                post("api/rest/system/user/logout", this.userInfo.account)
                    .then(res => { });
                sessionStorage.setItem("isLogin", false);
                //reload已经清除vuex中内容
                // this.$store.dispatch("setUserInfo", null);
                // this.$store.dispatch("close");
                // this.$store.commit("navList", []);
                this.$router.replace({ path: "/login" });
                setTimeout(() => {
                    location.reload(true);
                }, 500);

            } else if (command == '收藏夹') {
                this.$router.push("bookMark");
            } else if (command == '日志管理') {
                this.$router.push("countfileupload");
            } else if (command == '消息') {
                this.$router.push("xx");
            } else if (command == '修改密码') {
                this.dialogVisible = true;
            }
        },
        handleClose(key, keyPath) { },
        show_zd() {
            this.$router.push("zyzdy");
            // this.activeIndex = "0";
            this.$store.commit("activeIndex", "0");
        },
        handleClose(done) {
            done();
        },
        //修改个人密码
        editPassword() {
            if (this.form.oldPwd.length != '' && this.form.newPwd.length != '' && this.form.definePwd != '') {
                if (this.form.newPwd == this.form.definePwd) {
                    get(`api/rest/system/user/updatePassword?oldPassword=${this.form.oldPwd}&newPassword=${this.form.newPwd}&account=${this.userInfo.account}`).then(res => {
                        if (res == 1) {
                            this.$message.success('密码修改成功！');
                            this.dialogVisible = false;
                        } else {
                            this.$message.error('密码修改失败！');
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                    });
                } else {
                    this.$message.warning('两次密码不一致！');
                }

            } else {
                this.$message.warning('旧密码和新密码都不能为空！');
            }
        },
        queryNotification() {
            this.$router.push("xx");
            // this.activeIndex = "0";
            this.$store.commit("activeIndex", "0");
        },
        new_xq() {
            if (this.marquees_txt != '') {
                this.$router.push({ name: "新闻详情" + this.$route.meta.type_name, params: { key: this.new_id } });
                this.marquees_txt = '';
            }
        },
        choiceModule(index) {
            this.isSelected = index;
            if (index != this.visualizingIndex.toString()) {
                this.index = index;
                this.$router.push(this.manager_module[this.index].path);
                // this.activeIndex = key + "";
                this.$store.commit("activeIndex", index + "");
            } else {
                // window.open('#/visualizing');
            }
        }
    },
    mounted() {
        let arr = this.$store.state.navList[0].children.filter((e) => e.path == '/sjgl');
        this.$store.state.navList[0].children.forEach((item) => {
            if (item.children.length > 0) {
                item.children.forEach((items) => {
                    if (arr.length > 0) {
                        items.meta.gly = true
                    } else {
                        items.meta.gly = false
                    }
                    items.meta.type_name = "_" + item.name;
                })
            }
        });
        this.manager_module = this.$store.state.navList[0].children.filter(
            (e) => e.meta.type == "1"
        );
        this.modules.leftModule = this.manager_module.slice(0, 3);
        this.modules.rightModule = this.manager_module.slice(3, 6);
        this.$store.commit("homeModule", this.manager_module);
        this.visualizingIndex = this.manager_module.length;
        this.manager_module_backstage = this.$store.state.navList[0].children.filter(
            (e) => e.meta.type == "0"
        );
        this.manager_module_search_qz = this.$store.state.navList[0].children.filter(
            (e) => e.meta.type == "3"
        );
        if (this.$store.state.navList[0].children.length == 0) {
            this.$message.warning("请联系管理员配置角色权限！");
        }
        //标题获取
        // queryDictItem('06').then(item => {
        //     if (item.length == 2) {
        //         this.title_top = item[0].name;
        //         this.title_bottom = item[1].name;
        //     } else {
        //         this.title_top = "XXXXXXXXXXXXXXXXXXX";
        //         this.title_bottom = "XXXXXXXXXXXX";
        //     }
        // });
        this.isSelected = this.activeIndex;
        this.choiceModule(this.activeIndex);

        //获取时间
        this.myDate.day = dayjs().format('YYYY年MM月DD日');
        const weekList = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        this.myDate.week = weekList[dayjs().get('day')]
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { username: "" };
            }
        },
        wsMessages() {
            return this.$store.getters.wsMessages;
        },
        noteNum() {
            return this.$store.getters.noteNum;
        },
        activeIndex() {
            return this.$store.getters.activeIndex;
        }
    },
    created() {
        //用于页面刷新
        this.$router.replace("/").then(() => {
            // endLoading();
        }).catch(err => {
            console.log(err);
        });
        //ws创建
        // this.$store.dispatch("initWebsocket");
        //获取通知消息数量
        // get("api/rest/system/user/countNotification?account=" + this.userInfo.account)
        //     .then(res => {
        //         this.$store.commit("noteNum", res);
        //     })
        //     .catch(err => {
        //         this.$message.warning(err.message);
        //     });
        // Push.Permission.request();
    },
    watch: {
        wsMessages(newVal, oldVal) {
            let _this = this;
            this.$store.commit("noteNum", this.noteNum + 1);
            let msg = JSON.parse(newVal);
            if (msg instanceof Array && msg.length >= 1) {
                msg = msg[1];
            }
            _this.new_id = msg.metadata[1].Id;

            if (msg.way == 'LED') {
                this.marquees_txt = msg.type.text + "：" + msg.text;
                setTimeout(() => {
                    _this.marquees_txt = '';
                }, 20000)
            } else {
                this.$notify({
                    title: msg.type.text,
                    message: msg.text,
                    type: 'warning',
                    duration: 20000,
                    onClick: function () {
                        this.close();
                        _this.$router.push({ name: "新闻详情" + _this.$route.meta.type_name, params: { key: _this.new_id } });
                    }
                });
            }
        }
    }
};
</script>


<style lang="scss">
.home {
    width: 100%;
    height: 100%;
    background-image: url('../assets/img/home/homeBg.png');
    background-size: 100% 105%;
    background-repeat: no-repeat;
    color: white;

    .ant-layout-header {
        background: none;
    }

    .home-header {
        width: 100%;
        height: 120px !important;
        background-image: url('../assets/img/home/homeTitle.png');
        background-size: 90% 73%;
        background-repeat: no-repeat;
        background-position: center 33px;
        font-size: 13px;
        letter-spacing: 2px;
        font-weight: 900;

        h1 {
            font-size: 34px;
            letter-spacing: 7px;
            padding-top: 23px;
            margin-top: 0px;
            margin-bottom: 0px !important;
            font-family: cursive;
            text-align: center;

            span {
                background-image: linear-gradient(to right, #498ce1, #75f8d2, #498ce1);
                color: transparent;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                filter: drop-shadow(#0ff 0px 0px 12px);
            }
        }

        .home-date {
            margin-top: 40px;
            font-size: 13px;
            color: #75879b;
            text-align: center;
            line-height: initial;
            font-weight: 900;
            letter-spacing: 1;
        }

        .button-list-left {
            width: 22%;
            color: white;
            display: flex;
            height: 40px;
            position: absolute;
            text-align: center;
            top: 20px;
            left: 7%;

            .module-info {
                width: 33%;
                height: 100%;
                line-height: 40px;
                background-image: url('../assets/img/home/button.png');
                text-align: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                cursor: pointer;

                &:nth-child(2),
                &:last-child {
                    margin-left: 10px;
                }

                &:hover {
                    font-weight: 900;
                    background-image: url('../assets/img/home/buttonSelected.png');
                }
            }

            .selectedModule {
                font-weight: 900;
                background-image: url('../assets/img/home/buttonSelected.png');
            }
        }

        .button-list-right {
            width: 22%;
            color: white;
            display: flex;
            height: 40px;
            position: absolute;
            right: 0px;
            text-align: center;
            top: 20px;
            right: 7%;

            .module-info {
                width: 33%;
                height: 100%;
                line-height: 40px;
                background-image: url('../assets/img/home/button.png');
                text-align: center;
                // background-size: 100% 100%;
                background-repeat: no-repeat;
                // transform: rotateY(180deg);
                cursor: pointer;

                &:nth-child(2),
                &:last-child {
                    margin-left: 10px;
                }

                &:hover {
                    font-weight: 900;
                    background-image: url('../assets/img/home/buttonSelected.png');
                }
            }

            .selectedModule {
                font-weight: 900;
                background-image: url('../assets/img/home/buttonSelected.png');
            }
        }

        .tool {
            width: 100px;
            height: 40px;
            position: absolute;
            right: 0px;
            text-align: center;
            margin-top: 10px;

            .ant-dropdown-link {
                color: white;
            }
        }

        .top-nav3 {
            width: 111px;
            height: 40px;
            padding-left: 1%;
            position: absolute;
            top: 20px;
            right: 0px;
            color: white;
        }

        .top-nav3-content {
            height: 32px;
            line-height: 32px;
            position: relative;
            top: calc(50% - 16px);
            font-size: 15px;
        }

        .top-nav3-content-user {
            float: left;
            cursor: pointer;

            &:hover {
                color: #0dada7;
            }
        }
    }

    .home-content {
        width: 100%;
        height: calc(100% - 200px);
        padding: 0px 60px;
        background-color: transparent;
    }
}

.el-menu--horizontal>.el-menu-item {
    background-image: url('../assets/img/setting/menu.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: none !important;
    color: orange !important;
    background-image: url('../assets/img/setting/menuActive.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
    outline: none;
    color: orange !important;
    background-color: transparent !important;

    i {
        color: orange !important;
    }
}

.dialog-content {
    text-align: center;
    color: white;
}

.el-dialog__footer {
    text-align: center !important;
}

.zts {
    color: white im !important;
}

.button-qhzt {
    margin-top: 10px !important;
}

.grid-content {
    height: 60px;
}

.xt-name {
    font-size: 28px;
}

.el-main {
    background: white;
    color: white;
}

.el-dropdown-link {
    cursor: pointer;
    color: white;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
}

.hide-drop {
    margin-top: -10px;
}

.el-dropdown-menu {
    border: none;
    background-color: #121e36 !important;
}

.el-button:hover,
.el-button:focus {
    // color: #800075;
    // border-color: none !important;
    // background-color: none !important;
}

.el-button--text {
    color: white !important;
}

.el-dropdown-menu__item {
    color: white;
}

.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
    background-color: #0b1322 !important;
    color: #01f4f5 !important;
}

/* //个性化设置样式 */
.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.color-div {
    width: 15%;
    height: 35%;
    border: 1px solid #02dede;
    margin: 18px;
    float: left;
}

.gxhsz-div .el-dialog {
    margin-top: 25vh !important;
    width: 50% !important;
    background-color: #1d2d47 !important;
    background-size: 100% 100%;
    background-image: url('../assets/img/setting//09.png') !important;
    text-align: center;
}

.gxhsz-div .el-dialog__body {
    height: 400px !important;
}

.gxhsz-div .el-dialog__footer {
    float: right !important;
    margin-top: -7% !important;
}

.gxhsz-div .el-dialog__header {
    padding: 15px !important;
    padding-bottom: 10px !important;
    font-weight: 600 !important;
    text-shadow: 2px 5px 3px #383333 !important;
    text-align: center !important;
}

.gxhsz-div .el-dialog__title {
    color: #1010109e !important;
}

.gxhsz-div .el-button {
    background: #6dcff6 !important;
    border-radius: 25px !important;
    border: 1px solid #6dcff6 !important;
    color: #303133 !important;
}

.gxhsz-div .el-dialog__headerbtn .el-dialog__close {
    color: #1d2d47 !important;
}

.el-badge__content.is-fixed {
    top: 12px;
    right: 8px;
}

@media screen and (max-width: 1900px) {
    .jh {
        width: 100px;
        position: absolute;
        top: 60px;
        left: 50px;
        cursor: pointer;
    }

    .manager-text {
        position: relative;
        top: calc(50% - 20px);
        float: right;
        // margin-top: 25px;
        margin-right: 3%;
        text-align: center;
        font-size: 20px;
        // letter-spacing: 8px;
    }

    .top-nav2 .el-menu-item {
        padding: 0 12px;

        i {
            font-size: 13px !important;
        }

        span {
            font-size: 13px !important;
        }
    }

    .marquees {
        font-size: 12px;
    }
}

.el-dialog {
    // height: 350px;
    width: 500px;
    background-color: #1d2d47;

    .dialog-content {
        width: 100%;
        // padding: 30px 20px;
        box-sizing: border-box;
    }

    .el-dialog__title {
        color: #ffff;
    }

    .el-form-item__label {
        color: #ffff;
    }

    .el-input__inner {
        background: none;
        color: #ffff;
        border: 1px solid #146a80 !important;
        box-shadow: 0 0 10px #1b6097;
    }

    .el-input__count {
        color: #229dbd;
        background: #1d2d4600;
    }
}

// 右上角消息样式
.nav-link {
    // position: absolute;
    // padding: 0 14px;
    position: relative;
    top: 5px;
    left: 16px;
    line-height: 34px;
    font-size: 10px;
    font-weight: bold;
    color: #555;
    text-decoration: none;
}

.nav-link:hover {
    color: #333;
    text-decoration: underline;
}

.nav-counter {
    position: absolute;
    top: -1px;
    right: 1px;
    min-width: 8px;
    height: 20px;
    line-height: 20px;
    margin-top: -11px;
    padding: 0 6px;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    background: #e23442;
    border: 1px solid #911f28;
    border-radius: 11px;
    background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
    background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
    background-image: -o-linear-gradient(top, #e8616c, #dd202f);
    background-image: linear-gradient(to bottom, #e8616c, #dd202f);
    -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1),
        0 1px rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1),
        0 1px rgba(0, 0, 0, 0.12);
}

.nav-counter-green {
    background: #75a940;
    border: 1px solid #42582b;
    background-image: -webkit-linear-gradient(top, #8ec15b, #689739);
    background-image: -moz-linear-gradient(top, #8ec15b, #689739);
    background-image: -o-linear-gradient(top, #8ec15b, #689739);
    background-image: linear-gradient(to bottom, #8ec15b, #689739);
}

.nav-counter-blue {
    background: #3b8de2;
    border: 1px solid #215a96;
    background-image: -webkit-linear-gradient(top, #67a7e9, #2580df);
    background-image: -moz-linear-gradient(top, #67a7e9, #2580df);
    background-image: -o-linear-gradient(top, #67a7e9, #2580df);
    background-image: linear-gradient(to bottom, #67a7e9, #2580df);
}

.nav-counter-red {
    background: #D6473B;
    border: 1px solid #D6473B;
    background-image: -webkit-linear-gradient(top, #D6473B, #d52e2e);
    background-image: -moz-linear-gradient(top, #D6473B, #d52e2e);
    background-image: -o-linear-gradient(top, #D6473B, #d52e2e);
    background-image: linear-gradient(to bottom, #D6473B, #d52e2e);
}

.search-div {
    float: left;
    padding: 6px;
    margin-top: 4px;
    color: #74ff00;

    i:hover {
        transform: scale(1.6);
        color: #01f4f5;
    }

    i {
        transition: all 0.4s ease;
        cursor: pointer;
    }
}</style>