<template>
  <div class="fixTopBox">
    <vue-scroll ref="vs">
      <div class="topContaion">
        <div class="topBox">
          <div class="topMenu">
            <ul>
              <menu-item
                v-for="(menu,index) in topMenuRight"
                :key="index"
                :curStatus="$store.state.curStatus"
                :menu="menu"
                @click="changeMenu">
              </menu-item>
            </ul>
          </div>
          <weather :city="city" :days="2"/>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import Weather from './weather/weather'
import MenuItem from '@/components/menu/MenuItem'
export default {
  components: {Weather, MenuItem},
  data () {
    return {
      topMenuLeft: [
        { label: '总体态势', id: 1, component: 'index' },
        { label: '智慧管网', id: 2, component: 'WisdomPipeNetwork' },
        { label: '智慧交通', id: 3, component: 'WisdomTraffic' },
        { label: '智慧公共安全 ', id: 4, component: 'WisdomPublicSafety' },
        { label: '智慧城管', id: 5, component: 'WisdomCityManage' }
      ],
      topMenuRight: [
        { label: '智慧政务', id: 6, component: 'WisdomGovernmentAffairs' },
        { label: '智慧社区', id: 7, component: 'WisdomCommunity' },
        { label: '智慧园林', id: 8, component: 'WisdomGardens' },
        { label: '智慧教育', id: 9, component: 'WisdomEducation' },
        { label: '智慧医疗', id: 10, component: 'WisdomMedicalTreatment' },
        { label: '智慧旅游', id: 11, component: 'WisdomTravel' }
      ],
      city: '赣州市'
    }
  },
  mounted () {
    this.$refs['vs'].scrollTo({ x: '50%' }, 500)
  },
  methods: {
    ...mapActions(['changeStatus', 'changeStatus3']),
    changeMenu (params) {
      // 判断该菜单内容是否已存在
      let menuData = [...this.$store.state.status1, ...this.$store.state.status2, ...this.$store.state.status3]
      for (let i = 0; i < menuData.length; i++) {
        if (menuData[i].component === params.component) return
      }
      // 不存在就发送websocket
      if (this.$ws.readyState === 1) {
        console.log(this.$ws.readyState)
        this.$ws.send(JSON.stringify(params))
      } else {
        (
          this.changeStatus3(params.component)
        )
      }
    }
  }
}
</script>

<style scoped>
  .fixTopBox {
    width: 100%;
    height: 110px;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    font-size: .07rem;
  }
  .topContaion{
    width: 100%;
    min-width: 1400px;
    height: 110px;
    padding-bottom: .2rem;
    overflow: hidden;
    background: url("../assets/images/top-line3.png") no-repeat;
    background-size: contain;
    background-position: bottom center;
  }
  .topBox{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .topMenu{
    flex: 1;
    margin: 0 2%;
  }
  .topMenu:last-child{
    flex: 2;
  }
  .topMenu ul, .topWeather ul{
    display: flex;
    justify-content: space-between;
  }
</style>