<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script lang="ts" setup>
import { init } from 'echarts';
import { reactive, toRefs, Ref, ref, onMounted, defineEmits, watchEffect } from 'vue';
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let {
  data: {
    xData,
    legend,
    yData: { paymentMoney },
  },
} = defineProps(['data']);
let options = reactive({
  title: {
    subtext: '单位（万元）',
    left: 5, // 距离左边位置
    top: 16, // 距离上面位置
    subtextStyle: {
      // 设置二级标题的样式
      color: '#fff',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#fff',
      },
    },
  },
  legend: {
    data: legend,
    textStyle: {
      color: '#fff',
    },
  },
  grid: {
    left: '1%',
    right: '0%',
    bottom: '12%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      data: xData,
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
        },
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      interval: 10,
      axisLabel: {
        formatter: '{value}',
      },
    },
    // {
    //   type: 'value',
    //   name: legend[2],
    //   interval: 5,
    //   axisLabel: {
    //     formatter: '{value}'
    //   }
    // }
  ],
  series: [
    {
      barWidth: '18px',
      name: legend[0],
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value;
        },
      },
      data: paymentMoney,
      itemStyle: {
        color: '#0f69ff',
      },
    },
    // {
    //   name:  legend[1],
    //   type: 'line',
    //   yAxisIndex: 1,
    //   tooltip: {
    //     valueFormatter: function (value) {
    //       return value;
    //     }
    //   },
    //   data: contractMoney,

    //   smooth:true,
    //   itemStyle: {
    //     normal: {
    //       color:'#ffa773', //折线点的颜色
    //       borderColor: '#fff', //拐点边框颜色
    //       borderWidth: 5, //拐点边框大小
    //     },
    //   },
    //   lineStyle: {
    //     color:'#ffa773', //折线的颜色
    //   },
    // }
  ],
});
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;
}
onMounted(() => {
  const chart = init(assetEchart.value as HTMLElement);
  chart.setOption(options);
  window.addEventListener('resize', () => {
    chart.resize();
  });
});
</script>
<style lang="scss" scoped>
.asset_echart {
  width: 530px;
  height: 304px;
  margin: 10px 14px 0 16px;
  padding: 24px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>