<template>
  <div style="flex: 1">
    <Container name="填报总览" icon="cockpitItemIcon" size="calendarBg" topSize="calendarTitleBg">
      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
      <div class="kpi-content" style="padding: 14px 14px; display: flex;flex-direction: column; width: 100%;">
        <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
        <div class="bottom"
          style="width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 844px;padding: 26px 0px;">
          <!-- 动态生成12个月的容器：优化flex布局，缩小行间距 -->
          <div class="month-list">
            <!-- 循环生成12个月：通过判断当前月份索引，添加current类 -->
            <div class="monthItem" :class="{
              'has-data': month.haveData,
              'current': index === currentMonthIndex // 本月匹配current样式
            }" v-for="(month, index) in list" :key="index">
              {{ month.name }}
            </div>
          </div>
        </div>
      </div>
    </Container>
  </div>
</template>

<script>
import Container from './container.vue'
// import * as echarts from 'echarts'
// import topItem from './operating-item.vue'

export default {
  name: 'ProductionStatus',
  components: { Container },
  // mixins: [resize],
  props: {
    calendarList: {  // 接收父组件传递的年月状态对象
      type: Object, // 注意：父组件传递的是对象，不是数组，修正props类型
      default: () => ({}) // 默认空对象，避免报错
    },
  },
  data() {
    return {
      chart: null,
      list:[]
    }
  },
  computed: {
    // 计算属性：获取当前月份对应的索引（0-11，对应1月-12月）
    currentMonthIndex() {
      // new Date().getMonth() 返回 0(1月) - 11(12月)，正好匹配monthList索引
      return new Date().getMonth();
    }
  },
  watch: {
    // 监听calendarList变化，实时更新monthList的haveData状态
    calendarList: {
      immediate: true, // 组件挂载时立即执行一次
      deep: true, // 深度监听对象内部属性变化
      handler(newVal) {
        this.updateMonthHaveData(newVal);
      }
    }
  },
  mounted() {
    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
    // this.$nextTick(() => this.updateChart())
  },
  methods: {
    // 根据calendarList更新monthList的haveData状态
    updateMonthHaveData(calendarObj) {
      if (!calendarObj || typeof calendarObj !== 'object') return;
      const keys = Object.keys(calendarObj);
      if(keys.length == 0){
        return
      }
      console.log('calendarObj',calendarObj)
      this.list = []
      for(let i = 0; i < keys.length; i++) {
        this.list.push({name:i+1+'月',haveData:calendarObj[keys[i]],isActive:i==new Date().getMonth()})
      }
    },
  }
}
</script>

<style lang='scss' scoped>
// 月份列表容器（flex布局，自动换行）
.month-list {
  // 内联样式已优化行间距，此处可留空或补充其他样式
}

// 基础月份样式
.monthItem {
  width: 100px;
  height: 57px;
  border-radius: 4px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 57px;
  text-align: center;
  font-style: normal;
  cursor: pointer; // 鼠标悬浮手型
  transition: all 0.2s ease; // 过渡效果，样式切换更平滑
  border: 2px solid transparent; // 透明边框，避免选中时布局偏移
  margin: 0 auto 10px; // 清除默认外边距，进一步缩小缝隙
}

// 有数据的样式（背景色#D1E8FF）
.monthItem.has-data {
  background-color: #D1E8FF;
}

// 无数据的样式（背景色#EFF3F8，基础样式默认值）
.monthItem:not(.has-data) {
  background-color: #EFF3F8;
}

// 本月样式（current类，边框2px solid #0B58FF）
.monthItem.current {
  border: 2px solid #0B58FF !important;
}
</style>

<style></style>
