<script setup>
const { proxy } = getCtx();
const state=reactive({
  fontColor:$c.wh,
  subFontColor:$c.cbl3,
  chartData:{
    title:"業務利潤佔比",
    colors:[$c.aql7, $c.cyl5],
    data:[
      {
        name: '軟件',
        children: [
          {
            name: '產品',value:123,
            children: [
              { name: 'GIS系統', value: 49 },
              { name: '可視化', value: 25},
              { name: '財務系統', value: 11 }
            ]
          },
          {
            name: '定制',value:90,
            children: [ 
              { name: '業務系統', value: 35 }, 
              { name: '門戶', value:15 } 
            ]
          }
        ]
      },
      {
        name: '硬件', children: [
          {
            name: '服務器',value:230, children: [ 
              { name: '入門級', value: 43 }, 
              { name: '企業級', value: 121 } 
            ]
          },
          {
            name: '網管設備',value:55, children: [ 
              { name: '安全網關', value: 23 }, 
              { name: '路由器', value: 12 } 
            ]
          }
        ]
      }
    ],
    dataMax:300
  },
  chartOption:{},
  dataOri:[]
})

const {dataOri,fontColor,subFontColor}=toRefs(state)

const mapLinkAction=(data,time)=>{
  const {chartData}=state
  data.forEach((item,i)=>{
    if(time==1&&item.value){
      let rmdval=i*proxy.randomNumber(time*10,100)
      item.value=rmdval
      chartData.dataMax+=rmdval
    }else if(item.value){
      delete item.value
    }
    if(item.children&&item.children.length>0){
      const num=time-1
      mapLinkAction(item.children,num)
    }
  })
}

const processData=()=>{
  const {colors,data}=state.chartData;
  let processedData=[],
      type="bar",
      yAxisIndex=0;
  processedData.push({
    type: 'sunburst',
    data: data,
    radius: [20, '80%'],
    center:['53%','50%'],
    itemStyle: {
      borderRadius: 7,
      borderWidth: 2,
      borderColor:$c.bll9,
    },
    label: {
      show: true,
      color:fontColor,
      fontSize: 12,
      rotate: 'tangential'//文字旋转
      // formatter: function (param) {
      //   return param.name+'\n'+param.value
      // }
    },
    emphasis: {
      label:{
        show: true,
        fontSize: '16',
        color:$c.wh,
        formatter: function (param) {
          return param.name+'\n'+param.value
        }
      }
    },
    levels: [{},]
  })
  state.chartOption.series=processedData;
}

const processOption=()=>{
  const {dataMax,colors}=state.chartData
  state.chartOption={
    update:false,
    title:{ 
      text:"數據單位:萬元 點擊數據可下鑽",subtext:"", right:20, bottom:0, 
      textStyle:{ color:subFontColor, fontSize:12, fontWeight:"normal" }, 
    },
    visualMap: {
      type: 'continuous',
      left:10,
      bottom:40,
      min: 0,
      max: dataMax,
      inRange: {
        color: colors
      },
      textStyle:{
        color:fontColor,
      },
    },
    series: []
  }
  processData();
}

onMounted(() => {
  processOption();
})
</script>
<template>
  <echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less">
</style>
