<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/threatComponents/SecurityThreatEventAnalysis.vue
 * @Date: 2022-09-09 10:06:21
 * @Description: 
 * @LastEditTime: 2023-09-01 15:32:04
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { reactive, ref, onMounted, watch, unref, computed, defineProps, defineAsyncComponent } from 'vue'
import CircularDiagram from '../../../components/chart/CircularDiagram/CircularDiagram.vue'
import { colorSList } from '../../../components/chart/options/index'
import { useGetChartData } from '../../../components/chart/logic';
import { useGlobalThreatEvent } from '../logic/useGlobalThreatEvent'

import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping()
const { currentCity, currentDate } = useGlobalThreatEvent()

const barchartData = ref([]) as any
const sum = ref('0')
const handleResData = (res) => {
  let chartData = [] as any
  sum.value = res.sum.toString()
  if (res.involvedIndustry.length === 0) return { chartData }
  res.involvedIndustry.forEach(item => {
    chartData.push({
      name: item.involvedIndustryName,
      value: item.involvedIndustrySum,
      unit: '个'
    })
  })
  return { chartData }
}
const getChartData = async () => {
  const params = {
    type: unref(currentDate)
  } as any
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity)
  }
  const { chartData } = await useGetChartData('threatIncidentScreen/queryInvolvedIndustrySum', handleResData, params)
  barchartData.value = chartData

  console.log(barchartData.value, '==', sum.value)
}
const init = () => {
  getChartData()
}

onMounted(() => {
  init()
})

watch(currentCity, () => {
  init()
})

watch(currentDate, () => {
  init()
})
const legendFormatter = (name) => {
  const findItem = unref(chartData).findIndex(item => item.name === name)
  const _item = unref(chartData)[findItem] as any
  const _name = `{title|${name}}`
  const percentage = `{subtitle|${_item.value}}`
  return _name + percentage;
}

</script>
  
<template>
  <div class="module-block">
    <CircularDiagram v-if="barchartData.length" :otherType="'two'" titleText="总数（个）" :titleSubText="sum"
      :colorBg="colorSList" :chartData="barchartData" legendLeft="45%" legendTop="auto" :pieCenter="['50%', '50%']"
      :legendFormatter="legendFormatter" />
    <ya-empty v-else></ya-empty>
  </div>
</template>
  
<style lang="scss" scoped>
.module-block {
  width: 100%;
  height: 340px;
  position: relative;

  ::v-deep .chart {
    width: 300px !important;
    // height: 330px !important;

  }

  ::v-deep .custom-circle-legend {
    flex-direction: column;
    position: static;
    width: 100%;
    // left: 32% !important;
    // top: 40px !important;
    overflow: inherit;
    margin-top: 45px;
  }

  ::v-deep .custom-circle-legend-item {
    // width: auto;
    margin-bottom: 10px;
  }

  ::v-deep .custom-circle-legend-item .circle-icon {
    width: 9px;
    height: 9px;
  }

  ::v-deep .custom-circle-legend-item .legend-label {
    color: rgba(255, 255, 255, .6) !important;
    font-size: 16px;
    width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  ::v-deep .custom-circle-legend-item .legend-value {
    color: rgba(255, 255, 255, .6) !important;
    font-size: 16px;
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

#anhui {
  .module-block {
    ::v-deep .custom-circle-legend {
      margin-top: 10px;
    }
  }

}
</style>
  