<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script setup>
import { init } from 'echarts';
import { ref, onMounted } from 'vue';
const assetEchart = ref(null);
let echartsInstance = null
let curIndex = -1
let {
  data: { xdata, data, color,name,data1,namme1},
} = defineProps(["data"]);
console.log(data1,'data1')
const emit = defineEmits(['select-echart'])
const initM = () => {
  const chart = init(assetEchart.value);
  echartsInstance = chart
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    title: {
	        text: name,
	        textStyle: {
	        	 align: 'center',
	            color: '#000',
	            fontSize: 13,
	        },
	        top: '3%',
	        left: '10%',
	    },
    grid: {
      top: '12%',
      right: '5%',
      left: '5%',
      bottom: '0%',
      containLabel:true
    },
    backgroundColor: '#f7f9fc',
    tooltip: {
      text:'1212',
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true,
        },
      },
    },
    xAxis: {
      data:xdata,
      axisLine: {
        show: true, //隐藏X轴轴线
      },
      axisTick: {
        show: true, //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000', //X轴文字颜色
          fontSize: 14,
        },
      },
      splitArea: {
        show: true,
        areaStyle: {},
      },
    },
    yAxis: [
      {
        type: 'value',
        /*name: "亿元",*/
        minInterval: 1,
        nameTextStyle: {
          // color: "#ebf8ac",
          fontSize: 14,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            // color: '#26D9FF',
            width: 2,
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 14,
          },
        },
      }
    ],
    series: [
      {
        name,
        type: 'bar',
        select: {
          itemStyle: {
            borderWidth: 2
          }
        },
        selectedMode: true,
        barWidth: 15,
        color,
        data,
      },
      {
        name:namme1,
        type: 'bar',
        select: {
          itemStyle: {
            borderWidth: 2,
            color:'#ddd'
          }
        },
        selectedMode: true,
        barWidth: 15,
        color,
        data:data1,
      }
    ],
  });
  chart.on('click', (params) => {
    console.log(params)
    const index = curIndex
    emit('select-echart', {
      name: index === params.dataIndex ? '' : params.name,
      callback: () => {
        if(index === params.dataIndex) return
        curIndex = params.dataIndex
        chart.dispatchAction({
          type: 'select',
          dataIndex: params.dataIndex
        })
      }
    })
  })
};

function restSelect() {
  if(curIndex === -1) return
  echartsInstance.dispatchAction({type: 'unselect', dataIndex: curIndex})
  curIndex = -1
}
onMounted(() => {
  initM();
});
defineExpose({
  restSelect
})
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 400px;
  height: 240px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>