<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 {
  data() {
    return {
      // 图表数据（符合uCharts格式）
      chartData: {
        categories: [], // 月份
        series: [] // 入库量、出库量数据
      },
      // 图表配置项
      chartOpts: {
        legend: true, // 显示图例
        dataLabel: false, // 不显示数据标签
        column: {
          type: "group" // 分组柱状图
        },
        xAxis: {
          fontColor: "#666",
          fontSize: 12
        },
        yAxis: {
          fontColor: "#666",
          fontSize: 12,
          gridColor: "#eee"
        },
        color: ["#007aff", "#ff9500"] // 入库、出库颜色
      }
    };
  },
  mounted() {
    // 页面就绪后获取数据
    this.getServerData();
  },
  methods: {
    getServerData() {
      // 显示加载提示
      uni.showLoading({
        title: '加载数据中...',
        mask: true
      });

      // 调用接口获取数据（当前年份作为参数）
      const currentYear = new Date().getFullYear() + '-01';
      monthDataAnalysis({ month: currentYear }).then(res => {
        // 隐藏加载提示
        uni.hideLoading();

        // 格式化接口数据为uCharts所需格式
        this.chartData = {
          categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          series: [
            {
              name: "入库量",
              data: res.data.inData["月"] || [] // 从接口取入库数据
            },
            {
              name: "出库量",
              data: res.data.outData["月"] || [] // 从接口取出库数据
            }
          ]
        };
      }).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>