<template>
    <div style="width: 97%;">
    <border6 ref="refborder3">
        <template v-slot>
            <div ref="Pressure" class="pressurebox"></div>
        </template>
    </border6>
    </div>
    </template>
    
    <script setup lang="ts">
    import {getCurrentInstance, onMounted, reactive, ref} from "vue"
    import {EDataPerson,EDataPersonItem} from '@/type/realtimeSecurity'
    // import border3 from "@/components/borderBox/border3.vue"
    import border6 from "@/components/borderBox/border6.vue";
    const { proxy } = getCurrentInstance() as any;
    let props=defineProps<{
        name:String,
        title:string
        }>()
let Pressure=ref()

let refborder3=ref()

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

const setData=(value:any,type:number)=>{
  // value=value+''
    echartsData.Pressure!.div = Pressure.value
    echartsData.Pressure!.title = props.title
    echartsData.Pressure!.data={
        title:{
        text:echartsData.Pressure!.title,
        show:true,
        textStyle:{
            color:'#fff',
            fontSize:20
        },
        top:'1%'
    },
  series: [
    {
      type: 'gauge',
      center: ['50%', '65%'],
      min: 0,
      max: 2,
      splitNumber: 10,
      radius: '70%',
      axisLine: {
        show:false,
        lineStyle: {
          // color: [[1, '#f00']],
          width: 1
        }
      },
      splitLine: {
        
        distance: -9,
        length: 10,
        // lineStyle: {
        //   color: '#f00'
        // }
      },
      axisTick: {
        
        distance: -6,
        length: 5,
        // lineStyle: {
        //   color: '#f00'
        // }
      },
      axisLabel: {
        
        distance: -25,
        // color: '#f00',
        fontSize: 16
      },
      anchor: {
        show: true,
        size: 10,
        itemStyle: {
          borderColor: '#000',
          borderWidth: 1
        }
      },
      pointer: {
        offsetCenter: [0, '10%'],
        icon:
          'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
        length: '95%',
        itemStyle: {
          color: '#fff'
        }
      },
      detail: {
        valueAnimation: true,
        precision: 1,
        // formatter:'{value}Mpa',
        formatter: function (params) {
          //防止echarts对数据处理 直接将显示的值覆盖
          
              return value+'Mpa'
            },
        textStyle:{
            fontSize:14
        }
      },
      title: {
        offsetCenter: [0, '-50%']
      },
      data: [
        {
          value: value,
          name: 'Mpa'
        }
      ]
    },
    {
      type: 'gauge',
      center: ['50%', '65%'],
      radius: '68%',
      axisLine: {
        lineStyle: {
          width: 7,
          color: [
            [0.1, '#67e0e3'],
            [0.4, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      axisTick: {
        show:false
      },
      splitLine: {
        show:false
      },
      axisLabel: {
         show:false
      },
    },
    {
      type: 'gauge',
      center: ['50%', '65%'],
      min: 0,
      max: 60,
      radius: '60%',
      splitNumber: 6,
      axisLine: {
        lineStyle: {
          color: [[1, '#fff']],
          width: 1
        }
      },
      splitLine: {
        distance: -3,
        length: 10,
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        distance: 0,
        length: 5,
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        show: false,
        distance: 5,
        fontSize: 16,
        color: '#fff'
      },
      pointer: {
        show: false
      },
      title: {
        show: false
      },
      anchor: {
        show: true,
        size: 10,
        itemStyle: {
          color: '#fff'
        }
      }
    }
  ]
};

if(type==1){
  change(echartsData.Pressure)
}else{
  updata(echartsData.Pressure)
}
}
const change = (item:EDataPersonItem) => {
    let Ebox=proxy.$echarts.init(
    item.div,
    "dark"
  );
  Ebox.setOption(item.data);
  item.box = Ebox
};
const updata = (item:EDataPersonItem) => {

item.box.setOption(item.data);

};

function setchartWH(width:any,height:any){
  echartsData.Pressure!.div = Pressure.value
    Pressure.value.style.height=height+'px'
    Pressure.value.style.width=width+'px'
    
    refborder3.value.resetWH()
  if(echartsData.Pressure.box){
    echartsData.Pressure.box.resize()
  }
  
}
onMounted(() => {
    // setData()
})

// return{setchartWH}
defineExpose({
    setchartWH,
    setData
})
        
    </script>
    
    <style scoped>
    .pressurebox{
      margin-top: 5px;
    }
    </style>
    