<template>
  <div class="display-flex parent-header">
    <div class="left-logo">
      <img class="logo" :src="logo" alt />
    </div>
    <div class="right-conent">
      <div class="user-bar clear-fix">
        <p class="logout" @click="logout">
          <i class="el-icon-switch-button"></i>{{$t('exit')}}
        </p>
        <p class="user-info" @click="toApproveList">
          <el-badge :value="approveCount">
            <i class="img">
              <img :src="userPic" alt />
            </i>
          </el-badge>
          {{$t('welcome')}},{{userInfo.displayname}}
        </p>
        <p>
          <el-button type="text" icon="iconfont icon-web-icon-" @click="openBPA">{{$t('bpaWork')}}</el-button>
        </p>
        <div class="language"><switch-language/></div>
        <!-- <p class="search-box">
          <el-input v-model="searchContent">
            <span slot="prefix"><i class="iconfont icon-sousuo2"></i></span>
            <span slot="suffix">搜索</span>
          </el-input>
        </p>-->
      </div>
      <ul class="nav-bar">
        <li
          v-for="(item, index) in tabList"
          :key="index"
          class="tab"
          @click="clickHandle(item)"
          :class="isActive == item.id?'active':''"
        >{{item.name}}</li>
      </ul>
    </div>
    <user-info-dialog v-model="dialogVisible"></user-info-dialog>
  </div>
</template>

<script>
import logo from '@/assets/img/common/logo-sx.png'
import userPic from '@/assets/img/headImg.png'
import { getApproveCount } from '@/api/staging/personal/approve_list'
import { logout } from '@/api/app'
import userInfoDialog from './userInfoDialog'
import SwitchLanguage from '@/components/switchLanguage/SwitchLanguage.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapMutations } = createNamespacedHelpers('app')

export default {
  name: 'AppHeader',
  components: {
    userInfoDialog,
    SwitchLanguage
  },
  data() {
    return {
      logo: logo,
      userPic: userPic,
      dialogVisible: false,
      searchContent: '',
      approveCount: null
    }
  },
  computed: {
    ...mapGetters(['tabList', 'navRecords']),
    userInfo() {
      return this.$store.state.app.userInfo
    },
    isActive() {
      return this.$store.state.app.activeAppHeader
    }
  },
  mounted() {
    this.getApproveCount()
  },
  methods: {
    ...mapMutations([
      'setNavRecords',
      'setActiveIndex',
      'setUserInfo',
      'setTabList'
    ]),
    openBPA() {
      // window.open(routeData.href, "_blank");
      const a = document.createElement('a')
      // 给创建好的a标签赋值
      a.setAttribute('href', process.env.BPA_URL)
      // 设置css 隐藏属性
      a.setAttribute('style', 'display:none')
      // 设置 a标签为新窗口打开
      a.setAttribute('target', '_blank')
      // 将设置好的a标签，添加到 body 内
      document.body.appendChild(a)
      // 模拟点击
      a.click()
      // 移除a标签
      a.parentNode.removeChild(a)
    },
    getApproveCount() {
      getApproveCount().then(rt => (this.approveCount = rt.data))
    },
    getQueryString(item) {
      const str = item.split('?')[1]
      const arr1 = str.split('&')
      const obj = {}
      for (let i = 0; i < arr1.length; i++) {
        obj[arr1[i].split('=')[0]] = arr1[i].split('=')[1]
      }
      return obj
    },
    clickHandle(item) {
      if (item.url === 'analyseWatchCenter') {
        this.$router.push({ name: item.url })
      } else {
        if (item.subNodes.length > 0) {
          if (item.subNodes[0].subNodes.length > 0) {
            if (item.subNodes[0].subNodes[0].url.indexOf('?') === -1) {
              this.$router.push({
                name: item.subNodes[0].subNodes[0].url
              })
            } else {
              this.$router.push({
                name: item.subNodes[0].subNodes[0].url.split('?')[0],
                query: this.getQueryString(item.subNodes[0].subNodes[0].url)
              })
            }
          }
        }
      }
    },
    toApproveList() {
      this.dialogVisible = true
      // this.$router.push({ name: "stagingPersonalApproveList" });
      // let navRecords = JSON.parse(JSON.stringify(this.navRecords));
      // this.setActiveIndex("stagingPersonalApproveList");
      // if (!navRecords.map(el => el.name).includes(this.$route.name)) {
      //   navRecords.forEach((el, index) => {
      //     el.active = false;
      //   });
      //   navRecords.push({
      //     name: this.$route.name,
      //     title: this.$route.meta.title,
      //     active: true
      //   });
      // } else {
      //   navRecords.forEach((el, index) => {
      //     el.active = false;
      //     if (el.name === this.$route.name) {
      //       navRecords[index].active = true;
      //     }
      //   });
      // }
      // this.setNavRecords(navRecords);
    },
    logout() {
      if (
        process.env.ROUTER_URL === 'jiucaiyun' ||
        process.env.ROUTER_URL === 'sxTest'
      ) {
        sessionStorage.removeItem('sxToken')
        this.setUserInfo({})
        this.setTabList([])
        this.$router.push({ path: '/login' })
      } else {
        logout(sessionStorage.getItem('sxToken')).then(rt => {
          if (rt.status === '200') {
            if (!rt.data.logoutUrl) {
              sessionStorage.removeItem('sxToken')
              this.setUserInfo({})
              this.setTabList([])
              if (!!window.ActiveXObject || 'ActiveXObject' in window) {
                window.opener = null
                window.open('', '_self')
                window.close()
              } else {
                window.location.href =
                  window.location.origin +
                  window.location.pathname +
                  '#/logout'
              }
            }
          }
          // window.open(' ', '_self');
          // window.close()
        })
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.parent-header {
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 5px 10px -5px #dfdfdf;
  .left-logo {
    width: 18vw;
    min-width: 340px;
    max-width: 535px;
    img {
      width: 100%;
    }
  }
  .right-conent {
    flex: 1;
    .user-bar {
      margin-left: 40px;
      p {
        float: right;
        height: 28px;
        line-height: 28px;
        margin-right: 32px;
        cursor: pointer;
        &:first-child {
          margin-right: 0;
        }
        i {
          margin-right: 10px;
          vertical-align: middle;
          position: relative;
          top: -1px;
        }
      }
      div.language {
        float: right;
        height: 28px;
        line-height: 30px;
        margin-right: 20px;
      }
      .logout {
        i {
          font-size: 18px;
          font-weight: 500;
        }
      }
      .user-info {
        .el-badge {
          margin-right: 8px;
          /deep/ .el-badge__content {
            background-color: $active-color;
            transform: scale(0.8) translateY(-50%) translateX(100%);
          }
        }
        i.img {
          display: inline-block;
          width: 28px;
          height: 28px;
          margin-right: 0;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }
      .search-box {
        /deep/ .el-input {
          .el-input__inner {
            width: 100px;
            background-color: #f2f2f2;
            padding-left: 36px;
            padding-right: 40px;
            border: none;
            border-radius: 14px;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            &:focus {
              width: 200px;
            }
          }
          .el-input__prefix {
            left: 10px;
            top: 2px;
            i {
              font-size: 22px;
              color: $tc1;
            }
          }
          .el-input__suffix {
            right: 10px;
            color: $tc1;
          }
        }
      }
    }
    .nav-bar {
      margin: 12px 50px 0;
      overflow: hidden;
      .tab {
        float: left;
        height: 29px;
        line-height: 31px;
        color: $tc2;
        margin: 0 23px;
        font-size: 15px;
        font-weight: bold;
        border-bottom: 2px solid transparent;
        cursor: pointer;
      }
      .tab.active {
        color: $active-color;
        border-color: $active-color;
      }
    }
  }
}
</style>
