<script setup name="processStatistics">
import { onMounted, ref } from 'vue'
import { processConfigList } from '@/http/apis/systemManage/flowConfiguration'
import { storeToRefs } from 'pinia'
import store from '@/store'
import * as echarts from 'echarts'
import { detail, list } from '@/http/apis/statisticAnalysis/processStatistics'

const userInfo = storeToRefs(store.userStore).userInfo,
  processList = ref([]),
  formData = ref({}),
  getList = async () => {
    const res = await processConfigList({ regionCode: userInfo.value.regionCode * 1 })
    processList.value = res.data.records
    formData.value.process = res.data.records[0].processType
    getData()
  },
  chartRef = ref()
let chart
const initChart = () => {
    if (!chart) chart = echarts.init(chartRef.value)
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value + '天'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: chartData.value?.map(i => i.instTypeName)
      },
      yAxis: {
        name: '完成耗时（天）',
        type: 'value'
      },
      series: [
        {
          data: chartData.value?.map(i => i.avgTime),
          type: 'line'
        }
      ]
    }
    chart.setOption(option)
  },
  data = ref({}),
  getData = async () => {
    const res = await detail({ instType: formData.value.process })
    data.value = res.data
  },
  chartData = ref([]),
  getChartData = async () => {
    const res = await list()
    chartData.value = res.data || []
    initChart()
  }
onMounted(async () => {
  getList()
  getChartData()
})
</script>

<template>
  <el-card class="mb-16">
    <el-form
      ref="formRef"
      :model="formData"
    >
      <el-form-item>
        <el-select v-model="formData.process" @change="getData">
          <el-option
            v-for="(item,index) in processList"
            :key="index"
            :value="item.processType"
            :label="item.formName"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="flex justify-between text-center mt-24">
      <div>
        <p class="text-primary text-32 font-bold" style="font-family: DIN;">{{ data.totalInst||0 }}</p>
        <p class="text-info text-14">流程实例总数</p>
      </div>
      <div>
        <p class="text-primary text-36 font-bold" style="font-family: DIN;">{{ data.finishedInst||0 }}</p>
        <p class="text-info text-14">已完成</p>
      </div>
      <div>
        <p class="text-primary text-32 font-bold" style="font-family: DIN;">{{ data.pendingInst||0 }}</p>
        <p class="text-info text-14">处理中</p>
      </div>
      <div>
        <p class="text-primary text-32 font-bold" style="font-family: DIN;">{{ data.avgTime||0 }}天</p>
        <p class="text-info text-14">平均完成耗时</p>
      </div>
      <div>
        <p class="text-primary text-32 font-bold" style="font-family: DIN;">{{ data.maxTime||0 }}天</p>
        <p class="text-info text-14">最长完成耗时</p>
      </div>
      <div>
        <p class="text-primary text-32 font-bold" style="font-family: DIN;">{{ data.minTime||0 }}天</p>
        <p class="text-info text-14">最短完成耗时</p>
      </div>
    </div>
  </el-card>
  <el-card>
    <template #header>各流程平均处理时长</template>
    <div ref="chartRef" style="height: 400px"></div>
  </el-card>
</template>
