<template>
    <el-header height="160px" :style="{ backgroundImage: `url(${require('../assets/jpg-bg@3x.png')})` }">
        <div class="header">
            <div class="left" v-if="this.$route.name !== 'allsearch'">
                <router-link :to="{ name: 'home' }">
                    <img src="../assets/logo.png" alt="" />
                </router-link>
                <div class="header-r"></div>
                <div class="title">
                    <img src="../assets/top-png-biaoti@3x.png" alt="" />
                </div>
            </div>
            <div class="left2" v-else>
                <router-link :to="{ name: 'home' }">
                    <img src="../assets/logo.png" alt="" />
                </router-link>
                <div class="header-r"></div>
                <div class="title">
                    <img src="../assets/top-png-biaoti@3x.png" alt="" />
                </div>
            </div>

            <div class="right" v-if="this.$route.name !== 'allsearch'">
                <search-input
                    size="mini"
                    v-model="search"
                    class="search"
                    placeholder="搜索..."
                    @focus="all('/Allsearch')"
                    clearable
                >
                    <i slot="append" class="el-icon-search"></i>
                </search-input>
                <div class="btn-list" v-if="isLogin">
                    <el-dropdown @command="onCommands" style="margin-left: 20px" trigger="click">
                        <img
                            class="img"
                            @click="batchRead"
                            src="https://zhirongip.oss-cn-hangzhou.aliyuncs.com/image/2021-07-06-10-38-11oGTyzHPI.png"
                            alt=""
                        />
                        <div class="title" v-if="NewsList > 0">
                            {{ NewsList }}
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item class="newsAll" command="allNews" style="word-break: keep-all"
                                >查看全部
                            </el-dropdown-item>
                            <div class="right-tabbox-newnotice">
                                <el-tabs v-model="activeName">
                                    <el-tab-pane label="消息" name="first"></el-tab-pane>
                                    <!-- <el-tab-pane label="留言" name="message"></el-tab-pane> -->
                                </el-tabs>
                            </div>
                            <div v-if="newsList != 0">
                                <div v-for="(item, index) in newsLists" :key="index">
                                    <div class="news">
                                        <div class="news-l">
                                            <el-avatar
                                                :size="36"
                                                src="https://zhirongip.oss-cn-hangzhou.aliyuncs.com/image/2021-07-21-15-53-49AdKihDPS.png"
                                            ></el-avatar>
                                            <div class="news-con">
                                                <div class="txt">
                                                    <div class="txt1">系统消息</div>
                                                    <div class="txt2">{{ item.createdAt }}</div>
                                                </div>
                                                <div class="txt3">{{ item.content }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="border"></div>
                                </div>
                            </div>
                            <div class="empty" v-else>
                                <i class="el-icon-takeaway-box" style="margin-left: 21px"></i>
                                <div style="font-size: 16px">暂无信息</div>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dropdown @command="onCommand" style="margin-left: 20px" trigger="click">
                        <span class="el-dropdown-link">
                            <img style="display: block" :src="avatarBox" /><i
                                class="el-icon-arrow-down el-icon--right"
                            ></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="nickname" style="word-break: keep-all"
                                >{{ userInfo.nickname }}
                            </el-dropdown-item>
                            <div class="border1"></div>
                            <el-dropdown-item command="edit" style="word-break: keep-all">编辑资料 </el-dropdown-item>
                            <el-dropdown-item command="supply" style="word-break: keep-all">我的供给 </el-dropdown-item>
                            <el-dropdown-item command="demand" style="word-break: keep-all">我的需求 </el-dropdown-item>
                            <div class="border1"></div>
                            <el-dropdown-item command="logout">退出登录 </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="btn-list" v-else>
                    <el-button size="mini" plain type="warning" @click="all('/Login')">登录</el-button>
                    <div class="line"></div>
                    <el-button size="mini" plain type="warning" @click="all('/Register')">注册</el-button>
                </div>
            </div>
        </div>
    </el-header>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import SearchInput from './SearchInput';
import EventBus from '../eventBus';
export default {
    name: 'Header',
    data() {
        return {
            search: '',
            region: '',
            activeName: 'first',
            newsList: [],
            NewsList: '',
            authorities: []
        };
    },
    created() {
        const receiveUserId = this.userInfo.id;
        const isRead = false;
        this.$http.post('/information/all', { query: { receiveUserId, isRead } }, { body: 'json' }).then(res => {
            this.NewsList = res.numberOfElements;
            this.newsList = res.content;
        });
    },
    computed: {
        newsLists() {
            return [...this.newsList].filter((item, index) => {
                return index < 4;
            });
        },
        newsType() {
            return this.activeName == 'first' ? true : false;
        },
        ...mapState(['userInfo', 'institutionInfo', 'personalInfo', 'loginType']),
        type() {
            return this.userInfo.authorities.find(item => {
                return item.name == 'ROLE_INSTITUTION' || item.name == 'ROLE_PERSONAL';
            });
        },
        avatarBox() {
            return this.userInfo.avatar
                ? this.userInfo.avatar
                : 'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/image/2021-06-30-17-02-42uzAOUPcw.jpeg';
        }
    },
    methods: {
        ...mapMutations(['updateUserInfo', 'loginTypeFn']),
        login() {
            EventBus.$emit('login', '登录');
        },
        batchRead() {
            const receiveUserId = this.userInfo.id;
            let batchRead = this.NewsList.numberOfElements;
            this.$http
                .post('/information/batchRead', { query: { receiveUserId, batchRead } }, { body: 'json' })
                .then(res => {
                    this.NewsList = res;
                });
        },
        onCommands(command) {
            if (command === 'allNews') {
                this.$router.push('/newsInfo');
            }
        },
        onCommand(command) {
            if (command === 'nickname') {
                this.$router.push('/security');
            } else if (command === 'edit') {
                if (this.type) {
                    if (this.type.name == 'ROLE_INSTITUTION') {
                        if (this.institutionInfo.status == 'PASS') {
                            this.$router.push('/userEdit');
                        } else if (this.institutionInfo.status == 'DENY') {
                            this.$router.push('/Authenticationsfail');
                        } else {
                            this.$router.push('/Authentications');
                        }
                    } else if (this.type.name == 'ROLE_PERSONAL') {
                        if (this.personalInfo.status == 'PASS') {
                            this.$router.push('/userEdit');
                        } else if (this.personalInfo.status == 'DENY') {
                            this.$router.push('/Authenticationfail');
                        } else {
                            this.$router.push('/Authentication');
                        }
                    }
                } else {
                    this.$router.push('/userEdit');
                }
            } else if (command === 'logout') {
                localStorage.removeItem('webToken');
                // this.loginTypeFn(false);
                this.updateUserInfo(null);
                this.$router.push('/Login');
            } else if (command === 'supply') {
                this.$router.replace('/publish/patent?caseType=DECLASSIFICATION');
            } else if (command === 'demand') {
                this.$router.replace('/publish/patentDemand?caseType=DECLASSIFICATION');
            }
        }
    },
    components: {
        SearchInput
    }
};
</script>

<style lang="less" scoped>
.selectA {
    /deep/ .el-input {
        .el-input__inner {
            border-width: 0px;
            height: 46px;
            font-size: 0;
            background: none;
            line-height: 16px;
        }
    }
}
/deep/ .el-tabs__nav-scroll {
    padding-left: 13px;
}
/deep/ .el-tabs__item {
    font-weight: bold;
    font-size: 14px;
    width: 300px;
}
/deep/ .el-dropdown-menu__item {
    font-weight: bold;
    text-align: center;
}
.right-tabbox-newnotice /deep/.el-tabs__nav-wrap::after {
    height: 1px;
}
.newsAll {
    position: absolute;
    right: 3px;
    z-index: 99;
    font-size: 12px;
    font-weight: 400;
    color: #c8c9cc;
}
/deep/ .el-avatar {
    background: none;
    margin-right: 5px;
}
.el-header {
    background-position: center center;
    background-size: 100% 100%;
    z-index: 20;
}
.border1 {
    margin: 6px 16px;
    height: 1px;
    background: #f2f3f5;
}
.header {
    .center-content();
    height: 160px;
    justify-content: space-between;
    .flex();
    .right {
        width: 240px;
    }
}

.left {
    .flex();
    .header-r {
        border: 1px solid #00684f;
        height: 96px;
    }
    img {
        width: auto;
        height: 117px;
        display: block;
        cursor: pointer;
    }

    .title {
        img {
            height: 117px;
        }
    }
}
.left2 {
    margin-left: 256px;
    .flex();
    .header-r {
        border: 1px solid #00684f;
        height: 96px;
    }
    img {
        width: auto;
        height: 117px;
        width: 306px;
        display: block;
        cursor: pointer;
    }

    .title {
        img {
            height: 117px;
            width: 370px;
        }
    }
}
.el-dropdown-link {
    .flex();
    margin-right: 14px;
}
.border {
    border: 0.5px solid #f2f3f5;
    margin: 5px 0 0 50px;
}
.empty {
    font-size: 20px;
    color: #ccc;
    padding-left: 120px;
    padding-bottom: 20px;
}
.news {
    display: flex;
    width: 300px;
    padding: 10px;
    justify-content: space-between;
    .news-l {
        display: flex;
        .news-con {
            .txt {
                .flex();
                width: 245px;
                justify-content: space-between;
                margin-bottom: 5px;
                .txt1 {
                    font-size: 14px;
                    line-height: 24px;
                    font-weight: bold;
                    color: #000000;
                }
                .txt2 {
                    font-size: 14px;
                    font-weight: 400;
                    color: #c8c9cc;
                    line-height: 24px;
                }
            }
            .txt3 {
                width: 230px;
                font-size: 14px;
                font-weight: 400;
                color: #c8c9cc;
                overflow: hidden; /*超出部分隐藏*/
                white-space: nowrap; /*不换行*/
                text-overflow: ellipsis; /*超出部分文字以...显示*/
                line-height: 24px;
            }
        }
    }

    .time {
        font-size: 14px;
        font-weight: 400;
        color: #c8c9cc;
        line-height: 24px;
    }
}
.btn-list {
    .flex();
    justify-content: flex-end;
    margin-top: 24px;
    cursor: pointer;
    margin-right: -15px;
    .img {
        width: 34px;
        margin-top: 3px;
        height: 34px;
    }
    .title {
        position: absolute;
        right: 2px;
        top: -0px;
        width: 14px;
        height: 14px;
        background: #ff8700;
        color: #ffffff;
        font-size: 11px;
        text-align: center;
        line-height: 14px;
        border-radius: 7px;
        border: 1px solid #ffffff;
    }
    .el-button {
        border-width: 0;
        background-color: transparent;
        &:hover {
            text-decoration: underline;
        }
        &:hover,
        &:focus,
        &:visited {
            color: @warn;
        }
    }
    .el-button + .el-button {
        margin-left: 0;
    }

    .line {
        width: 1px;
        height: 10px;
        background-color: @warn;
    }
    .el-icon-chat-dot-square {
        font-size: 28px;
        color: #ccc;
        margin-right: 21px;
    }
    .avatars {
        margin-right: 12px;
    }
    img {
        width: 30px;
        height: 30px;
        margin: 0 2px 0 -12px;
        border-radius: 50%;
    }
}
</style>
