

<template>
  <div style="display: flex;align-items: center;justify-content: flex-start">
    <el-button ref="firstPage1" :type="getMainType(1)" size="mini" style="height: 23px;;line-height: 10px" @click="changeView(1)">首页</el-button>
    <el-button ref="firstPage2" :type="getMainType(2)" size="mini" style="height: 23px;;line-height: 10px" @click="changeView(2)">生产看板</el-button>
    <el-button ref="firstPage3" :type="getMainType(3)" size="mini" style="height: 23px;;line-height: 10px" @click="changeView(3)">管理看板</el-button>
    <el-button ref="firstPage4" :type="getMainType(4)" size="mini" style="height: 23px;;line-height: 10px" @click="changeView(4)">数据查询</el-button>
    <el-button ref="firstPage5" :type="getMainType(5)" size="mini" style="height: 23px;;line-height: 10px" @click="changeView(5)">数据维护</el-button>
    <el-button ref="firstPage6" :type="getMainType(6)" size="mini" style="height: 23px;;line-height: 10px" @click="changeView(6)">关于</el-button>
    <div style="width: 3px;height: 25px;background: #ffcc00;margin: 0 10px"></div>
    <span v-if="viewType === 1">
      <el-button ref="firstPage11" :type="getChildType('')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('')">前悬综合看板</el-button>
      <el-button ref="firstPage12" :type="getChildType('indexHX')" size="mini" style="height: 23px;line-height: 10px" @click="routeJump('indexHX')">后悬综合看板</el-button>
      <el-button ref="firstPage13" :type="getChildType('SafetyCross')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('SafetyCross')">安全十字</el-button>
    </span>
    <span v-if="viewType === 2">
      <el-button ref="firstPage21" :type="getChildType('LineStatus')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('LineStatus')">产线状态</el-button>
      <el-button ref="firstPage22" :type="getChildType('AlarmSearch')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('AlarmSearch')">报警信息</el-button>
      <el-button ref="firstPage23" :type="getChildType('PeopleStatus')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('PeopleStatus')">联络技能</el-button>
    </span>
    <span v-if="viewType === 3">
      <el-button ref="firstPage31" :type="getChildType('VisualFile')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('VisualFile')">目视文件</el-button>
      <el-button ref="firstPage32" :type="getChildType('ProcessFile')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('ProcessFile')">工艺参数</el-button>
    </span>
    <span v-if="viewType === 4">
      <el-button ref="firstPage41" :type="getChildType('LineInfoExport')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('LineInfoExport')">线体信息查询</el-button>
      <el-button ref="firstPage42" :type="getChildType('AlarmSearchExport')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('AlarmSearchExport')">报警信息查询</el-button>
      <el-button ref="firstPage43" :type="getChildType('AccidentSearch')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('AccidentSearch')">安全事故查询</el-button>
      <el-button ref="firstPage44" :type="getChildType('ChangeSearchExport')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('ChangeSearchExport')">变化点查询</el-button>
    </span>
    <span v-if="viewType === 5">
      <el-button ref="firstPage51" :type="getChildType('OrderSearch')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('OrderSearch')">订单管理</el-button>
      <el-button ref="firstPage52" :type="getChildType('AccidentEdit')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('AccidentEdit')">事故管理</el-button>
      <el-button ref="firstPage53" :type="getChildType('KPI')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('KPI')">KPI管理</el-button>
      <el-button ref="firstPage54" :type="getChildType('LineInfoSet')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('LineInfoSet')">产线管理</el-button>
      <el-button ref="firstPage55" :type="getChildType('ClassInfoSet')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('ClassInfoSet')">班组管理</el-button>
      <el-button ref="firstPage56" :type="getChildType('AlarmSet')" size="mini" style="height: 23px;;line-height: 10px" @click="routeJump('AlarmSet')">报警管理</el-button>
    </span>
    <span v-if="viewType === 6">
      <el-button ref="firstPage61" :type="getChildType('About')" size="mini" style="height: 23px;line-height: 10px" @click="routeJump('About')">介绍</el-button>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      viewType:1,
      childName:'',
      timeoutObj:null,
    }
  },
  created() {
    this.routeJump('')
  },
  methods:{
    routeJump(val, state) {
      this.childName = val
      clearTimeout(this.timeoutObj)
      console.log(val)
      if (val.indexOf('/') !== -1) {
        val = val.substring(1)
      }
      this.$router.push({
        path: '/' + val
      })
      // this.$router.go(0)

      if(val === ''){
        this.timeoutObj = setTimeout(()=>{
          this.routeJump('indexHX')
        },1000 * 5)
      }else if(val === 'indexHX'){
        this.timeoutObj = setTimeout(()=>{
          this.routeJump('')
        },1000 * 5)
      }
    },
    changeView(type) {
      this.viewType = type
    },
    getMainType(type) {
      return type === this.viewType ? 'warning' : 'primary'
    },
    getChildType(name) {
      return name === this.childName ? 'warning' : 'primary'
    },
  }
}
</script>

<style scoped lang="scss">

</style>