<template>
  <div style="flex: 1">
    <Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
      @tabChange="handleChange">
      <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
        <!-- 横向滚动容器：适配5个成本组件，与第二个组件样式统一 -->
        <div class="topItem-container" style="display: flex; gap: 8px;">
          <!-- 1. 原料成本组件：传递对应筛选数据 -->
          <div class="dashboard left" @click="handleDashboardClick('原料成本','fuelCostAnalysis/fuelCostAnalysis')">
            <div class="title">
              原料成本·元/㎡
            </div>
            <div class="line">
              <operatingSingleBar :detailData="rawMaterialCostData"></operatingSingleBar>
            </div>
          </div>
          <!-- 2. 燃料成本组件：传递对应筛选数据 -->
          <div class="dashboard right" @click="handleDashboardClick('燃料成本','combustible/combustible')">
            <div class="title">
              燃料成本·元/㎡
            </div>
            <div class="line">
              <operatingSingleBar :detailData="fuelCostData"></operatingSingleBar>
            </div>
          </div>
          <!-- 3. 电成本组件：传递对应筛选数据 -->
          <div class="dashboard right" @click="handleDashboardClick('电成本','osElectricityCostAnalysis')">
            <div class="title">
              电成本·元/㎡
            </div>
            <div class="line">
              <operatingSingleBar :detailData="electricCostData"></operatingSingleBar>
            </div>
          </div>
          <!-- 4. 人工成本组件：传递对应筛选数据 -->
          <div class="dashboard right" @click="handleDashboardClick('人工成本','originalSheetLabor')">
            <div class="title">
              人工成本·元/㎡
            </div>
            <div class="line">
              <operatingSingleBar :detailData="laborCostData"></operatingSingleBar>
            </div>
          </div>
          <!-- 5. 制造成本组件：传递对应筛选数据 -->
          <div class="dashboard right"
            @click="handleDashboardClick('制造成本','mfgOverheadCostAnalysis/mfgOverheadCostAnalysis')">
            <div class="title">
              制造成本·元/㎡
            </div>
            <div class="line">
              <operatingSingleBar :detailData="manufacturingCostData"></operatingSingleBar>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </div>
</template>

<script>
import Container from '../components/container.vue'
import operatingSingleBar from './operatingSingleBar.vue'

export default {
  name: 'ProductionStatus', // 保持组件名一致（如需区分可重命名为CostProductionStatus）
  components: { Container, operatingSingleBar },
  props: {
    // 参考第二个组件，改为接收 成本相关数据（支持月度/累计，与第二个组件格式统一）
    relatedData: {
      type: Object,
      default: () => ({
        relatedMon: [], // 成本月度数据（数组格式，存储各成本项）
        relatedTotal: [] // 成本累计数据（数组格式，存储各成本项）
      })
    },
    dateData: {
      type: Object,
      default: () => ({})
    },
    factory: {
      type: [String, Number],
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    month: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      chart: null,
      // 核心：当前激活的成本数据集（默认月度数据，与第二个组件逻辑一致）
      activeData: this.relatedData.relatedMon || [],
      activeMaterial: '' // 选中的成本名称状态
    }
  },
  computed: {
    // 1. 原料成本数据：从激活数据集中筛选，与第二个组件筛选逻辑一致
    rawMaterialCostData() {
      return this.activeData.find(item => item.name === "原料成本") || {
        targetValue: 0,
        value: 0,
        completed: 0,
        diffValue: 0
      };
    },
    // 2. 燃料成本数据：精准筛选
    fuelCostData() {
      return this.activeData.find(item => item.name === "燃料成本") || {
        targetValue: 0,
        value: 0,
        completed: 0,
        diffValue: 0
      };
    },
    // 3. 电成本数据：精准筛选
    electricCostData() {
      return this.activeData.find(item => item.name === "电成本") || {
        targetValue: 0,
        value: 0,
        completed: 0,
        diffValue: 0
      };
    },
    // 4. 人工成本数据：精准筛选
    laborCostData() {
      return this.activeData.find(item => item.name === "人工成本") || {
        targetValue: 0,
        value: 0,
        completed: 0,
        diffValue: 0
      };
    },
    // 5. 制造成本数据：精准筛选
    manufacturingCostData() {
      return this.activeData.find(item => item.name === "制造成本") || {
        targetValue: 0,
        value: 0,
        completed: 0,
        diffValue: 0
      };
    }
  },
  watch: {
    // 监听父组件传递的itemData变化，同步更新激活数据集（与第二个组件逻辑一致）
    relatedData: {
      handler(newVal) {
        this.activeData = newVal.relatedMon || [];
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    console.log('成本组件挂载时的激活数据：', this.activeData);
  },
  methods: {

    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);
    },
    // 成本项点击事件：保留跳转功能，优化参数传递
    handleDashboardClick(material,path) {
      // 1. 记录选中状态
      this.activeMaterial = material;
      // alert(this.$route.query.factory)
      console.log(`点击了【${material}】，月份：${this.month}`, '成本数据：', this.activeData, this.$route.query.factory);

      // 2. 优化路由跳转：month放入query中（修复原代码参数错误）
      this.$router.push({
        path: path,
        query: {
          name: material,
          month: this.month,
          factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
          dateData: this.dateData
        }
      });

      // 3. 向父组件传递事件（携带当前成本项的详细数据）
      this.$emit('dashboard-click', {
        material,
        month: this.month,
        data: this.activeData.find(item => item.name === material) || {}
      });
    },
  }
}
</script>

<style lang='scss' scoped>
/* 与第二个组件样式统一，优化兼容性 */
.scroll-container {
  max-height: 210px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;

  &::-webkit-scrollbar {
    display: none;
  }

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dashboard {
  width: 310px;
  height: 205px;
  background: #F9FCFF;
  padding: 16px 0 0 16px;
  flex-shrink: 0; // 固定宽度，不被挤压（与第二个组件一致）

  .title {
    height: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 18px;
    letter-spacing: 2px;
    margin-bottom: 16px; // 与第二个组件间距一致
  }

  .number {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 32px;
    font-family: YouSheBiaoTiHei;
    font-size: 32px;
    color: #0B58FF;
    line-height: 32px;
    letter-spacing: 2px;
    text-align: left;
  }

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

  // .line {
  //   width: 280px; // 适配310px宽度，避免图表溢出
  //   height: 150px; // 与第二个组件图表高度一致
  // }
}

/* 隐藏横向滚动条，与第二个组件样式统一 */
.topItem-container::-webkit-scrollbar {
  display: none;
}

.topItem-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
</style>
