<template>
  <nav class="site-navbar">
    <div class="site-navbar__body clearfix">
      <ul class="TT-nav">
        <li>
          <router-link :to="{name: 'home'}">
            <img class="logo" :src="webConfig.siteLogUrl" alt="">
          </router-link>
        </li>
        <li>
          <router-link :to="{name: 'home'}">首页</router-link>
        </li>
        <li>
          <el-dropdown :show-timeout="0" placement="bottom" style="cursor: pointer;">
            <span class="el-dropdown-link">淘宝工具</span>
            <el-dropdown-menu slot="dropdown">
              <div class="TT-tool-nav">
                <div class="nav-list"
                     v-for="(tools, index) in [toolsNav0, toolsNav1, toolsNav2, toolsNav3, toolsRoutes]" :key="index">
                  <h4 class="title">{{ ['生意参谋工具', '验号&淘客查询', '运营工具', 'sku监控', '淘宝详情页工具'][index] }}</h4>
                  <el-dropdown-item :command="item.name" v-for="item in tools" :key="item.name">
                    <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
                  </el-dropdown-item>
                </div>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li>
          <router-link :to="{name: 'mall'}">礼品商城</router-link>
        </li>
      </ul>
      <template v-if="token">
        <el-dropdown :show-timeout="0" placement="bottom" style="cursor: pointer;">
          <span class="el-dropdown-link TT-el-dropdown-link">
            <img :src="userVipLogo" alt="" v-show="userVipLogo">
            <p v-show="!userVipLogo">我的</p>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <router-link :to="{path: '/mine'}">个人中心</router-link>
            </el-dropdown-item>
            <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <template v-else>
        <router-link class="btn-login" :class="$route.name !== 'register' ? 'active' : ''" :to="{name: 'login'}"
                     replace>登录
        </router-link>
        <router-link class="btn-register" :active-class="'active'" :to="{name: 'register'}" replace>注册</router-link>
      </template>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"/>
  </nav>
</template>

<script>
import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
import Vue from 'vue'
import { toolsNav0, toolsNav1, toolsNav2, toolsNav3, toolsRoutes } from '../router'
import { mapState } from 'vuex'

export default {
  components: {
    UpdatePassword
  },
  data () {
    return {
      updatePassowrdVisible: false,
      toolsNav0: toolsNav0,
      toolsNav1: toolsNav1,
      toolsNav2: toolsNav2,
      toolsNav3: toolsNav3,
      toolsRoutes: toolsRoutes,
      vip1Logo: require('../../static/img/mine/vip_1@2x.png'),
      vip2Logo: require('../../static/img/mine/vip_2@2x.png')
    }
  },
  computed: {
    ...mapState({
      webConfig: state => state.common.webConfig,
      payConfig: state => state.user.userconfig
    }),
    token () {
      return this.$store.state.user.token || Vue.cookie.get('token')
    },
    userVipLogo () {
      const { userVip } = this.payConfig
      if (Object.prototype.toString.call(userVip) !== '[object Number]') {
        return ''
      }
      return ['', this.vip1Logo, this.vip2Logo, ''][userVip]
    }
  },
  methods: {
    // 修改密码
    updatePasswordHandle () {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    logoutHandle () {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/user/loginout'),
          method: 'post',
          data: this.$http.adornData()
        }).then(({ data }) => {
          if (data.status) {
            clearLoginInfo()
            this.$router.push({ name: 'login' })
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.site-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3%;
  background: #fff;

  .site-navbar__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .TT-nav {
    flex: 1;
    display: flex;
    align-items: center;
    list-style: none;

    li {
      display: flex;
      justify-content: center;
      width: 12%;
    }

    .logo {
      display: block;
      width: 86px;
      height: 32px;
    }
  }
}

.TT-tool-nav {
  display: flex;
  padding: 20px;

  .nav-list {
    h4 {
      margin-bottom: 20px;
      text-align: center;
      color: #409EFF;
    }
  }
}

.el-dropdown-link {
  font-size: 16px;
  color: #666;
}

a {
  display: block;
  font-size: 16px;
  color: #666;
  text-decoration: none;
}

.btn-login,
.btn-register {
  width: 70px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #332C2B;
  line-height: 28px;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  text-align: center;
  color: #666666;

  &.active {
    line-height: 30px;
    color: #00EEFF;
    background: #332C2B;
  }
}

.btn-register {
  margin-left: 16px;
}

.TT-el-dropdown-link {
  display: flex;
  align-items: center;

  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
</style>
