<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/domain/components/DomainAccessMap.vue
 * @Date: 2022-08-31 14:15:59
 * @Description: 
 * @LastEditTime: 2023-08-31 20:21:34
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { defineProps } from 'vue'
import CommonCard from '../../../../components/CommonCard/CommonCard.vue'
import ProvincesMap from '../../../../components/chart/map/ProvincesMap.vue'

interface IComponentProps {
  title: string
  chartData: any
}

const props = defineProps<IComponentProps>()


const tooltipFormatter = function (params) {
  const unit = params.data?.unit || ''
  return `<div class="light-map-tip-box">
      <div class="light-map-tip-box-name">${params.name}</div>
      <div class="light-map-tip-box-content">
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">总流量</div>
          <div class="light-map-tip-box-value">${params.value || 0}${unit}</div>
        </div>
      </div>
    </div>`
}


</script>

<template>
  <CommonCard :title="props.title" class="domain-access-map">
    <ProvincesMap :autotip="true" :chartData="props.chartData" :tooltipFormatter="tooltipFormatter" />
  </CommonCard>
</template>

<style lang="scss" scoped>
.domain-access-map {
  width: 100%;
  height: 470px;
}
</style>
