<template>
  <div class="user-wrapper" :class="theme">
    <span v-if="isPortal" class="action">
      <a class="logout_title" @click="portalNavigate">
        <a-icon type="home" />
        <span>&nbsp;导航</span>
      </a>
    </span>
    <span class="action" @click="showClick">
      <a-icon type="search"></a-icon>
    </span>
    <span v-show="shows" class="borders">
      <a-select
        class="search-input"
        showSearch
        :showArrow="false"
        placeholder="搜索菜单"
        optionFilterProp="children"
        :filterOption="filterOption"
        @change="searchMethods"
        @blur="hiddenClick"
      >
        <a-select-option v-for="site in search" :key="site.id" :value="site.id">{{ site.meta.title }}</a-select-option>
      </a-select>
    </span>
    <!--    <header-notice class="action"/>-->
    <a-dropdown>
      <span class="action action-full ant-dropdown-link user-dropdown-menu">
        <a-avatar class="avatar" size="small" :src="getAvatar()" />
        <span v-if="isDesktop()">欢迎您，{{ nickname() }}</span>
      </span>
      <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
        <a-menu-item key="4" @click="updatePassword">
          <a-icon type="setting" />
          <span>密码修改</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <span class="action">
      <a class="logout_title" @click="handleLogout">
        <a-icon type="logout" />
        <span v-if="isDesktop()">&nbsp;退出登录</span>
      </a>
    </span>
  </div>
</template>

<script>
import HeaderNotice from './HeaderNotice'
import { mapActions, mapGetters, mapState } from 'vuex'
import { mixinDevice } from '@/utils/mixin.js'

export default {
  name: 'UserMenu',
  mixins: [mixinDevice],
  data() {
    return {
      //菜单搜索
      search: [],
      shows: false,
      showDownloadApp: false,
      qrCodeImage: ''
    }
  },
  components: {
    HeaderNotice
  },
  props: {
    theme: {
      type: String,
      required: false,
      default: 'dark'
    }
  },
  /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
  created() {
    let lists = []
    this.searchMenus(lists, this.permissionMenuList)
    this.search = [...lists]
  },
  computed: {
    ...mapState({
      // 后台菜单
      permissionMenuList: state => state.user.permissionList
    }),
    isPortal() {
      return window.__POWERED_BY_QIANKUN__
    }
  },
  /* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
  methods: {
    portalNavigate() {
      window.location.href = process.env.VUE_APP_MAIN_PUBLIC_PATH
    },
    /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
    showClick() {
      this.shows = !this.shows
      this.$emit('searchCli', this.shows)
    },
    hiddenClick() {
      this.shows = false
      this.$emit('blurCli')
    },
    /* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
    ...mapActions(['Logout']),
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    getAvatar() {
      return window._CONFIG['resourcesUrl'] + this.avatar()
    },
    handleLogout() {
      const that = this

      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        centered: true,
        onOk() {
          return that
            .Logout({})
            .then(() => {
              if (window.__POWERED_BY_QIANKUN__) {
                window.location.href = process.env.VUE_APP_MAIN_PUBLIC_PATH
              } else {
                window.location.href = process.env.VUE_APP_PUBLIC_PATH
              }
            })
            .catch(err => {
              that.$message.error({
                title: '错误',
                description: err.message
              })
            })
        },
        onCancel() {}
      })
    },
    updatePassword() {
      let username = this.userInfo().username
      this.$refs.userPassword.show(username)
    },
    /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
    searchMenus(arr, menus) {
      for (let i of menus) {
        if (!i.hidden && 'layouts/RouteView' !== i.component) {
          arr.push(i)
        }
        if (i.children && i.children.length > 0) {
          this.searchMenus(arr, i.children)
        }
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    searchMethods(value) {
      let jump = this.search.filter(item => item.id == value)
      this.$router.push({ path: jump[0].path })
    }
    /*update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
  }
}
</script>

<style lang="scss" scoped>
/* update_begin author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
/* update-begin author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
.user-wrapper .search-input {
  width: 180px;
  color: white;

  ::v-deep {
    .ant-select-selection {
      background-color: inherit;
      border: 0;
      border-bottom: 1px solid white;
    }

    .ant-select-selection__placeholder,
    .ant-select-search__field__placeholder {
      color: inherit;
    }
  }
}

/* update-end author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
/* update_end author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
</style>

<style scoped>
.logout_title {
  color: inherit;
  text-decoration: none;
}
</style>
