<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/VulnerabilityData.vue
 * @Date: 2022-07-27 11:18:53
 * @Description: 漏洞数据组件
 * @LastEditTime: 2023-09-01 15:26:26
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { TOOLTIP_IMG } from '../constants'
import { ref, onMounted } from 'vue'
const getDataByLegend = (legend, chartData) => {
  return chartData.filter(item => item.name === legend)[0]
}

const handleLargeNumber = num => {
  return Number(num) > 10000 ? (Number(num) / 10000).toFixed(1) + '万' : num
}

const chartData = ref([
  {
    name: '高危漏洞',
    per: '',
    value: 0,
    textStyle: { color: '#EA4668' }
  },
  {
    name: '中危漏洞',
    per: '',
    value: 0,
    textStyle: { color: '#EEA810' }
  },
  {
    name: '低危漏洞',
    per: '',
    value: 0,
    textStyle: { color: '#02D9D7' }
  },
])

const option = ref({
  title: [
    {
      text: '漏洞总数',
      left: '24%',
      top: '40%',
      textAlign: 'center',
      textBaseline: 'middle',
      textStyle: {
        color: '#E0E5EE',
        fontSize: 18,
        fontWeight: 400,
        fontFamily: 'Bold'
      }
    },
    {
      text: 0,
      left: '24%',
      top: '54%',
      textAlign: 'center',
      textBaseline: 'middle',
      textStyle: {
        fontSize: 30,
        color: '#00b2ff',
        fontWeight: 400,
        fontFamily: 'PangMenZhengDao'
      }
    }
  ],
  tooltip: {
    show: true,
    trigger: 'item',
    backgroundColor: 'transparent',
    extraCssText:
      'z-index: 9;border-radius: 0; border: 0;padding: 0;background: red;margin: 0;min-width: 0;height: 0;',
    formatter: function (val) {
      const handleNum = handleLargeNumber(val.data.value)
      return `<div class= "tooltip-box" >
          <img src="${TOOLTIP_IMG}" alt="" class="tooltip-bg">
           <span class="asset-risk-data-name">${val.data.name}</span>
           </br>
           <span class="asset-risk-data-num">${handleNum}</span>
        </div>`
    }
  },

  series: [
    {
      name: '外边框',
      type: 'pie',
      clockWise: false,
      hoverAnimation: false,
      tooltip: { show: false },
      emphasis: { disable: true },
      center: ['25%', '50%'],
      radius: ['82%', '82%'],
      label: { normal: { show: false } },
      data: [
        {
          value: 9,
          name: '',
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderType: [5, 5],
              borderDashOffset: 5,
              borderColor: '#0053EC4d'
            }
          }
        }
      ]
    },
    {
      name: '漏洞数据',
      type: 'pie',
      center: ['25%', '50%'], // 饼图中心坐标，[ x轴，y轴 ]
      radius: ['55%', '70%'], // [ 内边距半径，外边距半径 ]
      avoidLabelOverlap: false,
      hoverAnimation: true,
      showEmptyCircle: true, // 无数据时显示占位圆
      label: { show: false },
      emphasis: { disable: true },
      labelLine: { show: false },
      data: [],
      itemStyle: {
        color: function (params) {
          const colorList = ['#EA4668', '#EEA810', '#02D9D7', '#049BFB']
          return colorList[params.dataIndex]
        }
      }
    }
  ],
  legend: []
})


const init = async () => {
  // const res = await fetchData('findRisk')
  const res = [{ "num": 200, "name": "高危", "per": "20%" }, { "num": 600, "name": "低危", "per": "60%" }, { "num": 200, "name": "中危", "per": "20%" }]
  const numArr = [] as any

  res.map(item => {
    item.name = item.name + '漏洞'
    chartData.value.map(_item => {
      if (item.name === _item.name) {
        _item.value = item.num
        _item.per = item.per
      }
      return _item
    })
    numArr.push(item.num)
    return item
  })

  const total = numArr.reduce((a, b) => {
    return a + b
  })

  option.value.title[1].text = handleLargeNumber(total)
  option.value.series[1].data = chartData.value as any
  option.value.legend = {
    orient: 'vertical',
    top: 'middle',
    left: '50%',
    itemGap: 33, //图例之间的间距
    padding: [0, 0, 0, 16], // 图例与饼图间距
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      rich: {
        name: {
          padding: [0, 0, 0, 10], //图例 icon 与图例文字间距
          width: 63,
          color: '#eff0f1',
          fontSize: 14,
          fontWeight: 400,
          align: 'left',
          fontFamily: 'Bold'
        },
        value: {
          width: 60,
          fontSize: 20,
          fontWeight: 'bold',
          align: 'left',
          fontFamily: 'PangMenZhengDao'
        },
        per: {
          width: 50,
          color: '#eff0f1',
          fontSize: 14,
          fontWeight: 'bold',
          align: 'left',
          fontFamily: 'Bold'
        }
      }
    },
    data: chartData.value,
    formatter: function (param) {
      console.log('param', param)
      const { name, num, per } = getDataByLegend(param, res)
      const handleNum = handleLargeNumber(num)
      return `{name|${name}}{value|${handleNum}}{per|${per}}`
    }
  } as any
}

onMounted(() => {
  init()
})
</script>

<template>
  <div class="custom-asset-risk">
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<style scoped lang="scss">
.custom-asset-risk {
  width: 100%;
  color: #fff;
  height: 255px;
}
</style>

<style lang="scss">
.tooltip-bg {
  width: 79px;
  height: 48px;
}

.asset-risk-data-name {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 12px;
  font-family: 'Bold';
  font-weight: 400;
  color: #e0eef1;
}

.asset-risk-data-num {
  position: absolute;
  top: 24px;
  left: 8px;
  font-size: 16px;
  font-family: 'PangMenZhengDao';
  font-weight: 400;
  color: #ffffff;
}
</style>
