<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: '#c6c6c6',
        fontSize: 13,
      },
      top: '3%',
      left: '10%',
    },
    grid: {
      top: '12%',
      right: '5%',
      left: '5%',
      bottom: '5%',
      containLabel: true,
    },
    backgroundColor: '#06488f',
    tooltip: {
      text: '1212',
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true,
        },
      },
    },
    xAxis: {
      data: xdata,
      axisTick: {
        show: true, //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#c6c6c6', //X轴文字颜色
          fontSize: 12,
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        /*name: "亿元",*/
        minInterval: 1,
        nameTextStyle: {
          fontSize: 14,
        },
        splitLine: {
          show: true, // 显示网格线
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            // color: '#26D9FF',
            width: 2,
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#c6c6c6',
            fontSize: 12,
          },
        },
      },
    ],
    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>