<template>
  <div :class="wrpCls">
    <!-- <template v-if="currentUser.enterpriseName!=''">
    <span class="ant-pro-account-avatar">
      <a-avatar
        size="small"
        :src="enterpriseIcon"
        class="antd-pro-global-header-index-avatar"
      />
      <span>{{currentUser.enterpriseName}}</span>
    </span>

    </template> -->

    <!-- <a :href="home_url" target="_blank" class="website-home"><a-icon type="home" /></a> -->
    <!-- <div style="display:inline-block;" @mouseenter="()=>{hover = true}" @mouseleave="()=>{hover=false}"> -->
    <!-- <plg-icon v-if="!hover" type="iconfont-iconcommodity-batch-number-query" :pstyle="{fontSize:'18px'}"  /> -->

    <a-select
      show-search
      placeholder="搜索功能"
      style="width: 150px; margin-right: 10px"
      allowClear
      :default-active-first-option="false"
      :show-arrow="false"
      :filter-option="false"
      :not-found-content="null"
      :options="options"
      @search="handleSearch"
      @change="handleChange"
    >
    </a-select>

    <a-dropdown
      overlayClassName="header-right-dropdown"
      style="margin-right: 20px; height: 100%"
      v-if="warehouseName"
      placement="bottomRight"
    >
      <span class="ant-pro-account-avatar" style="display: inline-block; position: relative">
        <plg-icon type="iconfont iconcangchucangku" style="float: left; display: block; font-size: 18px" />
        <span
          class="ant-dropdown-link"
          style="
            max-widht:280px;
            white-space:nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
            font-size: 14px;
            padding: 0 8px;
            display: inline-block;
            position: relative;
          "
        >
          {{ warehouseName }}
        </span>
        <plg-icon type="down" />
      </span>

      <template v-slot:overlay>
        <a-menu class="ant-pro-drop-down menu">
          <template v-for="(item, index) in warehouseOptions">
            <a-menu-item :key="index" @click="changeWarehouse(item)">
              <a href="javascript:;" style="padding-left: 8px">{{ item.warehouseName }}</a>
            </a-menu-item>
            <a-menu-divider v-if="warehouseOptions.length - 1 !== index" :key="'divider' + index" />
          </template>
        </a-menu>
      </template>
    </a-dropdown>

    <!-- </div> -->
    <avatar-dropdown
      :themeColor="themeColor"
      :menu="showMenu"
      :current-user="currentUser"
      :class="prefixCls"
      @systemSettings="systemSettings"
    />
    <select-lang :class="prefixCls" />
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import SelectLang from '@/components/SelectLang'

import defaultSetting from '@/config/defaultSettings'
import enterpriseIcon from '@/assets/enterprise.png'
import PlgIcon from '@/components/PlgIcon'
const PinyinMatch = require('pinyin-match').default

export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    SelectLang,
    PlgIcon
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    },
    themeColor: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      hover: false,
      options: [],
      enterpriseIcon,
      showMenu: true,
      currentUser: {},
      home_url: defaultSetting.home_url,
      warehouseOptions: [],
      warehouseName: ''
    }
  },
  watch: {
    "$store.getters.warehouse": {
      handler(val) { 
        sessionStorage.setItem('warehouse', JSON.stringify(val))
        window.location.reload()
      },
      deep: true
    }
  },
  methods: {
    systemSettings() {
      this.$emit('systemSettings')
    },
    /**
     * 搜索菜单
     */
    handleSearch(value) {
      const { menus } = this.$store.state.user
      if (value == '') {
        this.resetSearch()
        return
      }
      const filterMenus = menus.filter(o => {
        if (PinyinMatch.match(o.name, value).length > 0) {
          return true
        }
        // if (o.name.indexOf(value) !== -1) {
        //   return true
        // }
      })
      const options = filterMenus.map((o, index) => {
        return {
          label: o.name,
          value: `${o.path}__${index}`
        }
      })

      this.options = options
    },
    handleChange(value) {
      if (!value) return false
      value = value.split('__')[0]
      const { menus } = this.$store.state.user
      this.value = value
      let { path } = menus.filter(o => o.path == value)[0]
      this.$router.push({ path })
      this.resetSearch()
    },
    /**
     * 重置搜索结果
     */
    resetSearch() {
      const { menus } = this.$store.state.user
      const options = menus.map((o, index) => {
        return {
          label: o.name,
          value: `${o.path}__${index}`
        }
      })
      this.options = options
    },
    changeWarehouse(item) {
      this.$store.commit('SET_WAREHOUSE', item)
      if (item && item.warehouseName) {
        this.warehouseName = item.warehouseName
      }
    }
  },
  computed: {
    wrpCls() {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${this.isMobile || !this.topMenu ? 'light' : this.theme}`]: true
      }
    }
  },
  mounted() {
    const { nickname, enterpriseName, warehouse } = this.$store.getters
    const { warehouseList } = this.$store.getters.userInfo
    if (warehouseList) {
      this.warehouseOptions = warehouseList || []
      if (warehouseList && warehouseList[0] && warehouseList[0].warehouseName) {
        this.warehouseName = warehouse ? warehouse.warehouseName : warehouseList[0].warehouseName
      }
    }

    this.currentUser = {
      name: nickname,
      enterpriseName
    }
  }
}
</script>

<style lang="less">
.header-right-dropdown {
  .ant-pro-drop-down {
    .action {
      margin-right: 8px;
    }
    .ant-dropdown-menu-item {
      min-width: 140px;
    }
  }
}
.website-home {
  color: rgba(0, 0, 0, 0.6);
  display: inline-block;
  height: 100%;
  padding: 0 12px;
  cursor: pointer;
}
// .ant-pro-drop-down {
//   /deep/ .action {
//     margin-right: 8px;
//   }
//   /deep/ .ant-dropdown-menu-item {
//     min-width: 160px;
//   }
// }
</style>
