<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="2"></el-col>
      <el-col :span="22">
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          v-show="showSearch"
          label-width="100px"
        >
          <el-form-item label="巡检点" prop="inspectionPoint">
            <el-input v-model="queryParams.inspectionPoint" placeholder="输入巡检点"></el-input>
          </el-form-item>
          <el-form-item label="巡检人" prop="inspectorId">
            <el-input v-model="queryParams.inspectorId" placeholder="输入巡检人姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 总计：左柱状（巡检点），右环形（巡检人） -->
    <el-row :gutter="24">
      <el-col :span="2"></el-col>
      <el-col :span="20">
        <el-card shadow="never" class="section-card">
          <div class="section-title">总计</div>
          <el-row :gutter="16">
            <el-col :span="12"><Histogram :chart-data="histogramTotalData" /></el-col>
            <el-col :span="12"><CircularDiagram :data="inspectorTotalData" /></el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 本月：左柱状（巡检点），右环形（巡检人） -->
    <el-row :gutter="24">
      <el-col :span="2"></el-col>
      <el-col :span="20">
        <el-card shadow="never" class="section-card">
          <div class="section-title">本月</div>
          <el-row :gutter="16">
            <el-col :span="12"><Histogram :chart-data="histogramMonthData" /></el-col>
            <el-col :span="12"><CircularDiagram :data="inspectorMonthData" /></el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 本日：左柱状（巡检点），右环形（巡检人） -->
    <el-row :gutter="24">
      <el-col :span="2"></el-col>
      <el-col :span="20">
        <el-card shadow="never" class="section-card">
          <div class="section-title">本日</div>
          <el-row :gutter="16">
            <el-col :span="12"><Histogram :chart-data="histogramDayData" /></el-col>
            <el-col :span="12"><CircularDiagram :data="inspectorDayData" /></el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import Histogram from "@/components/ReportAnalytics/Histogram.vue";
import CircularDiagram from "@/components/ReportAnalytics/reportCircularDiagram.vue" 
import { pointStats3, inspectorStats3 } from "@/api/inspection/report.js";
import { ref, reactive, toRefs, getCurrentInstance } from "vue";

const showSearch = ref(true);
const { proxy } = getCurrentInstance();

// 三套柱状数据：总计 / 本月 / 本日（巡检点统计）
const histogramTotalData = ref({ xAxis: [], seriesData: [] });
const histogramMonthData = ref({ xAxis: [], seriesData: [] });
const histogramDayData = ref({ xAxis: [], seriesData: [] });
// 三套环形数据：总计 / 本月 / 本日（巡检人统计）
const inspectorTotalData = ref([]);
const inspectorMonthData = ref([]);
const inspectorDayData = ref([]);

// 汇总展示（可选）
const totalPoint = ref(0);
const totalUser = ref(0);
const monthPoint = ref(0);
const monthUser = ref(0);

// const daterangeOccurTime = ref([]);

const data = reactive({
  queryParams: {
    startTime: null,
    endTime: null,
    inspectionPoint: '',
    inspectorId: ''
  }
});

const { queryParams } = toRefs(data);

function getList() {
  queryParams.value = {
    inspectionPoint: data.queryParams.inspectionPoint,
    inspectorId: data.queryParams.inspectorId
  };
  // 巡检点统计（三合一：总/月/日）
  pointStats3(queryParams.value).then(res => {
    const d = res.data || {};
    const total = d.total || { xAxis: [], seriesData: [] };
    const month = d.month || { xAxis: [], seriesData: [] };
    const day = d.day || { xAxis: [], seriesData: [] };
    histogramTotalData.value = { xAxis: total.xAxis || [], seriesData: total.seriesData || [] };
    histogramMonthData.value = { xAxis: month.xAxis || [], seriesData: month.seriesData || [] };
    histogramDayData.value = { xAxis: day.xAxis || [], seriesData: day.seriesData || [] };
    totalPoint.value = (histogramTotalData.value.seriesData || []).reduce((a,b)=>a+(b||0),0);
    monthPoint.value = (histogramMonthData.value.seriesData || []).reduce((a,b)=>a+(b||0),0);
  });

  // 巡检人统计（三合一：总/月/日）
  inspectorStats3(queryParams.value).then(res=>{
    const d = res.data || {};
    inspectorTotalData.value = (d.total || []).map(i=>({ name:i.name, value:i.value }));
    inspectorMonthData.value = (d.month || []).map(i=>({ name:i.name, value:i.value }));
    inspectorDayData.value = (d.day || []).map(i=>({ name:i.name, value:i.value }));
    // 统计卡片上的“巡检人总次数”汇总
    totalUser.value = inspectorTotalData.value.reduce((a,b)=>a+(b.value||0),0);
    monthUser.value = inspectorMonthData.value.reduce((a,b)=>a+(b.value||0),0);
  });

  // 巡检人统计（三合一：总/月/日）保持不变
}

function handleQuery() {
  getList();
}

function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}


getList();

// 时间格式工具（yyyy-MM-dd HH:mm:ss）
function pad(n){ return n < 10 ? '0'+n : ''+n }
function formatDateTime(d){
  const y = d.getFullYear();
  const m = pad(d.getMonth()+1);
  const day = pad(d.getDate());
  const hh = pad(d.getHours());
  const mm = pad(d.getMinutes());
  const ss = pad(d.getSeconds());
  return `${y}-${m}-${day} ${hh}:${mm}:${ss}`;
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  margin-top: 50px;
}
.section-card { padding: 8px 12px; }
.section-title { font-weight: 600; margin-bottom: 8px; }
</style>