<!--
 * @FilePath: \wang-vue-worke:\demo\daping\src\views\energyConsume\content\chart\water.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-14 13:24:12
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->

<template>
    <div class="waterborder">
  <border4 ref="refborder4">
      <template v-slot>
        <!-- <h1>{{props.title}}</h1> -->
        <div ref="water"></div>
      </template>
  </border4>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
import 'echarts-liquidfill'

import border4 from "@/components/borderBox/border4.vue"
const { proxy } = getCurrentInstance() as any;
let props=defineProps<{
      title:string,
      data:any
      }>()
let water=ref()

let refborder4=ref()

const echartsData = reactive<EDataPerson>({
    water:{
      div:null,
      data:null,
      title:'',
      box:null
  },
})

const setData=()=>{

    echartsData.water!.div=water.value
  echartsData.water!.title=props.title
  echartsData.water!.data=({
          title: {
            // 标题
            text: echartsData.water!.title,
            textStyle:{
          color:'#fff',
          fontSize:20
            }
          },
           series: [{
    type: 'liquidFill',
    radius: '80%', //水球大小
    center: ['50%', '50%'],
    waveAnimation: true,
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#138FE2',
          },
          {
            offset: 1,
            color: '#126ABC',
          },
        ],
        globalCoord: false,
      },
    ],
    data: [0.7,0.7], // data个数代表波浪数
    amplitude: 10, //振幅
    backgroundStyle: {
      borderWidth: 2, //边框大小
      borderColor:'rgba(17, 94, 176, 0.8)',//边框颜色
      color: 'rgba(17, 94, 176, 0.4)',
    },
    label: {
      normal: {
        textStyle: {
          fontSize: 24,
          fontWeight: 'bold',
          color: '#fff',
        },
        formatter:props.data
      },
      
    },
    outline: {
      borderDistance: 0,
      itemStyle: {
        borderWidth: 4,
        borderColor: 'transparent',
      },
    },
            }],
        })


change(echartsData.water)
}

const change = (item:EDataPersonItem) => {
  let Ebox=proxy.$echarts.init(
  item.div,
  "dark"
);
Ebox.setOption(item.data);
item.box = Ebox
};

function setchartWH(width:any,height:any){
    echartsData.water!.div=water.value
    water.value.style.height=height+'px'
    water.value.style.width=width+'px'
  
  refborder4.value.resetWH()
if(echartsData.water.box){
  echartsData.water.box.resize()
}

}
onMounted(() => {
    setData()
})

// return{setchartWH}
defineExpose({
  setchartWH,
//   setData
})

</script>

<style scoped>
.waterBox{
    border-radius: 50%;
    background-color: #526DC1;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    font-size: 20px;
}
.waterborder{
    position: relative;
}
.waterborder h1{
    position: absolute;
    top: 20px;
    left:20px;
    color: #fff;
}
</style>
