<template>
  <div class="header">
    <div class="title" :class="{'is-collapse': isCollapse}">
      <i class="iconfont icon-menu" @click="handleMenu"></i>
      <a class="logo"><img :src="logoPath" height="36" alt=""></a>
    </div>

    <div class="userImformation">
      <router-link class="yunweiTitle" to="">运维管理系统</router-link>
      <div class="user-info">
        <div class="changeTheme">
          <el-button type="text" @click="changeThemeHandler">换肤</el-button>
        </div>
        <div class="message">
          <i class="iconfont icon-xiaoxi"></i>
          <!-- <span class="dot"></span> -->
        </div>
        <div class="user-img" @click="handleUsercenter">
        <el-tooltip class="item" effect="dark" :content="gisopUserInfo.username" placement="bottom">
            <div class="user-imgIn">
              <img src="../../static/images/people1.jpg" height="36">
            </div>
          </el-tooltip>
        </div>
        <div class="user-more">
          <!-- <i class="iconfont icon-gengduoda"></>i
          <span class="fl user" @click="handleResetPassword">{{ gisopUserInfo.username }}</span>
          <span class="fl exit" @click="handleLoginOut"> [退出] </span> -->
          <el-menu
            :default-active="activeIndex2"
            mode="horizontal"
            @select="handleSelect"
            background-color="#353d48"
            text-color="#fff"
            active-text-color="#fff">
            <el-submenu index="1">
              <template slot="title"><i class="iconfont icon-gengduoda"></i></template>
              <el-menu-item index="1-1" @click="handleUsercenter">个人中心</el-menu-item>
              <el-menu-item index="1-2" @click="handleLoginOut">退出</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </div>
    </div>

    <el-dialog
      class="changeThemDialog"
      title="更换皮肤"
      :visible.sync="dialogThemeVisible"
      width="40%"
      @open="handleThemeDialogOpen">
      <div class="themeList">
        <span>选择皮肤: </span>
        <span style="margin-left: 30px;">
          <el-radio 
            v-for="item in themeArr" 
            :key="item.key" 
            v-model="radio" 
            :label="item.key">
            <i class="clr" :style="{'background-color': item.color}"></i>{{ item.name }}
          </el-radio>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogThemeVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleThemeSave">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import { changeTheme } from '@/utils/global.js'
  import Api from '@/api/index.js'

  export default {
    name: 'Header',
    data () { 
      return { 
        enterOnoff: true,
        isCollapse: false,
        activeIndex2: '1',
        logoPic: {
          logo1: require('../../static/images/logo1.png'),
          logo: require('../../static/images/logo.png')        
        },
        dialogThemeVisible: false,
        radio: 'blue',
        redioNormal: 'blue',
        themeArr: [{
          name: '默认',
          color: '#409eff',
          key: 'chalk',
          assets: 'chalk-index.css'
        }, {
          name: '红色',
          color: '#E02E43',
          key: 'red',
          assets: 'red-index.css'
        }, {
          name: '靛蓝',
          color: '#3B58E9',
          key: 'blue',
          assets: 'blue-index.css'
        }, {
          name: '墨绿色',
          color: '#036a67',
          key: 'green',
          assets: 'green-index.css'
        }]
      }
    },
    computed: { 
      gisopUserInfo() {
        return this.$store.state.gisopUserInfo
      },
      logoPath() {
        return this.isCollapse
                ? this.logoPic.logo1
                : this.logoPic.logo
      }
    },
    watch: {
      $route(val) {
        if (val.query.UserAccount) {
          this.init()
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      /* 更换皮肤 */
      changeThemeHandler() {
        this.dialogThemeVisible = true
      },
      handleThemeSave() {
        this.dialogThemeVisible = false
        const theme = this.themeArr.filter(x => x.key === this.radio)
        changeTheme(theme[0].assets)
        this.redioNormal = this.radio
      },
      handleThemeDialogOpen() {
        this.radio = this.redioNormal
      },
      handleSelect(key, keyPath) {
      },
      isEmptyData (data) { // 判断数据是否为空，一般数据是object/array
        if (data instanceof Object) {
          var t
          for (t in data) {
            return false
          }
          return true
        } else if (data instanceof Array) {
          if (data.length === 0) return true
          return false
        }
      },
      init () {
        if (this.isEmptyData(this.gisopUserInfo)) {
          const storage = window.localStorage

          if (storage.gisopUserInfo) { // 判断本地是否有存储 本地有存储
            let gisopUserInfo = {}
                gisopUserInfo = JSON.parse(storage.gisopUserInfo)

            let time = parseInt(gisopUserInfo.time)
            let date = parseInt(gisopUserInfo.date)
            
            if ((time + date) >= Math.round(new Date().getTime() / 1000)) { // 判断是否过期
              Api.getLoginIsTimeout(gisopUserInfo.token).then(data => {
                if (data.status === 0) {
                  let user = gisopUserInfo.info
                  this.$store.dispatch('setGisopUser', user)
                } else {
                  this.$store.dispatch('setGisopUser', {})
                  storage.removeItem('gisopUserInfo')
                  this.$message({
                    type: 'warning',
                    message: '登录失效了，请重新登录'
                  })
                  this.$router.replace('/login')
                }
              }).catch(res => {
                this.$store.dispatch('setGisopUser', {})
                storage.removeItem('gisopUserInfo')
                this.$message({
                  type: 'error',
                  message: '登录失败，请重新登录'
                })
                this.$router.replace('/login')
              })
            } else {
              this.$router.replace('/login')
            }
          } else { // 本地没有存储
            this.$router.replace('/login')
          }
        }
      },
      // 个人中心操作
      /* handleUserInfo () {
        this.$router.push({name: 'ModifyPass'})
      }, */
      // 菜单操作
      handleMenu () {
        this.isCollapse = !this.isCollapse
        this.$store.dispatch('setCollapse', this.isCollapse)
      },
      // 重置密码
      handleUsercenter () {
        this.$emit('user-center', true)
      },
      handleLoginOut () { // 退出用户登录
        window.localStorage.removeItem('gisopUserInfo')
        window.sessionStorage.setItem('redirect', this.$route.fullPath)

        this.$message({
          type: 'success',
          message: '用户成功退出！'
        })

        this.$router.replace('/login')

        this.$store.dispatch('setGisopUser', {})

        this.enterOnoff = false
      },
      checkBusinessInfo () {
        this.$refs.infoDialog.showInfo()
      }
    }
  }
</script>

<style lang="scss">
  
</style>
