<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script lang="ts" setup>
import { init } from "echarts";
import * as echarts from "echarts";
import { reactive, toRefs, Ref, ref, onMounted, watchEffect } from "vue";
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let { myData, classifyInvestProportion, classifyAreaProportion } = defineProps([
  "myData",
  "classifyInvestProportion",
  "classifyAreaProportion",
]);
console.log(myData);

const emit = defineEmits(["click-call-back"]);
const initM = () => {
  const chart = init(assetEchart.value as HTMLElement);
  window.addEventListener("resize", () => {
    chart.resize();
  });
  chart.setOption({
    tooltip: {
      show: true,
      position: "top",
      offset: [0, 0],
      textStyle: {
        color: "#666666",
        fontSize: 14,
      },
      formatter: `{a0}</br> {b0}:{c0}%`,
    },
    legend: {
      type: "plain",
      textStyle: {
        color: "#D1DEEE", //文字的颜色
        fontSize: 12, //文字的字号
      },
    },
    grid: [
      {
        show: false,
        left: 0,
        top: 30,
        bottom: 22,
        width: "27%",
      },
      {
        show: false,
        left: "30%",
        top: 30,
        bottom: 0,
        containLabel: true,
        width: "33%",
      },
      {
        show: false,
        left: "63%",
        top: 30,
        bottom: 0,
        containLabel: true,
        width: "33%",
      },
    ],
    xAxis: [
      {
        gridIndex: 0,
        show: true,
      },
      {
        gridIndex: 1,
        type: "value",
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          verticalAlign: "middle",
          textStyle: {
            color: "#6E8098",
            fontSize: 12,
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        gridIndex: 2,
        type: "value",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          verticalAlign: "middle",
          textStyle: {
            color: "#6E8098",
            fontSize: 12,
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        name: "",
        gridIndex: 0,
        type: "category",
        inverse: true,
        position: "right",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: myData.map(function (value) {
          return {
            value: value,
            textStyle: {
              textAlign: "left",
              align: "right",
            },
          };
        }),
        axisLabel: {
          align: "left",
          textStyle: {
            color: "#fff",
            textAlign: "right",
            align: "right",
            fontSize: "12",
          },
          //   rich: {
          //     a: {
          //       color: "#fff",
          //       backgroundColor: "#49a2ff",
          //       width: 24,
          //       height: 23,
          //       align: "center",
          //       borderRadius: 3,
          //     },
          //     a1: {
          //       color: "#fff",
          //       backgroundColor: "#f5576c",
          //       width: 24,
          //       height: 23,
          //       align: "center",
          //       borderRadius: 3,
          //     },
          //     a2: {
          //       color: "#fff",
          //       backgroundColor: "#fee140",
          //       width: 24,
          //       height: 24,
          //       align: "center",
          //       borderRadius: 3,
          //     },
          //     a3: {
          //       color: "#fff",
          //       backgroundColor: "#96fbc4",
          //       width: 24,
          //       height: 24,
          //       align: "center",
          //       borderRadius: 3,
          //     },
          //     b: {
          //       color: "#D1DEEE",
          //       width: 100,
          //       height: 24,
          //       align: "right",
          //       fontSize: 12,
          //       fontWeight: "bold",
          //     },
          //   },
          //   formatter: function (params) {
          //     var index = myData.map((item) => item).indexOf(params);
          //     index = index + 1;
          //     if (index < 4) {
          //       return [`{a${index}|${index}}{b|${params}}`].join("\n");
          //     } else {
          //       return [`{a|${index}}{b|${params}}`].join("\n");
          //     }
          //   },
        },
        triggerEvent: true,
      },
      {
        gridIndex: 1,
        type: "category",
        inverse: true,
        position: "right",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          margin: 8,
          textStyle: {
            color: "#9D9EA0",
            fontSize: 12,
          },
        },
        data: myData,
        triggerEvent: true,
      },
      {
        gridIndex: 2,
        type: "category",
        inverse: true,
        position: "left",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          textStyle: {
            color: "#9D9EA0",
            fontSize: 12,
          },
        },
        data: myData,
        triggerEvent: true,
      },
    ],
    series: [
      {
        name: "资金占比",
        type: "bar",
        barGap: 20,
        barWidth: 6,
        xAxisIndex: 1,
        yAxisIndex: 1,
        showBackground: true,
        backgroundStyle: {
          color: "#011431",
        },
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
            position: "left",
            offset: [0, 0],
            textStyle: {
              color: "#666666",
              fontSize: 14,
            },
          },
        },
        itemStyle: {
          normal: {
            barBorderRadius: [10, 0, 0, 10],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#FFCE65",
              },
              {
                offset: 1,
                color: "#052a57",
              },
            ]),
          },
        },
        data: classifyAreaProportion,
      },
      {
        name: "面积占比",
        type: "bar",
        barGap: 20,
        barWidth: 6,
        xAxisIndex: 2,
        yAxisIndex: 2,
        showBackground: true,
        backgroundStyle: {
          color: "#011431",
        },
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
            position: "right",
            offset: [0, 0],
            textStyle: {
              color: "#666666",
              fontSize: 14,
            },
          },
        },
        itemStyle: {
          normal: {
            barBorderRadius: [0, 10, 10, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#303e54",
              },
              {
                offset: 1,
                color: "#1093FA",
              },
            ]),
          },
        },
        data: classifyInvestProportion,
      },
    ],
  });
  chart.on("click", function (params) {
    console.log(params,'paramsparams');
    emit("click-call-back", { ...params });
  });
};
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;
}
watchEffect(() => {});
onMounted(() => {
  initM();
});
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 450px;
  height: 240px;
  // margin-left:-30px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>