<template>
  <div class="eqData flex-col">
    <div class="blur-background" />
    <div class="eqData_title">
      <div class="eqData_title_center"> 设备数据 </div>
      <div class="eqData_title_right">

        <img :src="searchImg" class="eqData_title_right_icon">

        <input v-model="searchText" type="text" placeholder="搜索" class="eqData_title_right_input"></input>
      </div>
    </div>
    <div class="eqData_content">
      <div class="flex-row justify-center">

        <!-- 左侧选择器 -->
        <EqSelectedComponent @select-item="handleSelectItem" />
        <!-- 右侧数据展示 -->
        <!-- 路由切换按钮 -->
        <div class="change_router_icon"><i class="el-icon-sort" @click="handleRouterChange"></i></div>
        <!-- <i class="el-icon-sort"></i> -->
        <!-- 子路由 -->
        <router-view></router-view>
      </div>
    </div>


  </div>
</template>
<script>
import '@/css/dcs/style.css'
import ProgressBarComponent from '@/components/dcs/ProgressBarComponent.vue'
import EqSelectedComponent from '@/components/dcs/EqSelectedComponent.vue'
import config from '@/myConfig/config'
import router from '@/router';
import store from '@/store';
export default {
  components: { ProgressBarComponent, EqSelectedComponent },
  props: {},
  data() {
    return {

      iconImg: require('@/assets/dcs/eqData/icon.svg'), // 图标

      searchImg: require('@/assets/dcs/eqData/search.svg'), // 搜索图标

      searchText: '', // 搜索框输入值
      activeIndex: '', // 菜单激活项
      menuItems1: [
        { index: 'K1', label: 'K1组' },
        { index: 'K2', label: 'K2组' },
        { index: 'K3', label: 'K3组' },
        { index: 'K4', label: 'K4组' }
      ],
      menuItems2: [
        { index: 'L1', label: 'L1组' },
        { index: 'L2', label: 'L2组' },
        { index: 'L3', label: 'L3组' },
        { index: 'L4', label: 'L4组' }
      ],

      eqNO: 'K1', // 设备编号
      eqArr: config.eqGroupNames, // 设备编号数组
  

    }
  },
  mounted() {
    // this.$store.dispatch('setEqBucketName', 'mybucket111');
    console.log('store',store.getters.eqBucketName,store.getters.eqNo);
  },
  beforeDestroy() {
   
  },

  methods: {
    // 父组件传递的 select-item 事件
    handleSelectItem(key) {
      console.log('父组件接收到的 key 值:', key);
      // this.paramsObj.bucketName = key
      // this.getChartsData()
      this.$store.dispatch('setEqBucketName', key);
      console.log('store',store.getters.eqBucketName);
    },
    // 路由切换
    handleRouterChange() {
      // this.$router.push({name: 'HistoryEchart'})
      const currentPath = this.$route.path;
      console.log('当前路由:', currentPath);
      console.log('当前路由:', currentPath.includes('/dcs/eqData/eqDataTable'));
      if (currentPath.includes('/dcs/eqData/eqDataTable')){
        this.$router.push({ name: 'eqDataEchart' });
      } else {
        this.$router.push({ name: 'eqDataTable'});
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.color_red {
  color: #FF444B !important;
  font-size: 15px;
}



.eqData {
  width: 1920px;
  height: 1080px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(2px);


  .eqData_title {
    background-image: url('../../../assets/dcs/eqData/header.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1919.5px;
    height: 74.5px;
    flex-shrink: 0;
    position: relative;

    .eqData_title_center {
      font-family: PangMenZhengDao;
      font-size: 36px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      letter-spacing: 7.2px;
      background: linear-gradient(180deg, #FFF 32.33%, #00ABFF 130.49%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;
      margin-top: 10px;
    }

    .eqData_title_right {
      position: absolute;
      right: 220px;
      top: 10px;
      display: inline-flex;
      padding: 4px 8px;
      justify-content: center;
      align-items: center;
      gap: 4px;
      border-radius: 5px;
      background: #446094;

      .eqData_title_right_icon {
        width: 16px;
        height: 16px;
      }

      .eqData_title_right_input {
        width: 196px;
        border: none;
        background-color: transparent;
        color: #B4C7D9 !important;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }

      input:focus {
        outline: none;
      }

    }
  }
  .eqData_content {

    .change_router_icon {
      position: absolute;
      top: 14px;
      right: 64px;
      background-color: white;
    }
  }
}
</style>
