<template>
  <div style="height: 100%;border-radius: 5px;background-color: #fff;margin: 0 3px;">
    <el-col :span="10" style="display: flex;align-items: center;justify-content: flex-start;height: 100%;">
      <div style="width: 22px;color: #13227a;font-size: 0.7rem;text-align: center;font-weight: bolder;line-height: 20px;margin-left: 2px;display: flex;justify-content: center;align-items: center;">
        页面
      </div>
      <div id="OperationGuide" class="navigationBar" @click="routeJump('OperationGuide')">
        <img :src="require('@/assets/image/OperationGuide.png')" width="28px"/>
        <span :style="getButtonStyle('OperationGuide')" id="操作指南">操作指南</span>
      </div>
      <div id="PassStation" class="navigationBar" @click="routeJump('PassStation')">
        <img :src="require('@/assets/image/OrderCompletion.png')" width="26px"/>
        <span :style="getButtonStyle('PassStation')" id="过站信息">过站信息</span>
      </div>
      <div id="Andon" class="navigationBar" @click="routeJump('Andon')">
        <img :src="require('@/assets/image/Andon.png')" width="28px"/>
        <span :style="getButtonStyle('Andon')" id="ANDON">安灯呼叫</span>
      </div>
    </el-col>
    <el-col :span="14" style="display: flex;align-items: center;justify-content: flex-start;height: 100%;">
      <function-button />
    </el-col>
   </div>
</template>

<script>
import functionButton from '@/views/layout/components/functionButton.vue'
export default {
  name: 'pageButton',
  components: {
    functionButton
  },
  data() {
    return {
      navigationBarItemValue_current: 'OperationGuide'
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
    this.routeJump(this.$route.path, 'init')
  },
  destroyed() {
  },
  methods: {
    /**
     * 路由跳转 切换导航栏 操作指导 PDF 等
     * @param val
     */
    routeJump(val) {
      if (val.indexOf('/') !== -1) {
        val = val.substring(1)
      }
      this.navigationBarItemValue_current = val
      this.$router.push({
        path: '/' + val
      })
    },
    getButtonStyle(val) {
      let initStyle = {
        color: '#fff'
      }
      if (val === this.navigationBarItemValue_current) {
        initStyle = {
          color: '#f39924'
        }
      }
      return initStyle
    }
  }
}
</script>

<style scoped>
.navigationBar {
  width: 130px;
  height: 40px;
  margin: 0 5px 0 0;
  border-radius: 5px;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #85abdf, #275bbf, #0036b0, #13227a);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #fff;
}
.navigationBar span {
  color: #ffffff;
  font-size: 1rem;
  font-weight: bolder;
}
.navigationBar img {
  margin-right: 5px;
}

.statisticsButton {
  width: 140px;
}
</style>
