<script setup name="projectStatistics">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { statisticsProject } from '@/http/apis/statisticAnalysis/projectStatistics'

const
  formData = ref({}),
  chart1Ref = ref(), chart2Ref = ref(), chart3Ref = ref(), chart4Ref = ref(), chart5Ref = ref(), chart6Ref = ref(), chart7Ref = ref()
let chart1, chart2, chart3, chart4, chart5, chart6, chart7
const color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
  offset: 0,
  color: '#20DEEF'
}, {
  offset: 1,
  color: '#007FED'
}])
const
  getChartData = async () => {
    initChart1()
    initChart2()
    initChart3()
    initChart4()
    initChart5()
    initChart6()
    initChart7()
  },
  initChart1 = () => {
    if (!chart1) chart1 = echarts.init(chart1Ref.value)
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value
      },
      grid: {
        bottom: 20,
        top: 10,
        right: 30
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.progresses?.map(i => i.name) || ['计划', '申报', '立项', '建设', '验收', '运维', '绩效', '注销'],
        axisLabel: {
          align: 'center',
          interval: 0
        }
      },
      yAxis: {
        name: '',
        type: 'value'
      },
      color,
      series: [
        {
          name: '项目数量',
          data: detailData.value?.progresses?.map(i => i.num) || [5, 2, 47, 73, 61, 243, 0, 0],
          type: 'bar',
          barWidth: 20
        }
      ]
    }
    chart1.setOption(option)
  },
  initChart2 = () => {
    if (!chart2) chart2 = echarts.init(chart2Ref.value)
    const colorList = [
      new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
        offset: 0,
        color: 'rgba(32, 183, 96, 1)'
      }, {
        offset: 1,
        color: 'rgba(32, 183, 96, 0.5)'
      }]),
      new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
        offset: 0,
        color: '#20DEEF'
      }, {
        offset: 1,
        color: '#007FED'
      }])
    ]
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value
      },
      grid: {
        bottom: 42,
        top: 10,
        right: 30
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.threeYearsApprovalCycleAvg?.map(i => i.name) || ['2021', '2022', '2023'],
        axisLabel: {
          interval: 0,
          hideOverlap: false
        }
      },
      yAxis: {
        name: '',
        type: 'value'
      },
      color: colorList,
      series: [
        {
          name: '批复时间',
          data: detailData.value?.threeYearsApprovalCycleAvg?.map(i => i.num) || [11, 12.4, 12],
          type: 'line'
        },
        {
          name: '建设时间',
          data: detailData.value?.threeYearsConstructionCycleAvg?.map(i => i.num) || [11, 12, 11.4],
          type: 'line'
        }
      ]
    }
    chart2.setOption(option)
  },
  initChart3 = () => {
    if (!chart3) chart3 = echarts.init(chart3Ref.value)
    const option = {
      tooltip: {
        show: true,
        trigger: 'item'
      },
      grid: {
        bottom: 20,
        top: 10,
        right: 30
      },
      radar: {
        indicator: detailData.value?.projectTypeDistribution?.map(i => {
          return {
            ...i,
            max: Math.max(detailData.value?.projectTypeDistribution.map(i => i.num))
          }
        }) || [
          { name: '首次建设', max: 385 },
          { name: '结转建设', max: 385 },
          { name: '迭代升级', max: 385 },
          { name: '新运维', max: 385 },
          { name: '续运维', max: 385 }
        ]
      },
      series: [
        {
          name: '星级分布',
          type: 'radar',
          data: [
            {
              value: detailData.value?.projectTypeDistribution?.map(i => i.num) || [385, 49, 51, 0, 0]
            }
          ]
        }
      ]
    }
    chart3.setOption(option)
  },
  initChart4 = () => {
    if (!chart4) chart4 = echarts.init(chart4Ref.value)
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value
      },
      grid: {
        bottom: 20,
        top: 10,
        right: 30
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.amountChangeTop10?.map(i => i.name) || ['水利局', '发改委', '组织部', '公安局', '电力局', '林业局', '医保局', '大数据局', '社保局'],
        axisLabel: {
          align: 'center',
          interval: 0
        }
      },
      yAxis: {
        name: '',
        type: 'value'
      },
      color,
      series: [
        {
          name: '变更金额',
          data: detailData.value?.amountChangeTop10?.map(i => i.amount) || [0, 0, 0, 0, 0, 0, 0, 0, 0],
          type: 'bar',
          barWidth: 20
        }
      ]
    }
    chart4.setOption(option)
  },
  initChart5 = () => {
    if (!chart5) chart5 = echarts.init(chart5Ref.value)
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value
      },
      grid: {
        bottom: 20,
        top: 10,
        right: 30
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.revokeTop10?.map(i => i.name) || ['水利局', '发改委', '组织部', '公安局', '电力局', '林业局', '医保局', '大数据局', '社保局'],
        axisLabel: {
          align: 'center',
          interval: 0
        }
      },
      yAxis: {
        name: '',
        type: 'value'
      },
      color,
      series: [
        {
          name: '撤销数',
          data: detailData.value?.revokeTop10?.map(i => i.num) || [0, 0, 0, 0, 0, 0, 0, 0, 0],
          type: 'bar',
          barWidth: 20
        }
      ]
    }
    chart5.setOption(option)
  },
  initChart6 = () => {
    if (!chart6) chart6 = echarts.init(chart6Ref.value)
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value
      },
      grid: {
        bottom: 20,
        top: 10,
        right: 30
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.terminationTop10?.map(i => i.name) || ['水利局', '发改委', '组织部', '公安局', '电力局', '林业局', '医保局', '大数据局', '社保局'],
        axisLabel: {
          align: 'center',
          interval: 0
        }
      },
      yAxis: {
        name: '',
        type: 'value'
      },
      color,
      series: [
        {
          name: '终止数',
          data: detailData.value?.terminationTop10?.map(i => i.num) || [0, 0, 0, 0, 0, 0, 0, 0, 0],
          type: 'bar',
          barWidth: 20
        }
      ]
    }
    chart6.setOption(option)
  },
  initChart7 = () => {
    if (!chart7) chart7 = echarts.init(chart7Ref.value)
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value
      },
      grid: {
        bottom: 20,
        top: 10,
        right: 30
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.delayTop10?.map(i => i.name) || ['水利局', '发改委', '组织部', '公安局', '电力局', '林业局', '医保局', '大数据局', '社保局'],
        axisLabel: {
          align: 'center',
          interval: 0
        }
      },
      yAxis: {
        name: '',
        type: 'value'
      },
      color,
      series: [
        {
          name: '延期数',
          data: detailData.value?.delayTop10?.map(i => i.num) || [0, 0, 0, 0, 0, 0, 0, 0, 0],
          type: 'bar',
          barWidth: 20
        }
      ]
    }
    chart7.setOption(option)
  },
  detailData = ref(),
  getData = async () => {
    const res = await statisticsProject({ year: formData.value.projectYear })
    detailData.value = res.data
    getChartData()
  }
onMounted(async () => {
  getData()
})
</script>

<template>
  <el-card class="mb-16">
    <el-form
      ref="formRef"
      :model="formData"
    >
      <el-form-item label="年度">
        <el-date-picker
          v-model="formData.projectYear"
          type="year"
          placeholder="全部"
          format="YYYY"
          value-format="YYYY"
          style="width: 200px"
        />
      </el-form-item>
    </el-form>
    <div class="flex justify-between text-center mt-24">
      <div class="flex-1">
        <p class="text-primary text-32 font-bold" style="font-family: DIN;">{{ detailData?.planTotal||0 }}</p>
        <p class="text-info text-14">项目计划数</p>
      </div>
      <div class="flex-1">
        <p class="text-primary text-32 font-bold" style="font-family: DIN;">{{ detailData?.approvedTotal||0 }}</p>
        <p class="text-info text-14">批复项目数</p>
      </div>
      <div class="flex-1">
        <p class="text-primary text-32 font-bold" style="font-family: DIN;">{{ detailData?.constructionTotal||0 }}</p>
        <p class="text-info text-14">在建项目数</p>
      </div>
      <div class="flex-1">
        <p class="text-primary text-32 font-bold" style="font-family: DIN;">{{ detailData?.approvalCycleAvg||0 }}</p>
        <p class="text-info text-14">平均批复周期（月）</p>
      </div>
      <div class="flex-1">
        <p class="text-primary text-32 font-bold" style="font-family: DIN;">{{ detailData?.constructionCycleAvg||0 }}</p>
        <p class="text-info text-14">平均建设周期（月）</p>
      </div>
    </div>
  </el-card>
  <el-row :gutter="16">
    <el-col :span="12" class="mb-16">
      <el-card header="各阶段项目统计">
        <div ref="chart1Ref" class="h-[230px]"></div>
      </el-card>
    </el-col>
    <el-col :span="12" class="mb-16">
      <el-card header="近三年平均批复/建设周期（月）">
        <div ref="chart2Ref" class="h-[230px]"></div>
      </el-card>
    </el-col>
    <el-col :span="12" class="mb-16">
      <el-card header="项目分布类型">
        <div ref="chart3Ref" class="h-[230px]"></div>
      </el-card>
    </el-col>
    <el-col :span="12" class="mb-16">
      <el-card header="金额变更数额情况统计TOP10">
        <div ref="chart4Ref" class="h-[230px]"></div>
      </el-card>
    </el-col>
    <el-col :span="12" class="mb-16">
      <el-card header="项目撤销情况统计TOP10">
        <div ref="chart5Ref" class="h-[230px]"></div>
      </el-card>
    </el-col>
    <el-col :span="12" class="mb-16">
      <el-card header="终止情况统计TOP10">
        <div ref="chart6Ref" class="h-[230px]"></div>
      </el-card>
    </el-col>
    <el-col :span="12" class="mb-16">
      <el-card header="延期情况统计TOP10">
        <div ref="chart7Ref" class="h-[230px]"></div>
      </el-card>
    </el-col>
  </el-row>
</template>
