<script setup lang="ts" name="ExpertStatisticalReport">
import * as echarts from 'echarts';

import { topDataVO } from '@/api/backStage/expertManagement/expertStatisticalReport/types';
import {
  getExpertJoinProjectData,
  getExpertUnitTypeData,
  getExpertCreditRatingData,
  getExpertWorkExperienceData,
  getExpertResearchFieldData,
  getExpertEducationData
} from '@/api/backStage/expertManagement/expertStatisticalReport';
import {
  getExpertCount,
  getExpertLeaveCount,
  getBlacklistCount,
  getExcellentCreditExpertCount,
} from '@/api/expert/homePage';

import CommonEChart from '@/views/backStage/expertManagement/expertStatisticalReport/echarts/commonEchart.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { unit_type } = toRefs<any>(proxy?.useDict('unit_type'));
const { work_professial_year } = toRefs<any>(proxy?.useDict('work_professial_year'));
const { perform_work_type } = toRefs<any>(proxy?.useDict('perform_work_type'));
const { degree_type } = toRefs<any>(proxy?.useDict('degree_type'));
const topData = ref<topDataVO[]>([
  {
    title: '专家总人数',
    data: 0,
    unit: '人'
  },
  {
    title: '请假总次数',
    data: 0,
    unit: '次'
  },
  {
    title: '专家黑名单总次数',
    data: 0,
    unit: '人'
  },
  {
    title: '专家信用优秀总人数',
    data: 0,
    unit: '人'
  }
]);

const expertCreditRatingShowNoData = ref(false)
const expertResearchFieldShowNoData = ref(false)
const expertEducationShowNoData = ref(false)
const expertWorkYearLimitShowNoData = ref(false)
const expertUnitTypeShowNoData = ref(false)
const expertJoinProjectShowNoData = ref(false)
// echartsOption 专家信用等级统计
const expertCreditRatingOption = reactive( {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#ddd'
      }
    }
  },
  grid: {
    width: '80%',
    height: '70%',
    left: '10%',
    top: '20%'
  },
  legend: {
    data: ['专家人数'],
    right: '3%',
    top: '0',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 20,
    textStyle: {
      color: '#ffffff'
    }
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisTick: {
        show: true
      },
      axisLabel: {
        interval: 0,
        fontSize: 10
      },
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '专家人数',
      type: 'bar',
      data: [],
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1b79e5' },
          { offset: 0.5, color: '#215695' },
          { offset: 1, color: '#244467' }
        ])
      },
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
})

// echartsOption 专家研究领域统计
const expertResearchFieldOption = reactive({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    type: 'scroll',
    orient: 'horizontal',
    itemWidth: 5,
    itemHeight: 5,
    itemGap: 5,
    left: '20%',
    padding: 5,
    top: -4,
    textStyle: {
      color: '#ffffff'
    },
    pageTextStyle: {
      color: '#ffffff'
    }
  },
  series: [
    {
      name: '专家研究领域统计',
      type: 'pie',
      radius: '100%',
      top: '15%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgb(238,238,238)'
        }
      }
    }
  ]
})

// echartsOption 专家学历统计
const expertEducationOption = reactive( {
  color: ['#D96B51', '#4291DC', '#72F375'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#ddd'
      }
    }
  },
  grid: {
    width: '80%',
    height: '70%',
    left: '7%',
    top: '20%'
  },
  legend: {
    data: ['专家人数'],
    right: '3%',
    top: '0',
    itemWidth: 10,
    itemHeight: 2,
    itemGap: 20,
    textStyle: {
      color: '#ffffff'
    }
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisTick: {
        show: true
      },
      axisLabel: {
        interval: 0,
        fontSize: 10
      },
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '专家人数',
      type: 'bar',
      data: [],
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1b79e5' },
          { offset: 0.5, color: '#215695' },
          { offset: 1, color: '#244467' }
        ])
      },
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
})

// echartsOption 专家工作年限统计
const expertWorkYearLimitOption = reactive( {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#ddd'
      }
    }
  },
  grid: {
    width: '80%',
    height: '70%',
    left: '10%',
    top: '20%'
  },
  legend: {
    data: ['专家人数'],
    right: '3%',
    top: '0',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 20,
    textStyle: {
      color: '#ffffff'
    }
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisTick: {
        show: true
      },
      axisLabel: {
        interval: 0,
        fontSize: 10
      },
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '专家人数',
      type: 'bar',
      data: [],
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1b79e5' },
          { offset: 0.5, color: '#215695' },
          { offset: 1, color: '#244467' }
        ])
      },
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
})

// echartsOption 专家单位类型统计
const expertUnitTypeOption = reactive( {
  color: ['#237ffd','#1cd599','#ea3c3f','#6d6e6f'],
  tooltip: {
    trigger: 'item'
  },
  legend: {
    itemWidth: 5,
    itemHeight: 5,
    bottom: '0',
    left: 'center',
    textStyle: {
      color: '#ffffff'
    }
  },
  graphic: {
    elements: [
      {
        type: 'text',
        left: '49%',
        top: '30%',
        style: {
          text: 0,
          textAlign: 'center',
          fill: '#ffffff',
          width: 30,
          height: 25,
          fontSize: 18
        }
      },
      {
        type: 'text',
        left: '40%',
        top: '45%',
        style: {
          text: '专家总人数',
          textAlign: 'center',
          fill: '#ffffff',
          width: 30,
          height: 30,
          fontSize: 20,
          color: '#ffffff'
        }
      }
    ]
  },
  series: [
    {
      name: '专家单位类型统计',
      type: 'pie',
      radius: ['60%', '70%'],
      top: '-15%',
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }
  ]
})

// echartsOption 专家参与项目 tpo5
const expertJoinProjectOption = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    itemWidth: 10,
    itemHeight: 10,
    right: '5%',
    textStyle: {
      color: '#ffffff'
    }
  },
  grid: {
    width: '90%',
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: [],
    inverse: true
  },
  series: [
    {
      name: '参与次数',
      type: 'bar',
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#244467' },
          { offset: 0.5, color: '#215695' },
          { offset: 1, color: '#1b79e5' }
        ])
      },
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      data: []
    }
  ]
})

const getExpertJoinProject = async () => {
  await getExpertJoinProjectData().then(res => {
    if (res.data.length > 0) {
      let yAxisData = []
      let seriesData = []
      res.data.map(item => {
        yAxisData.push(item.expertName)
        seriesData.push(item.productCount)
      })
      expertJoinProjectOption.yAxis.data = yAxisData
      expertJoinProjectOption.series[0].data = seriesData
      expertJoinProjectShowNoData.value = false
    } else {
      expertJoinProjectShowNoData.value = true
    }
  })
}
const getExpertUnitType = async () => {
  await getExpertUnitTypeData().then(res => {
    if (res.data.length > 0) {
      let seriesData = []
      expertUnitTypeOption.graphic.elements[0].style.text = res.data[0].totalCount || 0
      res.data.map(item => {
        const findData = unit_type.value.find(fitem => fitem.value === item.unitType.toString())
        seriesData.push({
          value: item.count ? item.count : 0,
          name: findData ? findData.label : '未知'
        })
      })
      expertUnitTypeOption.series[0].data = seriesData
      expertUnitTypeShowNoData.value = false
    } else {
      expertUnitTypeShowNoData.value = true
    }

  })
}
const getExpertCreditRating = async () => {
  await getExpertCreditRatingData().then(res => {
    if (res.data.length > 0) {
      let xAxisData = []
      let seriesData = []
      res.data.map(item => {
        xAxisData.push(item.creditName)
        seriesData.push(item.personSum)
      })
      expertCreditRatingOption.xAxis[0].data = xAxisData
      expertCreditRatingOption.series[0].data = seriesData
      expertCreditRatingShowNoData.value = false
    } else {
      expertCreditRatingShowNoData.value = true

    }

  })
}
const getExpertWorkExperience = async () => {
  await getExpertWorkExperienceData().then(res => {
    if (res.data.length > 0) {
      let xAxisData = []
      let seriesData = []
      work_professial_year.value.map(item => {
        const findData = res.data.find(fitem => fitem.work_professial_year.toString() === item.value)
        if (findData) {
          xAxisData.push(item.label)
          seriesData.push(findData.count)
        } else {
          xAxisData.push(item.label)
          seriesData.push(0)
          res.data.map(mItem => {
            if (mItem.work_professial_year === 0) {
              setTimeout(() => {
                xAxisData.push('未知')
                seriesData.push(mItem.count)
              })
            }
          })
        }
      })
      expertWorkYearLimitOption.xAxis[0].data = xAxisData;
      expertWorkYearLimitOption.series[0].data = seriesData
      expertWorkYearLimitShowNoData.value = false

    } else {
      expertWorkYearLimitShowNoData.value = true
    }
  })
}
const getExpertResearchField = async () => {
  const params = {
    days: 30
  }
  await getExpertResearchFieldData(params).then(res => {
    if(res.data.length > 0) {
      let seriesData = []
      res.data.map(item => {
        const findData = perform_work_type.value.find(fitem => fitem.value === item.performWork.toString())
        seriesData.push({
          value: item.count,
          name: findData.label
        })
      })
      expertResearchFieldOption.series[0].data = seriesData
      expertResearchFieldShowNoData.value = false
    } else {
      expertResearchFieldShowNoData.value = true
    }

  })
}
const getExpertEducation = async () => {
  await getExpertEducationData().then(res => {
    if (res.data.length > 0) {
      let xAxisData = []
      let seriesData = []
      res.data.map(item => {
        const findData = degree_type.value.find(fitem => fitem.value === item.degree.toString())
        xAxisData.push(findData.label)
        seriesData.push(item.count)
      })
      expertEducationOption.xAxis[0].data = xAxisData
      expertEducationOption.series[0].data = seriesData
      expertEducationShowNoData.value = false
    } else {
      expertEducationShowNoData.value = true
    }

  })
}

const getTopData = async () => {
  await getExpertCount().then(res => {
    topData.value[0].data = res.data.toString()
  })
  await getExpertLeaveCount().then(res => {
    topData.value[1].data = res.data.proNums.toString()
  })
  await getBlacklistCount().then(res => {
    topData.value[2].data = res.data.toString()
  })
  await getExcellentCreditExpertCount().then(res => {
    topData.value[3].data = res.data.toString()
  })
}
getExpertJoinProject()
getExpertUnitType()
getExpertWorkExperience()
getExpertResearchField()
getExpertEducation()
getExpertCreditRating()
onActivated(() => {
  getExpertJoinProject()
  getExpertUnitType()
  getExpertWorkExperience()
  getExpertResearchField()
  getExpertEducation()
  getExpertCreditRating()
})
onMounted(() => {
  getTopData()
})
</script>

<template>
  <div class="app-container home">
    <div class="inventoryAnalysisBox">
      <el-card style="width: 100%; margin-bottom: 20px">
        <div class="topStatisticsBox">
          <div class="statisticsItemBox" :class="'bgColor' + index" v-for="(item, index) in topData">
            <div class="titleName">
              {{ item.title }}
            </div>
            <div class="dataBox">
              <div class="leftData">
                {{ item.data }}
              </div>
              <div class="rightUnit">
                {{ item.unit }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 100%">
        <div class="analysisContentBox">
          <div class="contentBox">
            <div class="commonStatisticsBox">
              <div class="statisticsHeadBox">
                <div class="leftTitle">
                  专家信用等级统计
                </div>
              </div>
              <div class="echartContentBox">
                <div class="topUnti">单位: 人</div>
                <CommonEChart :options="expertCreditRatingOption" :echartHeight="250" :isShowNo="expertCreditRatingShowNoData"/>
              </div>
            </div>
            <div class="commonStatisticsBox">
              <div class="statisticsHeadBox">
                <div class="leftTitle">
                  专家研究领域统计
                </div>
              </div>
              <div class="echartContentBox">
                <div class="topUnti">单位: 人</div>
                <CommonEChart :options="expertResearchFieldOption" :echartHeight="250" :isShowNo="expertResearchFieldShowNoData"/>
              </div>
            </div>
            <div class="commonStatisticsBox">
              <div class="statisticsHeadBox">
                <div class="leftTitle">
                  专家学历统计
                </div>
              </div>
              <div class="echartContentBox">
                <div class="topUnti">单位: 人</div>
                <CommonEChart :options="expertEducationOption" :echartHeight="250" :isShowNo="expertEducationShowNoData"/>
              </div>
            </div>
            <div class="commonStatisticsBox">
              <div class="statisticsHeadBox">
                <div class="leftTitle">
                  专家工作年限统计
                </div>
              </div>
              <div class="echartContentBox">
                <div class="topUnti">单位: 人</div>
                <CommonEChart :options="expertWorkYearLimitOption" :echartHeight="250" :isShowNo="expertWorkYearLimitShowNoData"/>
              </div>
            </div>
            <div class="commonStatisticsBox">
              <div class="statisticsHeadBox">
                <div class="leftTitle">
                  专家单位类型统计
                </div>
              </div>
              <div class="echartContentBox">
                <CommonEChart :options="expertUnitTypeOption" :echartHeight="250" :isShowNo="expertUnitTypeShowNoData"/>
              </div>
            </div>
            <div class="commonStatisticsBox">
              <div class="statisticsHeadBox">
                <div class="leftTitle">
                  专家参与项目统计 Top5
                </div>
              </div>
              <div class="echartContentBox">
                <div class="topUnti">单位: 次</div>
                <CommonEChart :options="expertJoinProjectOption" :echartHeight="250" :isShowNo="expertJoinProjectShowNoData"/>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.inventoryAnalysisBox {
  .topStatisticsBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .statisticsItemBox {
      width: 24%;
      height: 150px;
      border: 1px solid #dddddd;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      color: #ffffff;
      box-shadow: 5px 5px 12px rgba(0,0,0,0.2);
      &.bgColor0 {
        background-color: #3f9dc6;
      }
      &.bgColor1 {
        background-color: #d9021d;
      }
      &.bgColor2 {
        background-color: #f59b25;
      }
      &.bgColor3 {
        background-color: #1ab394;
      }
      .titleName {
        width: 100%;
        text-align: center;
      }
      .dataBox {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        .rightUnit {
          font-size: 13px;
          padding-left: 5px;
        }
      }
    }
  }
  .analysisContentBox {
    .contentBox {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-top: 20px;
      .commonStatisticsBox {
        width: 33%;
        border-radius: 10px;
        background-color: #0e233b;
        margin-bottom: 20px;
        .statisticsHeadBox{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          .leftTitle{
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 600;
            line-height: 10px;
            letter-spacing: 0.1em;
            text-align: left;
            color: #ffffff;
            font-style: italic;
            position: relative;
            padding-left: 15px;
            margin-top: 5px;
            &::after {
              content: "";
              position: absolute;
              width: 3px;
              height: 15px;
              border-radius: 2px;
              top: 0;
              left: 0;
              background-color: #1c84c6;
            }
          }
        }
        .echartContentBox {
          position: relative;
          height: 35vh;
          .topUnti {
            position: absolute;
            color: #fff;
            font-size: 12px;
            left: 5%;
          }
        }
      }
    }
  }
}
</style>
