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

const
  formData = ref({}),
  chart1Ref = ref(), chart2Ref = ref(), chart3Ref = ref()
let chart1, chart2, chart3
const color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
  offset: 0,
  color: '#20DEEF'
}, {
  offset: 1,
  color: '#007FED'
}])
const detailData = ref(),
  getChartData = async () => {
    const res = await fund({ year: formData.value.projectYear })
    detailData.value = res.data
    initChart1()
    initChart2()
    initChart3()
  },
  initChart1 = () => {
    if (!chart1) chart1 = echarts.init(chart1Ref.value)
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value
      },
      grid: {
        left: 60,
        bottom: 30,
        top: 10,
        right: 30
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.departmentTop10.map(i => i.name),
        axisLabel: {
          align: 'center',
          interval: 0,
          rotate: 20
        }
      },
      yAxis: {
        name: '',
        type: 'value'
      },
      color,
      series: [
        {
          name: '核减资金',
          data: detailData.value?.departmentTop10.map(i => i.amount),
          type: 'bar',
          barWidth: 20
        }
      ]
    }
    chart1.setOption(option)
  },
  initChart2 = () => {
    if (!chart2) chart2 = echarts.init(chart2Ref.value)
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value
      },
      grid: {
        bottom: 42,
        top: 10,
        right: 30
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.threeYearsDeduction?.map(i => i.name),
        axisLabel: {
          interval: 0,
          hideOverlap: false
        }
      },
      yAxis: {
        name: '',
        type: 'value'
      },
      color,
      series: [
        {
          name: '核减资金',
          data: detailData.value?.threeYearsDeduction?.map(i => i.amount),
          type: 'line',
          areaStyle: {}
        }
      ]
    }
    chart2.setOption(option)
  },
  initChart3 = () => {
    if (!chart3) chart3 = echarts.init(chart3Ref.value)
    const data1 = [detailData.value?.planDeduction?.['approve'] || 0, detailData.value?.approvalDeduction?.['approve'] || 0, detailData.value?.contractDeduction?.['approve'] || 0]
    const data2 = [detailData.value?.planDeduction?.['approval'] || 0, detailData.value?.approvalDeduction?.['approval'] || 0, detailData.value?.contractDeduction?.['approval'] || 0]
    const data3 = [detailData.value?.planDeduction?.['diff'] || 0, detailData.value?.approvalDeduction?.['diff'] || 0, detailData.value?.contractDeduction?.['diff'] || 0]
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value
      },
      grid: {
        bottom: 20,
        top: 10,
        right: 50
      },
      xAxis: {
        type: 'category',
        data: ['计划', '批复', '合同'],
        axisLabel: {
          align: 'center',
          interval: 0
        }
      },
      yAxis: [{
        name: '',
        type: 'value'
      },
      {
        name: '差额',
        type: 'value'
      }
      ],
      series: [
        {
          name: '申请',
          data: data1,
          type: 'bar',
          barGap: 0,
          barWidth: 30
        },
        {
          name: '批复',
          data: data2,
          type: 'bar',
          barWidth: 30
        },
        {
          name: '差额',
          data: data3,
          type: 'bar',
          barWidth: 30
        },
        {
          name: '差额',
          yAxisIndex: 1,
          data: data3,
          type: 'line'
        }
      ]
    }
    chart3.setOption(option)
  }
onMounted(async () => {
  getChartData()
})
</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"
          @change="getChartData"
        />
      </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;">{{ Math.round((detailData?.accumulatedDeductionTotalAmount/10000)*100)/100 ||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;">{{ Math.round((detailData?.declaredTotalAmount/10000)*100)/100||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;">{{ Math.round((detailData?.approvalTotalAmount/10000)*100)/100||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;">{{ Math.round((detailData?.contractTotalAmount/10000)*100)/100||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;">{{ Math.round((detailData?.threeYearsDeductionTotalAmount/10000)*100)/100||0 }}</p>
        <p class="text-info text-14">近3年核减总数（亿元）</p>
      </div>
    </div>
  </el-card>
  <el-row :gutter="16">
    <el-col :span="12" class="mb-16">
      <el-card header="近3年核减总数（万元）">
        <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="chart1Ref" class="h-[230px]"></div>
      </el-card>
    </el-col>
  </el-row>
</template>
