<template>
    <div style="background:#F0F0F0">
        <div class="HeadContent">
            <div class="Head">
                <div class="HeadAll">
                    <div class="HeadLeft">
                        <span v-if="welcom.length>0" @click="goNextUrl(welcom[0].url)">{{welcom[0].linkName}}</span>
                        <img src="../assetsPre/location.png" alt="">
                        <span>{{locationCity}}</span>
                        <!-- <el-button v-if="!isIndex" type="text" style="vertical-align: middle;margin-left:15px;color:#333" @click="goHome" size="small">首页</el-button> -->
                    </div>

                    <div class="HeadRight">
                        <template v-if="!userInfo">
                            <el-button type="text" @click="goNext('login')" style="vertical-align: middle;margin-left:15px;color:#333" size="small">登录</el-button>
                            <el-button type="text" @click="goNext('register')" style="vertical-align: middle;margin-left:15px;color:#FF5E00" size="small">免费注册</el-button>
                        </template>

                        <span style="margin-left:15px;"></span>

                        <el-dropdown v-if="userInfo" @command="handleCommand">
                            <span class="el-dropdown-link" style="color:#0B9EC0">
                                {{userInfo.nickname}}
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="logout">退出登录</el-dropdown-item>

                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button type="text" style="vertical-align: middle;margin-left:15px;color:#333" @click="goNext('userCenterHome')" size="small">个人中心</el-button>

                        <el-button type="text" v-if="isStore" style="vertical-align: middle;margin-left:15px;color:#333" @click="goShop" size="small">店铺中心</el-button>
                    </div>

                </div>

            </div>

        </div>
    </div>

</template>

<script>
import logo from '../components/Logo'
import { mapState } from "vuex";
export default {
    name: 'miniHead',
    data() {
        return {
            isIndex: true,
            welcom: []
        }
    },
    computed: {
        ...mapState(["locationInfo", "userInfo"]),
        locationCity() {
            var city = '南京'
            if (this.locationInfo) {
                if (this.locationInfo.addressComponent) {
                    city = this.locationInfo.addressComponent.city.split('市')[0]
                    if (!city) {
                        city = this.locationInfo.addressComponent.province.split('省')[0]
                    }
                }

            }
            return city
        },
        isStore() {
            var result = false
            if (this.userInfo) {
                if (this.userInfo.storeFlag == 'Y') {
                    result = true
                }
            }
            return result
        }
    },
    watch: {
        $route() {
            if (this.$route.name != 'index') {
                this.isIndex = false
            }
            else {
                this.isIndex = true
            }
        }
    },
    created() {
        console.log(this.$route.name)
        if (this.$route.name != 'index') {
            this.isIndex = false
        }
        else {
            this.isIndex = true
        }

        this.$http.get({
            url: '/quickLinks/all',
            data: {
                typeFlag: 4
            }
        }).then(res => {
            if (res.success) {
                this.welcom = res.data
            }
        }).catch(e => {
            console.log(e)
        })
    },
    methods: {
        goHome() {
            this.$router.push({
                name: 'index'
            })
        },
        handleCommand(command) {
            if (command === 'logout') {
                this.$http.post({
                    url: '/auth/logout'
                }).then(res => {
                    if (res.success) {
                        this.$store.commit('updateUserInfo', null);
                        this.$router.replace('/index');
                    }
                })
            }
        },
        goNextUrl(nextName) {
            if (nextName) {
                window.open(nextName)
            }

        },
        goNext(nextName) {
            if (nextName) {
                this.$router.push({
                    name: nextName,
                })
            }

        },
        goShop() {
            if (!this.userInfo) {
                this.goNext('login')
            }
            else if (this.userInfo.storeFlag == 'Y') {
                this.goNext('userShop')
            }
            else {
                this.goNext('userCertification')
            }
        }
    },
    components: {
        logo
    }
}
</script>

<style lang="less" scoped>
.HeadContent {
    width: 100%;
    height: 36px;
}
.Head {
    width: 100%;
    margin: auto;
    overflow: hidden;
    height: 36px;
    background: rgba(240, 240, 240, 1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;

    .HeadAll {
        width: 1190px;
        margin: auto;
        height: 36px;

        .HeadLeft {
            float: left;
            height: 36px;
            font-size: 0;
            line-height: 36px;

            span {
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 16px;
                vertical-align: middle;
            }

            img {
                width: 12px;
                height: 15px;
                vertical-align: middle;
                margin: 0 5px 0 7px;
            }
        }
        .HeadRight {
            float: right;
            span {
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 16px;
                vertical-align: middle;
            }
        }
    }
}
</style>
