<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="line" 
      :chartData="chartData" 
      :opts="chartOpts"
    />
  </view>
</template>

<script>
import { monthDataAnalysis } from "@/api/oa/wms/oaWarehouse";

export default {
  name: 'InventoryTrend',
  // 接收父组件传入的日期参数（YYYY-mm格式）
  props: {
    date: {
      type: String,
      required: true,
      validator: function(value) {
        // 验证格式是否为YYYY-mm
        const reg = /^\d{4}-\d{2}$/;
        return reg.test(value);
      }
    }
  },
  data() {
    return {
      // 图表数据
      chartData: {
        categories: [], // 日期（1日-当前日或当月总天数）
        series: [] // 库存趋势数据
      },
      // 图表配置
      chartOpts: {
        legend: false,
        dataLabel: false,
        line: {
          smooth: true,
          type: "straight"
        },
        xAxis: {
          fontColor: "#666",
          fontSize: 12,
          rotateLabel: true
        },
        yAxis: {
          fontColor: "#666",
          fontSize: 12,
          gridColor: "#eee"
        },
        color: ["#00cc66"],
        padding: [15, 15, 30, 15]
      }
    };
  },
  // 监听日期变化，重新加载数据
  watch: {
    date: {
      immediate: true, // 初始化时立即执行
      handler(newVal) {
        this.getData(newVal);
      }
    }
  },
  methods: {
    getData(selectedDate) {
      // 显示加载提示
      uni.showLoading({
        title: '加载数据中...',
        mask: true
      });
      
      // 从选中日期中提取年份（根据接口需求调整参数）
      const year = selectedDate;
      
      monthDataAnalysis({ month: year }).then(res => {
        // 隐藏加载提示
        uni.hideLoading();
        
        // 解析选中的年月
        const [year, month] = selectedDate.split('-').map(Number);
        
        // 计算当月总天数
        const daysInMonth = new Date(year, month, 0).getDate();
        
        // 计算当前日期是否在选中月份内
        const today = new Date();
        const currentYear = today.getFullYear();
        const currentMonth = today.getMonth() + 1;
        
        // 确定需要显示的天数（如果是当前月则显示到今天，否则显示整月）
        const daysToShow = (year === currentYear && month === currentMonth) 
          ? today.getDate() 
          : daysInMonth;
        
        // 生成日期类别
        const dayCategories = Array.from(
          { length: daysToShow },
          (_, i) => `${i + 1}日`
        );

        // 格式化数据
        this.chartData = {
          categories: dayCategories,
          series: [
            {
              name: "库存趋势",
              data: res.data.dataMap["日"] || []
            }
          ]
        };
      }).catch(err => {
        // 隐藏加载提示
        uni.hideLoading();
        
        // 错误处理
        uni.showToast({
          title: '数据加载失败',
          icon: 'none',
          duration: 2000
        });
        console.error('获取库存趋势数据失败：', err);
      });
    }
  }
};
</script>

<style scoped>
.charts-box {
  width: 100%;
  height: 300px;
  padding: 16rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
}
</style>
