<template>
  <div class="top-meun-swrapper">
    <a-menu
            v-model="current"
            mode="horizontal"
            style="background: none;"
            @select="meunSelect"
            v-if="device === 'desktop'"
    >
      <a-menu-item :key="item.name" v-for="item in menus" >
        <a-icon :type="item.meta.icon" v-if="item.meta.icon"></a-icon>
        {{ item.meta.title }}<span :class="item.meta.num>0?(item.meta.num>9?'count':'countNum'):''">{{item.meta.num>9||item.meta.num<1?'':item.meta.num}}</span>
      </a-menu-item>
    </a-menu>
    <a-select  v-else style="min-width: 60px" v-model="current" @select="meunSelect">
      <a-select-option :value="item.name" :key="item.name" v-for="item in menus">{{ item.meta.title }}<span :class="item.meta.num>0?(item.meta.num>9?'count':'countNum'):''">{{item.meta.num>9||item.meta.num<1?'':item.meta.num}}</span></a-select-option>
    </a-select>
  </div>

</template>

<script>
import store from '@/store';
import { mixinDevice } from '@/utils/mixin.js';


export default {
  name: "HeadMeun",
  props:{
    menus: {
      type: Array,
      required: true
    }
  },
  mixins: [mixinDevice],
  data(){
    return {
      total:0
    }
  },
  methods:{

    meunSelect(obj){

      if(this.device === 'desktop'){
        this.$emit('topMenuSelect', obj)
      }else{
        this.$emit('topMenuSelect', {key:obj})
      }

    },
    prompt(){


    }
  },
  mounted(){
    this.prompt()
  },
  computed:{
    current:{
      get(){

        if(this.device === 'desktop'){
          return this.$store.state.app.headName;
        }else{
          return this.$store.state.app.headName[0];
        }

      },
      set(val){

        if(this.device === 'desktop'){
          store.commit("SER_HEAD_NAME",val)
        }else{
          store.commit("SER_HEAD_NAME",[val])
        }

      }

    }
  }
}
</script>

<style scoped lang="less">
  .countNum{
    color:#fff;
    font-size: 10px;
    text-align: center;
    line-height: 14px;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    background-color: #fb3a3a;
    border-radius: 20px;
    /*top: -3px;*/
    position: relative;
  }
  .count{
    /*color:#fff;*/
    /*font-size: 10px;*/
    /*text-align: center;*/
    /*line-height: 14px;*/
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 5px;
    background-color: red;
    border-radius: 20px;
    top: -3px;
    position: relative;
  }
.top-meun-swrapper{
  width: auto;
  margin-left: 20px;
  display: inline-block;

  .ant-menu-horizontal{
    border-color: transparent;
  }
  .ant-menu-horizontal > .ant-menu-item, .ant-menu-horizontal > .ant-menu-submenu{
    height: 59px;
    line-height: 59px;
    color: #40464C;
  }
  .ant-menu-horizontal > .ant-menu-item:hover, .ant-menu-horizontal > .ant-menu-submenu:hover, .ant-menu-horizontal > .ant-menu-item-active, .ant-menu-horizontal > .ant-menu-submenu-active, .ant-menu-horizontal > .ant-menu-item-open, .ant-menu-horizontal > .ant-menu-submenu-open, .ant-menu-horizontal > .ant-menu-item-selected, .ant-menu-horizontal > .ant-menu-submenu-selected{
    color: #2280F7;
    border-color: #2280F7;
  }
}
</style>
