<template>
  <div class="app-container">
    <!-- 请假申请统计模块 -->
    <el-card shadow="hover" class="mb15">
      <div slot="header" class="card-header">
        <span>📊 请假申请数据统计</span>
      </div>
      <el-row :gutter="20">
        <!-- 请假类型统计-饼图+柱状图 占比+数量 -->
        <el-col :span="12">
          <div class="chart-title">请假类型分布统计</div>
          <div id="leaveTypeChart" class="chart-container"></div>
        </el-col>
        <!-- 请假部门统计-横向柱状图 -->
        <el-col :span="12">
          <div class="chart-title">各部门请假情况统计</div>
          <div id="leaveDeptChart" class="chart-container"></div>
        </el-col>
        <!-- 请假月度趋势统计-组合图 次数+总天数 -->
        <el-col :span="24">
          <div class="chart-title">月度请假趋势统计 (次数/总天数)</div>
          <div id="leaveMonthChart" class="chart-container big-chart"></div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 部门报餐统计模块 -->
    <el-card shadow="hover">
      <div slot="header" class="card-header">
        <span>🍽️ 部门报餐数据统计</span>
      </div>
      <el-row :gutter="20">
        <!-- 餐别统计-饼图 堂食/打包占比 -->
        <el-col :span="8">
          <div class="chart-title">餐别-堂食/打包占比</div>
          <div id="mealTypePieChart" class="chart-container"></div>
        </el-col>
        <!-- 餐别统计-柱状图 用餐人数+报餐次数 -->
        <el-col :span="16">
          <div class="chart-title">各餐别用餐人数&报餐次数</div>
          <div id="mealTypeBarChart" class="chart-container"></div>
        </el-col>
        <!-- 报餐部门统计-柱状图 -->
        <el-col :span="12">
          <div class="chart-title">各部门报餐汇总统计</div>
          <div id="mealDeptChart" class="chart-container"></div>
        </el-col>
        <!-- 报餐日期趋势统计 -->
        <el-col :span="12">
          <div class="chart-title">日报餐人数趋势统计</div>
          <div id="mealDateChart" class="chart-container"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getLeaveTypeCount, getDeptCount as getLeaveDeptCount, getMonthCount as getLeaveMonthCount } from '@/api/wms/leaveRequest'
import { getMealTypeCount, getDeptCount as getMealDeptCount, getDateCount as getMealDateCount } from '@/api/wms/mealReport'

export default {
  name: 'Report',
  data() {
    return {
      // echarts实例对象
      leaveTypeChart: null,
      leaveDeptChart: null,
      leaveMonthChart: null,
      mealTypePieChart: null,
      mealTypeBarChart: null,
      mealDeptChart: null,
      mealDateChart: null,
      // 各接口数据存储
      leaveTypeData: [],
      leaveDeptData: [],
      leaveMonthData: [],
      mealTypeData: [],
      mealDeptData: [],
      mealDateData: []
    }
  },
  mounted() {
    // 页面加载完成后初始化所有图表+请求数据
    this.initAllCharts()
    this.fetchAllData()
    // 窗口大小改变时，图表自适应
    window.addEventListener('resize', this.resizeAllCharts)
  },
  beforeDestroy() {
    // 销毁图表实例，防止内存泄漏
    window.removeEventListener('resize', this.resizeAllCharts)
    this.disposeAllCharts()
  },
  methods: {
    // 初始化所有图表容器
    initAllCharts() {
      this.leaveTypeChart = echarts.init(document.getElementById('leaveTypeChart'))
      this.leaveDeptChart = echarts.init(document.getElementById('leaveDeptChart'))
      this.leaveMonthChart = echarts.init(document.getElementById('leaveMonthChart'))
      this.mealTypePieChart = echarts.init(document.getElementById('mealTypePieChart'))
      this.mealTypeBarChart = echarts.init(document.getElementById('mealTypeBarChart'))
      this.mealDeptChart = echarts.init(document.getElementById('mealDeptChart'))
      this.mealDateChart = echarts.init(document.getElementById('mealDateChart'))
    },
    // 请求所有接口数据
    fetchAllData() {
      Promise.all([
        this.getLeaveTypeCount({}),
        this.getLeaveDeptCount({}),
        this.getLeaveMonthCount({}),
        this.getMealTypeCount({}),
        this.getMealDeptCount({}),
        this.getMealDateCount({})
      ]).then(() => {
        // 所有数据请求完成后绘制图表
        this.renderLeaveTypeChart()
        this.renderLeaveDeptChart()
        this.renderLeaveMonthChart()
        this.renderMealTypePieChart()
        this.renderMealTypeBarChart()
        this.renderMealDeptChart()
        this.renderMealDateChart()
      })
    },
    // 图表自适应窗口大小
    resizeAllCharts() {
      this.leaveTypeChart?.resize()
      this.leaveDeptChart?.resize()
      this.leaveMonthChart?.resize()
      this.mealTypePieChart?.resize()
      this.mealTypeBarChart?.resize()
      this.mealDeptChart?.resize()
      this.mealDateChart?.resize()
    },
    // 销毁所有图表实例
    disposeAllCharts() {
      this.leaveTypeChart?.dispose()
      this.leaveDeptChart?.dispose()
      this.leaveMonthChart?.dispose()
      this.mealTypePieChart?.dispose()
      this.mealTypeBarChart?.dispose()
      this.mealDeptChart?.dispose()
      this.mealDateChart?.dispose()
    },

    // ======================== 请假相关接口及图表绘制 ========================
    // 请假类型统计
    getLeaveTypeCount(query) {
      return getLeaveTypeCount(query).then(res => {
        this.leaveTypeData = res.data || []
        return res
      })
    },
    // 绘制请假类型饼图
    renderLeaveTypeChart() {
      const data = this.leaveTypeData.map(item => ({
        name: item.type,
        value: item.count,
        days: item.total_days
      }))
      const option = {
        tooltip: { trigger: 'item', formatter: '{b}: <br/>请假次数: {c}次 <br/>请假总天数: {d}天' },
        legend: { orient: 'vertical', top: 'middle', right: 10 },
        series: [
          {
            name: '请假类型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
            color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'],
            label: { show: false, position: 'center' },
            emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
            labelLine: { show: false },
            data: data
          }
        ]
      }
      this.leaveTypeChart.setOption(option)
    },

    // 部门请假统计
    getLeaveDeptCount(query) {
      return getLeaveDeptCount(query).then(res => {
        this.leaveDeptData = res.data || []
        return res
      })
    },
    // 绘制部门请假横向柱状图
    renderLeaveDeptChart() {
      const xData = this.leaveDeptData.map(item => item.dept_name)
      const countData = this.leaveDeptData.map(item => item.count)
      const dayData = this.leaveDeptData.map(item => Number(item.total_days))
      const option = {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { top: 0, right: 0 },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'value', axisLabel: { formatter: '{value}' } },
        yAxis: { type: 'category', data: xData },
        series: [
          { name: '请假次数', type: 'bar', barWidth: '40%', data: countData, itemStyle: { color: '#409EFF' } },
          { name: '请假天数', type: 'bar', barWidth: '40%', data: dayData, itemStyle: { color: '#F56C6C' } }
        ]
      }
      this.leaveDeptChart.setOption(option)
    },

    // 月份请假统计
    getLeaveMonthCount(query) {
      return getLeaveMonthCount(query).then(res => {
        this.leaveMonthData = res.data || []
        return res
      })
    },
    // 绘制月度请假趋势组合图
    renderLeaveMonthChart() {
      const xData = this.leaveMonthData.map(item => item.month)
      const countData = this.leaveMonthData.map(item => item.count)
      const dayData = this.leaveMonthData.map(item => Number(item.total_days))
      const option = {
        tooltip: { trigger: 'axis' },
        legend: { top: 0, right: 0 },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', boundaryGap: false, data: xData },
        yAxis: [{ type: 'value', name: '请假次数' }, { type: 'value', name: '请假天数', right: '15%' }],
        series: [
          { name: '请假次数', type: 'bar', yAxisIndex: 0, data: countData, itemStyle: { color: '#409EFF' } },
          { name: '请假总天数', type: 'line', yAxisIndex: 1, data: dayData, itemStyle: { color: '#F56C6C' }, lineStyle: { width: 3 }, symbol: 'circle' }
        ]
      }
      this.leaveMonthChart.setOption(option)
    },

    // ======================== 报餐相关接口及图表绘制 ========================
    // 餐别统计
    getMealTypeCount(query) {
      return getMealTypeCount(query).then(res => {
        this.mealTypeData = res.data || []
        return res
      })
    },
    // 绘制餐别-堂食打包占比饼图
    renderMealTypePieChart() {
      let totalDineIn = 0
      let totalTakeout = 0
      this.mealTypeData.forEach(item => {
        totalDineIn += Number(item.total_dine_in)
        totalTakeout += Number(item.total_takeout)
      })
      const option = {
        tooltip: { trigger: 'item', formatter: '{b}: {c}人 ({d}%)' },
        legend: { orient: 'vertical', bottom: 0, left: 'center' },
        series: [
          {
            name: '用餐方式',
            type: 'pie',
            radius: ['30%', '70%'],
            center: ['50%', '40%'],
            itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
            color: ['#67C23A', '#E6A23C'],
            data: [
              { name: '堂食人数', value: totalDineIn },
              { name: '打包人数', value: totalTakeout }
            ]
          }
        ]
      }
      this.mealTypePieChart.setOption(option)
    },
    // 绘制餐别人数+次数柱状图
    renderMealTypeBarChart() {
      const xData = this.mealTypeData.map(item => item.meal_name)
      const peopleData = this.mealTypeData.map(item => Number(item.total_people))
      const countData = this.mealTypeData.map(item => item.report_count)
      const option = {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { top: 0, right: 0 },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', data: xData },
        yAxis: { type: 'value' },
        series: [
          {
            name: '总用餐人数',
            type: 'bar',
            data: peopleData,
            itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#409EFF' }, { offset: 1, color: '#66B1FF' }]) }
          },
          {
            name: '报餐次数',
            type: 'line',
            data: countData,
            itemStyle: { color: '#F56C6C' },
            lineStyle: { width: 3 },
            symbol: 'circle',
            symbolSize: 8
          }
        ]
      }
      this.mealTypeBarChart.setOption(option)
    },

    // 报餐部门统计
    getMealDeptCount(query) {
      return getMealDeptCount(query).then(res => {
        this.mealDeptData = res.data || []
        return res
      })
    },
    // 绘制部门报餐柱状图
    renderMealDeptChart() {
      const xData = this.mealDeptData.map(item => item.dept_name)
      const peopleData = this.mealDeptData.map(item => Number(item.total_people))
      const dineInData = this.mealDeptData.map(item => Number(item.total_dine_in))
      const takeoutData = this.mealDeptData.map(item => Number(item.total_takeout))
      const option = {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { top: 0, right: 0 },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', data: xData },
        yAxis: { type: 'value', name: '人数' },
        series: [
          { name: '总人数', type: 'bar', data: peopleData, itemStyle: { color: '#409EFF' } },
          { name: '堂食', type: 'bar', data: dineInData, itemStyle: { color: '#67C23A' } },
          { name: '打包', type: 'bar', data: takeoutData, itemStyle: { color: '#E6A23C' } }
        ]
      }
      this.mealDeptChart.setOption(option)
    },

    // 报餐日期统计
    getMealDateCount(query) {
      return getMealDateCount(query).then(res => {
        this.mealDateData = res.data || []
        return res
      })
    },
    // 绘制日报餐趋势图
    renderMealDateChart() {
      const xData = this.mealDateData.map(item => item.report_date)
      const peopleData = this.mealDateData.map(item => Number(item.total_people))
      const dineInData = this.mealDateData.map(item => Number(item.total_dine_in))
      const takeoutData = this.mealDateData.map(item => Number(item.total_takeout))
      const option = {
        tooltip: { trigger: 'axis' },
        legend: { top: 0, right: 0 },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', boundaryGap: false, data: xData },
        yAxis: { type: 'value', name: '人数' },
        series: [
          { name: '总用餐人数', type: 'line', data: peopleData, itemStyle: { color: '#409EFF' }, lineStyle: { width: 3 } },
          { name: '堂食人数', type: 'line', data: dineInData, itemStyle: { color: '#67C23A' }, lineStyle: { width: 2 } },
          { name: '打包人数', type: 'line', data: takeoutData, itemStyle: { color: '#E6A23C' }, lineStyle: { width: 2 } }
        ]
      }
      this.mealDateChart.setOption(option)
    }
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.app-container {
  padding: 20px;
}
.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}
/* 卡片样式 */
.mb15 {
  margin-bottom: 15px;
}
.card-header {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
/* 图表标题 */
.chart-title {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin-bottom: 10px;
  text-align: center;
}
/* 图表容器基础样式 */
.chart-container {
  width: 100%;
  height: 300px;
  border-radius: 8px;
}
/* 大图表样式 */
.big-chart {
  height: 400px;
}
</style>