<template>
  <div ref="assetEchart" class="asset_echart-nopx"></div>
</template>
<script setup>
import { init } from "echarts";
import {
  reactive,
  toRefs,
  ref,
  onMounted,
  watchEffect
} from "vue";
const assetEchart = ref();
let echartsInstance = null
let selected = null
let {
  data: { titleArray, xData,defaultData ,yData,colorList},
  legend
} = defineProps(["data", "legend"]);
const emit = defineEmits(['select-echart'])
// const all=xData.reduce((n,v)=>{
//   return n + v.value
// },0)
const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener("resize", () => {
    chart.resize();
  });
  chart.setOption({
    grid: {
      top: '12%',
      right: '5%',
      left: '5%',
      bottom: '0%',
      containLabel:true
    },
    color: ['#0f47ff', '#2eb7f6'],
    tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer:{
            type:'shadow',
        },
        textStyle: {
            fontSize: 14
        },
       formatter: function (params) {
            let dom = `${params[0].name}
              <br/>`
            for (let i of params) {
              dom += `${i.marker}
              ${i.seriesName}
                :
              ${i.value}
              <br/>`
            }
            return dom
          },
    },
    legend: {
        show: legend,
        itemWidth: 14,
        top: "0",
        left: 'center',
        data: titleArray,
        textStyle: {
            color: "#333333"
        }
    },
    xAxis: [{
        type: 'category',
        color: '#333333',
        data: xData,
        axisLabel: {
            margin: 20,
            color: '#333333',
            fontSize: 16
        },
        axisLine: {
            lineStyle: {
                color: '#333333',
            }
        },
        axisTick: {
            show: true,
            lineStyle:{
                color:'#ddd'
            }
        },
    }],
    yAxis: [{
        min: 0,
        minInterval: 1,
        axisLabel: {
          color: '#333333',
          fontSize: 16
        },
        axisLine: {
            lineStyle: {
                color: '#333333',
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: '#ddd',
                type:"dashed"
            }
        }
    }],
    series: [
      {
        name: titleArray[0],
        type: 'bar',
        data: yData,
        barWidth: '17px',
        select: {
          itemStyle: {
            borderWidth: 2
          }
        },
        selectedMode: legend ? 'series' : false,
        itemStyle: colorList ? {
          color: function(params) {
            return colorList[params.dataIndex]
          },
          borderRadius: [0, 0, 0, 0],
        } : {}
      },
      {
        name: titleArray[1],
        type: 'bar',
        data: defaultData,
        barWidth: '17px',
        select: {
          itemStyle: {
            borderWidth: 2
          }
        },
        selectedMode: legend ? 'series' : false,
        itemStyle: colorList ? {
          color: function(params) {
            return colorList[params.dataIndex]
          },
          borderRadius: [0, 0, 0, 0],
        } : {}
      },
    ]
  });
  echartsInstance = chart
  if(legend) {
    chart.on('click', (params) => {
      echartsInstance.dispatchAction({type: 'unselect'})
      const arr = ['6', '5']
      let queryType = ''
      if(params.seriesIndex !== selected?.seriesIndex){
        selected = params
        echartsInstance.dispatchAction({
          type: 'select',
          seriesIndex: params.seriesIndex
        })
        queryType = arr[params.seriesIndex]
      } else {
        selected = null
      }
      emit('select-echart', queryType)
    })
  } else {
    chart.getZr().on('click', (event) => {
      if (!event.target) {
        // console.log(event)
        emit('select-echart')
      }
    })
  }
};
function chartSize(container, charts) {
  function getStyle(el, name) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(el, null);
    } else {
      return el.currentStyle;
    }
  }
  const hi = getStyle(container, "height").height;
  charts.style.height = hi;
}

function restSelect() {
  if(selected) {
    echartsInstance.dispatchAction({type: 'unselect'})
    selected = null
  }
}
watchEffect(() => {});
onMounted(() => {
  initM();
});
defineExpose({
  restSelect
})
</script>

<style lang="scss" scoped>
.asset_echart-nopx {
  // width: 100%;
  height: 200px;
  // margin: 10px 14px 0 16px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>