<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div
        v-if="showCollapse"
        :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        class="avue-breadcrumb">
        <i
          class="icon-navicon"
          @click="setCollapse"/>
      </div>
    </div>
    <div class="top-bar__title">
      <div class="layout_h_r" style="height: 100%;margin-right: 140px;">
        <el-badge v-for="(item, index) in alert" :key="index" v-if="!item.hide" :max="99" :hidden="item.number <= 0" :value="item.number" class="self_center" style="margin-left: 12px;">
          <el-button @click="onNavigate(item)" size="small">{{item.title}}</el-button>
        </el-badge>
      </div>
    </div>
    <div class="top-bar__right">
      <el-tooltip
        v-if="userInfo.avatar"
        effect="dark"
        content="用户头像"
        placement="bottom">
        <img
          id="thumbnail"
          class="top-bar__img">
      </el-tooltip>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ userInfo.nickname }}
          <i class="el-icon-arrow-down el-icon--right"/>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item divided>
            <router-link to="/">首页</router-link>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <router-link to="/info/index">个人信息</router-link>
          </el-dropdown-item>
          <el-dropdown-item
            divided
            @click.native="$refs.seting.open()">界面设置
          </el-dropdown-item>
          <el-dropdown-item
            divided
            @click.native="logout">退出系统
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <top-setting ref="seting"/>
    </div>
  </div>
</template>
<script>
import { getNotice, clearNotice } from '@/api/systemSet/systemSet.js'
import { mapGetters, mapState } from 'vuex'
import { fullscreenToggel, handleImg, listenfullscreen } from '@/util'
import topLock from './top-lock'
import topMenu from './top-menu'
import topTheme from './top-theme'
import topLogs from './top-logs'
import topColor from './top-color'
import topSetting from './top-setting'

const synth = window.speechSynthesis

export default {
  name: 'Top',
  components: {
    topLock,
    topMenu,
    topTheme,
    topLogs,
    topColor,
    topSetting
  },
  filters: {},
  data() {
    return {
      load: false,
      alert: [{
        title: "提现结果",
        menuName: "钱包",
        number: 0,
        tag: 'notice_merchant_withdraw_result',
        url: '',
        hide: false
      },{
        title: "商品审核结果",
        menuName: "商品管理",
        number: 0,
        tag: 'notice_goods_auth_result',
        url: '',
        hide: false
      },{
        title: "订单待发货",
        menuName: "订单管理",
        number: 0,
        tag: 'notice_order_wait_send',
        url: '',
        hide: false
      }]
    }
  },
  computed: {
    ...mapState({
      showDebug: state => state.common.showDebug,
      showTheme: state => state.common.showTheme,
      showLock: state => state.common.showLock,
      showFullScreen: state => state.common.showFullScreen,
      showCollapse: state => state.common.showCollapse,
      showMenu: state => state.common.showMenu,
      showColor: state => state.common.showColor
    }),
    ...mapGetters([
      'userInfo',
      'isFullScreen',
      'tagWel',
      'tagList',
      'isCollapse',
      'tag',
      'logsLen',
      'logsFlag',
      'menu'
    ])
  },
  created() {
    handleImg(this.userInfo.avatar, 'thumbnail')
    this.$store.dispatch('GetUserInfo').then(r => {
      this.loadRead()
    }).catch(e => {})
  },
  mounted() {
    listenfullscreen(this.setScreen)
  },
  methods: {
    search(name, menus) {
      if(menus == undefined || menus.length == 0) {
        return undefined
      }
      for(let i = 0; i < menus.length; i++) {
        let m = menus[i]
        if(m.name == name) {
          return m
        } else {
          let f = this.search(name, m.children)
          if(f) {
            return f
          }
        }
      }
    },
    loadRead() {
      this.alert.forEach(item => {
        let find = this.search(item.menuName, this.menu)
        if(find) {
          item.hide = false
          item.url = find.path
        } else {
          item.hide = true
        }
      })
      let showList = this.alert.filter(item => { return !item.hide })
      let now = showList.map(r => { return r.tag }).join(",")
      if(now.length > 0) {
        getNotice({types: now})
        .then(r => {
          let z = r.data.data
          if(z) {
            z.forEach(d => {
              showList.forEach(item => {
                if(item.tag == d.type) {
                  this.checkNeedSpeak(item, d)
                  item.number = d.value
                }
              })
            })
          }
          setTimeout(this.loadRead, 10000)
        })
        .catch(e => {

        })
      }
    },
    onNavigate(item) {
      clearNotice({types: item.tag})
      .then(r => {
        this.$router.push(item.url)
      })
      .catch(e => {

      })
    },
    checkNeedSpeak(item, remote) {
      if(item.number < remote.value) {
        const msg = new SpeechSynthesisUtterance()
        msg.text = "有新的" + item.title + "消息,请注意查收"
        msg.volume = '1'
        msg.rate = '1'
        msg.pitch = '0'
        msg.lang = 'zh-cn'
        synth.speak(msg)
      }
    },
    handleScreen() {
      fullscreenToggel()
    },
    setCollapse() {
      this.$store.commit('SET_COLLAPSE')
    },
    setScreen() {
      this.$store.commit('SET_FULLSCREEN')
    },
    logout() {
      this.$confirm('是否退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
            this.$router.push({ path: '/login' })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
