<template>
  <!-- 统计分析 -->
  <div class="app-container statistical-container">
    <el-form :model="queryParams" ref="queryForm" size="small" inline>
      <el-form-item>
        <el-date-picker type="year" value-format="yyyy" placeholder="请选择年" v-model="queryParams.years" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 上方卡片 -->
    <CardInfo :cardData="cardData" />

    <!-- 图表 -->
    <ChartInfo :chartData="chartData" />
  </div>
</template>

<script>
import CardInfo from './components/card-info'
import ChartInfo from './components/chart-info'
import { getTaskStatisticsApi, getTaskStatisticsByMonthApi } from '@/api/educationalTraining/statisticalAnalysis.js'
export default {
  components: {
    CardInfo,
    ChartInfo,
  },
  data() {
    return {
      queryParams: {
        years: new Date().getFullYear() + '',
      },
      cardData: {}, // 卡片信息
      chartData: {}, //图表信息
    }
  },

  methods: {
    handleQuery() {
      this.getTaskStatisticsAndChartData()
    },
    // 获取卡片次数 和 图表数据
    async getTaskStatisticsAndChartData() {
      const res = await getTaskStatisticsApi({
        year: this.queryParams.years,
      })

      if (res.code === 200) {
        this.cardData = res.data
      }

      const result = await getTaskStatisticsByMonthApi({ year: this.queryParams.years })
      console.log('resultresult', result)
      if (result.code === 200) {
        this.chartData = result.data
      }
    },
  },

  created() {
    this.getTaskStatisticsAndChartData()
  },
}
</script>

<style lang="scss" scoped>
.statistical-container {
  display: flex;
  flex-direction: column;
}
</style>
