<template>
  <div class="fixTopBox">
    <!--横向滚动条-->
    <vue-scroll ref="vs">
      <div class="topContaion">
        <div class="topBox">
          <!--时间-->
          <clock/>
          <!--菜单-->
          <div class="topMenu">
            <ul>
              <menu-item
                v-for="(menu,index) in topMenuLeft"
                :key="index"
                :curStatus="$store.state.curStatus"
                :menu="menu"
                @click="changeMenu">
              </menu-item>
            </ul>
          </div>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import clock from '@/components/clock/Clock'
import MenuItem from '@/components/menu/MenuItem'
export default {
  components: {clock, 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' }
      ]
    }
  },
  mounted () {
    this.$refs['vs'].scrollTo({ x: '50%' }, 500)
  },
  methods: {
    ...mapActions(['changeStatus', 'changeStatus1']),
    // 更换菜单
    // params: {component, currentStatus}
    changeMenu (params) {
      console.log('click')
      // 判断该菜单内容是否已存在,存在不更新页面
      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.changeStatus1(params.component)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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-line1.png") no-repeat;
    background-size: contain;
    background-position: bottom center;
  }
  .topBox{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /*.topTitle{*/
    /*height: 100%;*/
    /*padding: 0 .6rem;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*text-align: center;*/
    /*position: relative;*/
  /*}*/
  /*.topTitle img{*/
    /*width: .5rem;*/
    /*height: .2rem;*/
    /*position: absolute;*/
    /*bottom: -.03rem;*/
  /*}*/
  /*.topTitle img:first-child{*/
    /*left: 0;*/
    /*transform: rotatey(-180deg);*/
  /*}*/
  /*.topTitle img:last-child{*/
    /*right:0;*/
  /*}*/
  /*.topTitle h1{*/
    /*font-size: .13rem;*/
    /*letter-spacing: .02rem;*/
    /*background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);*/
    /*-webkit-background-clip: text;*/
    /*color: transparent;*/
  /*}*/
  .topMenu{
    flex: 1;
    margin: 0 2%;
  }
  .topMenu:last-child{
    flex: 2;
  }
  .topMenu ul{
    display: flex;
    justify-content: space-between;
  }
</style>