<template>
  <div class="analysis-page">
    <el-card shadow="never" class="filter-card">
      <el-form :model="query" inline>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="onDateRangeChange"
          />
        </el-form-item>
        <el-form-item label="流程">
          <el-select
            v-model="query.processDefinitionId"
            clearable
            placeholder="全部流程"
            style="width: 220px"
            @change="loadAll"
          >
            <el-option
              v-for="def in definitionOptions"
              :key="def.id"
              :label="def.name"
              :value="def.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadAll">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <KpiCards :overview="overview" :loading="loadingOverview" :format-minutes="formatMinutes" />

    <el-row :gutter="16" class="chart-row">
      <el-col :span="12">
        <TimeoutChart :option="statusChartOption" :loading="loadingStatus" />
      </el-col>
      <el-col :span="12">
        <NodeCountChart :option="nodeCountOption" :loading="loadingNodeCount" :data-length="nodeCountData.length" />
      </el-col>
    </el-row>

    <el-row :gutter="16" class="chart-row">
      <el-col :span="12">
        <EfficiencyChart :option="efficiencyChartOption" :loading="loadingEfficiency" />
      </el-col>
      <el-col :span="12">
        <TrendChart :option="nodeChartOption" :loading="loadingNode" @node-click="onNodeChartClick" />
      </el-col>
    </el-row>

    <StuckInstanceTable
      :instance-list="instanceList"
      :instance-total="instanceTotal"
      :loading="loadingInstanceList"
      :query="instanceQuery"
      :definition-list="definitionList"
      :current-node-options="currentNodeOptions"
      @update:query="onInstanceQueryUpdate"
      @process-change="onInstanceProcessChange"
      @search="loadInstanceList"
      @detail="openInstanceDetail"
    />

    <InstanceDetail v-model="instanceDetailVisible" :instance-id="instanceDetailId" />

  </div>
</template>

<script setup lang="ts">
import { useAnalysis } from './useAnalysis'
import KpiCards from './KpiCards.vue'
import TimeoutChart from './TimeoutChart.vue'
import NodeCountChart from './NodeCountChart.vue'
import EfficiencyChart from './EfficiencyChart.vue'
import TrendChart from './TrendChart.vue'
import StuckInstanceTable from './StuckInstanceTable.vue'
import InstanceDetail from '@/views/flow/execute/InstanceDetail.vue'

const {
  dateRange,
  query,
  definitionOptions,
  overview,
  loadingOverview,
  loadingStatus,
  statusChartOption,
  loadingEfficiency,
  efficiencyChartOption,
  loadingNode,
  nodeChartOption,
  nodeCountData,
  loadingNodeCount,
  nodeCountOption,
  instanceList,
  instanceTotal,
  loadingInstanceList,
  instanceQuery,
  definitionList,
  currentNodeOptions,
  instanceDetailVisible,
  instanceDetailId,
  loadAll,
  loadInstanceList,
  onDateRangeChange,
  onNodeChartClick,
  onInstanceProcessChange,
  openInstanceDetail,
  formatMinutes
} = useAnalysis()

function onInstanceQueryUpdate(newQuery: Partial<typeof instanceQuery>) {
  Object.assign(instanceQuery, newQuery)
}
</script>

<style scoped>
.analysis-page {
  padding: 16px;
}
.filter-card {
  margin-bottom: 16px;
}
.chart-row {
  margin-bottom: 16px;
}
</style>
