<template>
  <div class="weeklyreport-statistics-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>周报统计</span>
          <div>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="loadStatistics"
              style="width: 260px; margin-right: 10px"
            />
            <el-button @click="loadStatistics" style="margin-right: 8px">刷新</el-button>
            <el-button type="primary" @click="goToInsight">组织建议</el-button>
          </div>
        </div>
      </template>

      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="stat-icon" style="background-color: #409eff">
                <el-icon :size="32"><Document /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-label">总周报数</div>
                <div class="stat-value">{{ statistics.totalCount || 0 }}</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="stat-icon" style="background-color: #67c23a">
                <el-icon :size="32"><Check /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-label">已提交</div>
                <div class="stat-value">{{ statistics.submittedCount || 0 }}</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="stat-icon" style="background-color: #e6a23c">
                <el-icon :size="32"><Edit /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-label">草稿</div>
                <div class="stat-value">{{ statistics.draftCount || 0 }}</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="stat-icon" style="background-color: #f56c6c">
                <el-icon :size="32"><TrendCharts /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-label">提交率</div>
                <div class="stat-value">{{ statistics.submissionRate || '0%' }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-divider />
      <div class="unsubmitted-section">
        <div class="section-header">
          <span class="section-title">未提交周报人员</span>
          <el-date-picker
            v-model="unsubmittedWeekStart"
            type="date"
            placeholder="选择周开始日期（周一）"
            @change="loadUnsubmittedUsers"
            style="width: 220px"
          />
        </div>

        <el-alert
          v-if="unsubmittedUsers.length > 0"
          :title="`共 ${unsubmittedUsers.length} 人未提交 ${unsubmittedWeekStartStr} 当周周报`"
          type="warning"
          :closable="false"
          style="margin-bottom: 15px"
        />

        <el-table v-if="unsubmittedUsers.length > 0" :data="unsubmittedUsers" style="width: 100%" max-height="400">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="nickName" label="姓名" width="120" />
          <el-table-column prop="phone" label="手机号" width="130" />
          <el-table-column prop="position" label="职位" min-width="120" />
          <el-table-column prop="jobNumber" label="工号" width="100" />
        </el-table>

        <el-empty v-else image-size="100" description="该周所有用户均已提交周报" />
      </div>
    </el-card>
  </div>
</template>

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

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

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

const statistics = ref<any>({});
const dateRange = ref<any>([
  new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
  new Date()
]);

const unsubmittedUsers = ref<any[]>([]);
const unsubmittedWeekStart = ref<any>(new Date());
const unsubmittedWeekStartStr = computed(() =>
  unsubmittedWeekStart.value ? unsubmittedWeekStart.value.toISOString().split('T')[0] : ''
);

async function loadStatistics() {
  try {
    const params: any = {};
    if (dateRange.value && dateRange.value.length === 2) {
      params.startDate = dateRange.value[0].toISOString().split('T')[0];
      params.endDate = dateRange.value[1].toISOString().split('T')[0];
    }
    const res = await service.weeklyreport.weeklyReport.getStatistics(params);
    statistics.value = res || {};
  } catch (err: any) {
    ElMessage.error(err.message || '加载周报统计失败');
  }
}

onMounted(() => {
  loadStatistics();
  loadUnsubmittedUsers();
});

async function loadUnsubmittedUsers() {
  try {
    const params: any = {};
    if (unsubmittedWeekStart.value) {
      params.weekStart = unsubmittedWeekStart.value.toISOString().split('T')[0];
    }
    const res = await service.weeklyreport.weeklyReport.getUnsubmittedUsers(params);
    unsubmittedUsers.value = res.users || [];
  } catch (err: any) {
    ElMessage.error(err.message || '加载未提交人员失败');
  }
}

function goToInsight() {
  const params: any = { scope: 'week' };
  if (dateRange.value && dateRange.value.length === 2) {
    params.start = dateRange.value[0].toISOString().split('T')[0];
  } else if (unsubmittedWeekStart.value) {
    params.start = unsubmittedWeekStart.value.toISOString().split('T')[0];
  }
  router.push({ path: '/dailyreport/insight', query: params });
}
</script>

<style lang="scss" scoped>
.weeklyreport-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; }
    }
  }

  .unsubmitted-section {
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      .section-title { font-size: 16px; font-weight: bold; color: #303133; }
    }
  }
}
</style>
