<template>
  <el-row class="header-container">
    <el-col :span="20" class="tags-container">
      <div class="left-menu-collapse" @click="changeCollapse">
        <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
      </div>
      <div class="tags-box">
        <el-tag v-for="(tag, idx) in tags" :key="idx" :disable-transitions="false" @click="handleClick(tag)"
          @close="handleCloseTag(idx, tags)" :closable="tag.name !== 'Index' && tag.name !== 'ProductHomelist'"
          :class="fullPath === tag.fullPath ? 'tag active' : 'tag'">{{ tag.meta.title }}</el-tag>
      </div>
    </el-col>
    <el-col :span="4" class="text-c p-t-20">
      <div class="dropdown_box">
        <el-dropdown v-if="isShow">
          <span class="el-dropdown-link">
            <span class="f_14">{{ language }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item divided v-for="(item, index) in list" :key="index" @click="changeLanguage(item)">
                {{ item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            <span class="f_14">{{ userInfo.staff_name }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleNavigatorPersonCenter">个人资料</el-dropdown-item>
              <el-dropdown-item divided @click="handleSigninOut">
                <i class="el-icon-switch-button"></i>
                退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
::v-deep(.el-dropdown-menu__item--divided:first-child) {
  border-top: none !important;
}

.dropdown_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.dropdown_box ::v-deep(.el-dropdown) {
  margin-left: 30px;
}

.header-container {
  height: 100%;
  background-color: #304156;
  padding-right: 20px;
}

.tags-container {
  padding: 0 20px;
}

.left-menu-collapse {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 33px;
  height: 33px;
  text-align: center;
  line-height: 33px;
  cursor: pointer;
  color: #c0ccd8;
}

.tags-box {
  width: calc(100% - 17%);
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
}

::v-deep(.tag) {
  color: #c0ccd8;
  border: 1px solid #293749;
  margin-right: 10px;
  background-color: #293749;
  cursor: pointer;
  padding: 0px 10px 0px 10px;
  height: 38px !important;
  line-height: 38px;
}

.tag.active {
  background-color: #344964 !important;
  color: FFF;
  font-size: 14px;
  border: 1px solid #4178d5;
}

::v-deep(.el-tag .el-icon-close) {
  padding-left: 20px;
}

::v-deep(.el-tag .el-tag__close:hover) {
  background-color: transparent !important;
}

// ::v-deep([class*=" el-icon-"]) {
//   color: #555;
// }
::v-deep(.el-header) {
  padding: 0px 0px 0px 20px;
}

.news-number {
  position: absolute;
  top: -50%;
  left: 50%;
  background-color: #fc8568;
  padding: 2px 5px;
  color: #fff;
  font-size: 6px;
  border-radius: 18px;
}

.el-dropdown {
  color: #c0ccd8 !important;
}

.el-dropdown .el-dropdown-selfdefine {
  line-height: 40px !important;
  color: #c0ccd8 !important;
}
</style>
<script>
import { mapActions, mapState } from 'vuex'
import { setNotLoggedIn } from '@/utils/auth'
import { async } from 'q'
export default {
  inject: ['reload'],
  data () {
    return {
      fullPath: '/index',
      language: '',
      list: [],
      isShowLanguage: false,
      models: [
        '/system/category',
        '/index/brand',
        '/index/productList',
        '/index/editSpu',
        '/index/addSpu',
        '/index/editSku',
        '/index/opdTeam',
        '/index/propSetting',
        '/download/instructions',
        '/download/editInstruct',
        '/download/drive',
        '/download/editDrive',
        '/index/language',
        '/index/logInfo'
      ]
    }
  },
  computed: {
    ...mapState({
      // 取出页面标签
      userInfo: state => state.user.userInfo,
      tags: state => state.topNavTag.tags,
      isCollapse: state => state.leftAside.isCollapse,
      isShow: state => state.leftAside.isShowLanguage
    })
  },
  watch: {
    // 监听路由变化
    $route (to, from) {
      this.fullPath = to.fullPath
      this.ShowLanguage(this.fullPath)
    }
  },
  async created () {
    this.isShowLanguage = this.$store.state.leftAside.isShowLanguage
    this.fullPath = this.$route.fullPath
    this.ShowLanguage(this.fullPath)
    this.getLanguage()
    JSON.stringify(this.$store.state.user.language) != '{}' ? await this.getCdn(this.$store.state.user.language.id) : await this.getCdn(1)
    if (JSON.stringify(this.$store.state.user.language) != '{}') {
      this.language = this.$store.state.user.language.name
      // console.log('header language id inner',this.$store.state.user.cdn)
    }
  },
  methods: {
    ...mapActions({
      // 关闭标签及页面
      handleCloseTag: 'topNavTag/removeNavTag',
      // 展开收缩左侧菜单栏
      changeCollapse: 'leftAside/changeCollapse'
    }),
    // 页面标签点击事件
    handleClick (tag) {
      let isIf = true
      // this.$store.dispatch('lcJxStore/setIsClick', isIf)
      this.$router.push(tag)
      this.ShowLanguage(tag.fullPath)
    },
    //是否显示语言切换按钮
    ShowLanguage (path) {
      let newPath = path.indexOf('?') != -1 ? path.substring(0, path.indexOf('?')) : path;
      if (this.models.indexOf(newPath) != -1) {
        this.isShowLanguage = true
        this.$store.dispatch('leftAside/changeLanguage', this.isShowLanguage)
      } else {
        this.isShowLanguage = false
        this.$store.dispatch('leftAside/changeLanguage', this.isShowLanguage)
      }
    },
    // 页面关闭标签事件
    handleCloseTag (idx, tags) {
      console.log('页面关闭标签事件', idx, tags)
      if (tags && tags[idx].name == 'lclog') {
        setTimeout(() => {
          window.sessionStorage.removeItem('projectLogSearchdata')
        }, 1000)

      }
      this.$store.dispatch('topNavTag/removeNavTag', idx)
    },
    // 个人中心
    handleNavigatorPersonCenter () {
      window.open(process.env.VUE_APP_SSO_LOGINURL)
    },
    // 退出
    handleSigninOut () {
      this.$http.get('login/logout').then(r => {
        if (r.errno === 0) {
          setNotLoggedIn()
          this.$store.replaceState({})
          this.$router.push({
            path: '/login'
          })
          //   localStorage.removeItem('userToken')
          window.location.reload(); //强制刷新
        }
      })
    },
    //获取语言列表
    getLanguage () {
      this.$http.get('v1/lang').then((res) => {
        if (res.status == 200) {
          this.list = res.data
          let language_id = ''
          if (JSON.stringify(this.$store.state.user.language) != '{}') {
            this.language = this.$store.state.user.language.name
            this.$store.dispatch('user/setLanguage', this.$store.state.user.language)
            language_id = this.$store.state.user.language.id
            this.getCdn(language_id)
          } else {
            this.language = this.list[0].name
            this.$store.dispatch('user/setLanguage', this.list[0])
            language_id = this.$store.state.user.language.id
            this.getCdn(language_id)
          }
        }
      })
    },
    async changeLanguage (item) {
      this.language = item.name
      this.$store.dispatch('user/setLanguage', item)
      // this.$store.dispatch('topNavTag/removeAllNavTag')
      let language_id = this.$store.state.user.language.id
      await this.getCdn(language_id)
      this.reload()
      // setTimeout(() => window.location.href = "/index/index")
    },
    //获取cdn
    async getCdn (language_id) {
      await this.$http.showLoading(false).get('v1/cdn', { language_id: language_id }).then(res => {
        if (res.status == 200) {
          let cdn = res.data.url
          this.$store.state.user.cnd = res.data.url
          this.$store.dispatch('user/setCdn', cdn)
        }
      })
    }
  }
}
</script>
