<template>
  <div style="flex: 1">
    <Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
      @tabChange="handleChange">
      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应（原有样式不变，仅保留结构） -->
      <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
        <!-- 新增：topItem 专属包裹容器，统一控制样式和布局（原有行内样式不变） -->
        <div class="topItem-container" style="display: flex; gap: 8px;">
          <div class="dashboard left">
            <div class="title">
              采购单价·{{fuelName=='天然气'||fuelName=='LNG液化天然气'||fuelName=='水'?'元/m³':'万元'}}
            </div>
            <div class="line">
              <!-- 绑定对应数据：新增数据绑定，样式不变 -->
              <operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
            </div>
          </div>
          <div class="dashboard right">
            <div class="title">
              产量·吨
            </div>
            <div class="line">
              <!-- 绑定对应数据：新增数据绑定，样式不变 -->
              <operatingSingleBar :detailData="productData"></operatingSingleBar>
            </div>
          </div>
          <div class="dashboard right">
            <div class="title">
              单耗·吨/m³
            </div>
            <div class="line">
              <!-- 绑定对应数据：新增数据绑定，样式不变 -->
              <operatingSingleBar :detailData="unitHaoData"></operatingSingleBar>
            </div>
          </div>
          <div class="dashboard right">
            <div class="title">
              消耗量·m³
            </div>
            <div class="line">
              <!-- 绑定对应数据：新增数据绑定，样式不变 -->
              <operatingSingleBar :detailData="haoNumData"></operatingSingleBar>
            </div>
          </div>
          <div class="dashboard right">
            <div class="title">
              热耗·kcal/kg
            </div>
            <div class="line">
              <!-- 绑定对应数据：新增数据绑定，样式不变 -->
              <operatingSingleBar :detailData="heatConsumptionData"></operatingSingleBar>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </div>
</template>
<script>
import Container from '../components/container.vue'
import operatingSingleBar from './operatingSingleBar.vue'

// import * as echarts from 'echarts'
// import rawItem from './raw-Item.vue'

export default {
  name: 'ProductionStatus',
  components: { Container, operatingSingleBar },
  // mixins: [resize],
  props: {
    relatedData: {
      type: Object,
      default: () => ({
        relatedMon: [], // 物料月度数据（数组格式，存储各物料项）
        relatedTotal: [] // 物料累计数据（数组格式，存储各物料项）
      })
    },
    title: {  // 接收父组件传递的设备数据数组
      type: String,
      default: ''  // 默认空字符串，保持原有配置
    },
    month: {  // 接收父组件传递的设备数据数组
      type: String,
      default: ''  // 默认空字符串，保持原有配置
    },
    fuelName:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null,
      // 新增：当前激活的数据集（默认月度，和第一个组件逻辑对齐，样式无变化）
      activeData: this.relatedData.relatedMon || []
    }
  },
  watch: {
    // 移除无效的itemData监听，新增relatedData深度监听（数据逻辑补充，样式不变）
    relatedData: {
      handler(newVal) {
        this.activeData = newVal.relatedMon || [];
      },
      immediate: true, // 组件挂载时立即执行
      deep: true // 深度监听对象内部变化
    }
    // 保留原有itemData监听（若你需要可保留，此处注释不影响样式）
    // itemData: {
    //   handler(newValue, oldValue) {
    //     // this.updateChart()
    //   },
    //   deep: true // 若对象内属性变化需触发，需加 deep: true
    // }
  },
  // 新增：5个指标对应的计算属性，精准筛选数据（仅数据逻辑，样式不变）
  computed: {
    // 1. 采购单价数据
    unitPriceData() {
      return this.activeData.find(item => (item.name || '').includes('采购单价')) || {
        targetValue: 0,
        value: 0,
        completed: 0,
        diffValue: 0
      };
    },
    // 2. 产量数据
    productData() {
      return this.activeData.find(item => (item.name || '').includes('产量')) || {
        targetValue: 0,
        value: 0,
        completed: 0,
        diffValue: 0
      };
    },
    // 3. 单耗数据
    unitHaoData() {
      return this.activeData.find(item => (item.name || '').includes('单耗')) || {
        targetValue: 0,
        value: 0,
        completed: 0,
        diffValue: 0
      };
    },
    // 4. 消耗量数据
    haoNumData() {
      return this.activeData.find(item => (item.name || '').includes('消耗量')) || {
        targetValue: 0,
        value: 0,
        completed: 0,
        diffValue: 0
      };
    },
    // 5. 热耗数据（新增对应5个指标）
    heatConsumptionData() {
      return this.activeData.find(item => (item.name || '').includes('热耗')) || {
        targetValue: 0,
        value: 0,
        completed: 0,
        diffValue: 0
      };
    }
  },
  mounted() {
    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
    // this.$nextTick(() => this.updateChart())
  },
  methods: {
    // 新增：Tab切换处理函数，同步切换月度/累计数据（仅数据逻辑，样式不变）
    handleChange(value) {
      console.log('Tab 切换值：', value);
      // 根据 Tab 值更新当前激活的数据集
      if (value === 'month') {
        // 切换为月度数据
        this.activeData = this.relatedData.relatedMon || [];
      } else {
        // 切换为累计数据（非 month 均视为累计）
        this.activeData = this.relatedData.relatedTotal || [];
      }
      console.log('当前激活数据集：', this.activeData);
    }
  }
}
</script>

<style lang='scss' scoped>
/* 样式完全保留不变，无任何修改 */
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
.scroll-container {
  /* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
  max-height: 210px;
  /* 2. 溢出滚动：内容超出高度时显示滚动功能 */
  overflow-y: auto;
  /* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
  overflow-x: hidden;
  /* 4. 内边距：与标题栏和容器边缘对齐 */
  padding: 10px 0;

  /* 5. 隐藏滚动条（兼容主流浏览器） */
  /* Chrome/Safari */
  &::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */
  scrollbar-width: none;
  /* IE/Edge */
  -ms-overflow-style: none;
}

.dashboard {
  width: 310px;
  height: 205px;
  background: #F9FCFF;
  padding: 16px 0 0 10px;
  .title {
    // width: 190px;
    height: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    letter-spacing: 2px;
  }

  .number {
    display: flex;
    align-items: center;
    gap: 6px;
    // width: 190px;
    height: 32px;
    font-family: YouSheBiaoTiHei;
    font-size: 32px;
    color: #0B58FF;
    line-height: 32px;
    letter-spacing: 2px;
    text-align: left;
    font-style: normal;
    white-space: nowrap;
  }

  .mom {
    width: 120px;
    height: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    z-index: 1000;
  }
}

// .line {
//   width: 500px;
//   height: 205px;
//   background: #F9FCFF;
// }

// .leftTitle {
//   .item {
//     width: 67px;
//     height: 180px;
//     padding: 37px 23px;
//     background: #F9FCFF;
//     font-family: PingFangSC, PingFang SC;
//     font-weight: 400;
//     font-size: 18px;
//     color: #000000;
//     line-height: 25px;
//     letter-spacing: 1px;
//     // text-align: left;
//     font-style: normal;
//   }
// }
</style>

<!-- <style>
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
.production-status-chart-tooltip {
  background: #0a2b4f77 !important;
  border: none !important;
  backdrop-filter: blur(12px);
}

.production-status-chart-tooltip * {
  color: #fff !important;
}
</style> -->
