<template>
  <div class="monthlyreport-statistics-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>月报统计</span>
          <div>
            <el-date-picker
              v-model="startMonth"
              type="month"
              placeholder="开始月份"
              style="width: 150px; margin-right: 10px"/>
            <el-date-picker
              v-model="endMonth"
              type="month"
              placeholder="结束月份"
              style="width: 150px; margin-right: 10px"/>
            <el-button type="primary" @click="loadStatistics">刷新</el-button>
            <el-button type="success" @click="goToInsight">组织建议</el-button>
          </div>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="stat-card">
            <div class="stat-icon" style="background:#409EFF"><el-icon><Document/></el-icon></div>
            <div class="stat-content">
              <div class="stat-label">总记录数</div>
              <div class="stat-value">{{ statistics.totalCount || 0 }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-card">
            <div class="stat-icon" style="background:#67C23A"><el-icon><Check/></el-icon></div>
            <div class="stat-content">
              <div class="stat-label">已提交</div>
              <div class="stat-value">{{ statistics.submittedCount || 0 }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-card">
            <div class="stat-icon" style="background:#E6A23C"><el-icon><Edit/></el-icon></div>
            <div class="stat-content">
              <div class="stat-label">草稿</div>
              <div class="stat-value">{{ statistics.draftCount || 0 }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'monthlyreport-statistics' });

import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useCool } from '/@/cool';
import { Document, Check, Edit } from '@element-plus/icons-vue';

const { service } = useCool();
const router = useRouter();

const statistics = ref<any>({});
const startMonth = ref<any>(new Date());
const endMonth = ref<any>(new Date());

async function loadStatistics() {
  try {
    const params: any = {};
    if (startMonth.value) params.startMonth = toMonth(startMonth.value);
    if (endMonth.value) params.endMonth = toMonth(endMonth.value);
    const res = await service.monthlyreport.monthlyReport.getStatistics(params);
    statistics.value = res || {};
  } catch (err: any) {
    ElMessage.error(err.message || '加载月报统计失败');
  }
}

function toMonth(d: Date) {
  const Y = d.getFullYear();
  const M = String(d.getMonth() + 1).padStart(2, '0');
  return `${Y}-${M}`;
}

function goToInsight() {
  const params: any = { scope: 'month' };
  if (startMonth.value) {
    const d = new Date(startMonth.value);
    const first = new Date(d.getFullYear(), d.getMonth(), 1);
    params.start = formatYMDLocal(first);
  }
  router.push({ path: '/dailyreport/insight', query: params });
}

function formatYMDLocal(d: Date) {
  const Y = d.getFullYear();
  const M = String(d.getMonth() + 1).padStart(2, '0');
  const D = String(d.getDate()).padStart(2, '0');
  return `${Y}-${M}-${D}`;
}

loadStatistics();
</script>

<style lang="scss" scoped>
.monthlyreport-statistics-container {
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .stat-card {
    display: flex;
    align-items: center;
    padding: 10px 0;

    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      margin-right: 15px;
    }

    .stat-content {
      flex: 1;
      .stat-label { font-size: 14px; color: #909399; margin-bottom: 5px; }
      .stat-value { font-size: 24px; font-weight: bold; color: #303133; }
    }
  }

}
</style>
