<template>
  <div ref="chart" style="width: 96%; height: 250px"></div>
</template>

<script setup>
import { onMounted, onBeforeMount, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";

const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const chart = ref(); // 创建DOM引用

const colors = [
  {
    left: "rgba(14, 252, 255, .16)",
    right: "rgba(14, 252, 255, .6)",
    top: "rgba(14, 252, 255, 1)",
    bottom: "rgba(14, 252, 255,  .46)",
    front: "rgba(14, 252, 255, .66)",
  },
  {
    left: "rgba(14, 252, 255, .16)",
    right: "rgba(14, 252, 255, .6)",
    top: "rgba(14, 252, 255, 1)",
    bottom: "rgba(14, 252, 255,  .46)",
    front: "rgba(14, 252, 255, .66)",
  },
  {
    left: "rgba(14, 252, 255, .16)",
    right: "rgba(14, 252, 255, .6)",
    top: "rgba(14, 252, 255, 1)",
    bottom: "rgba(14, 252, 255,  .46)",
    front: "rgba(14, 252, 255, .66)",
  },
];
const maxList = ref([]);
// const valueList = [20, 53, 47, 65, 29, 11, 10];
const data = reactive({
  list: [],
  option: {},
  Max: 200,
  valueList: [20, 53, 47, 65, 29, 11, 10],
  xxname: [
   
  ],
});
// 注册5个面图形:左侧、前面、右面、上面、下面
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
const CubeLeft_1 = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    // 会canvas的应该都能看得懂，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x - 20, shape.y];
    const c1 = [shape.x - 7, shape.y - 14];
    const c2 = [xAxisPoint[0] - 7, xAxisPoint[1] - 14];
    const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  },
});
const CubeFront_1 = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    // 会canvas的应该都能看得懂，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x - 20, shape.y];
    const c1 = [shape.x + 2, shape.y];
    const c2 = [xAxisPoint[0] + 2, xAxisPoint[1]];
    const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  },
});
const CubeRight_1 = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x + 2, shape.y];
    const c1 = [shape.x + 15, shape.y - 14];
    const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
    const c3 = [xAxisPoint[0] + 2, xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  },
});
const CubeTop_1 = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const c0 = [shape.x - 20, shape.y];
    const c1 = [shape.x + 2, shape.y];
    const c2 = [shape.x + 15, shape.y - 14];
    const c3 = [shape.x - 7, shape.y - 14];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  },
});
const CubeBottom_1 = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    // 会canvas的应该都能看得懂，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;

    const c0 = [xAxisPoint[0] - 20, xAxisPoint[1]];
    const c1 = [xAxisPoint[0] + 2, xAxisPoint[1]];
    const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
    const c3 = [xAxisPoint[0] - 7, xAxisPoint[1] - 14];

    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  },
});

echarts.graphic.registerShape("CubeLeft_1", CubeLeft_1);
echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
const getOption = () => {
  data.option = {
    tooltip: {
      trigger: "axis",
      formatter: "{b0}:{c1}",
    },
    legend: {
      data: ["两慢病免费用药情况"],
      top: "4%",
      right: "5%",
      textStyle: {
        fontSize: 16,
        color: "#ffffff",
      },
    },
    grid: {
      left: 10,
      right: 0,
      bottom: 20,
      top: 70,
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: data.xxname,
        axisLine: {
          show: false,
        },
        offset: 10,

        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: "#fff",
          fontSize: 16,
          //   formatter: function (value) {
          //     return value.length > 3 ? value.slice(0, 2) + "..." : value;
          //   },
        },
      },
      {
        type: "category",
        data: data.xxname,
        axisLine: {
          show: false,
        },
        offset: 10,

        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          color: "#fff",
          fontSize: 16,
        },
      },
    ],
    yAxis: {
      min: 0,
      max: data.Max,
      // interval: 100,
      type: "value",
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, .16)",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(255, 255, 255, .16)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        fontSize: 16,
        color: "#fff",
      },
    },
    series: [
      //阴影部分
      {
        type: "custom",
        renderItem: function (params, api) {
          // console.log(api);
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeBottom_1",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(103, 180, 233, .16)",
                },
              },
              {
                type: "CubeLeft_1",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(103, 180, 233, .04)",
                },
              },
              {
                type: "CubeFront_1",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(103, 180, 233, .16)",
                },
              },
              {
                type: "CubeRight_1",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(103, 180, 233, .08)",
                },
              },
              {
                type: "CubeTop_1",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(103, 180, 233, .26)",
                },
              },
            ],
          };
        },
        data: maxList.value,
      },
      {
        name:'两慢病免费用药情况',
        type: "custom",
        itemStyle: {
          color:'#0efdff',
        },
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);

          return {
            type: "group",
            children: [
              {
                type: "CubeBottom_1",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: colors[`${params.dataIndexInside % 3}`]["bottom"],
                },
              },
              {
                type: "CubeLeft_1",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: colors[`${params.dataIndexInside % 3}`]["left"],
                },
              },
              {
                type: "CubeFront_1",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: colors[`${params.dataIndexInside % 3}`]["front"],
                },
              },
              {
                type: "CubeRight_1",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: colors[`${params.dataIndexInside % 3}`]["right"],
                },
              },
              {
                type: "CubeTop_1",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: colors[`${params.dataIndexInside % 3}`]["top"],
                },
              },
            ],
          };
        },

        data: data.valueList,
      },
      //顶部字体
      {
        type: "bar",
        xAxisIndex: 1,
        label: {
          show: true,
          fontSize: 18,
          position: "top",
          color: "#ffffff",
          formatter: function (data) {
            return data.value - 5;
          },
        },
        itemStyle: {
          color: "rgba(221, 242, 255, 0)",
        },

        data: data.valueList.map((item) => parseInt(item) + 5),
        barWidth: 20,
      },
    ],
  };
};
const setChart = () => {
  var myChart = echarts.init(chart.value);
  myChart.setOption(data.option);
};
const getMaxCeilingValue = (arr) => {
  let max = Math.max(...arr); // 找到数组中的最大值
  return Math.ceil(max / 100) * 100; // 将最大值向上取整到最近的100的倍数
};
const setChart1 = () => {
  data.valueList = [];
  data.xxname = [];
  if (data.list.length !== 0) {
    data.list.forEach((item) => {
      data.xxname.push(item.name); //信息名
      data.valueList.push(item.num); //信息数
    });
  }
};

onBeforeMount(() => {
  setTimeout(() => {
    data.list = props.list;
    setChart1();
    data.Max = getMaxCeilingValue(data.valueList);
    maxList.value = data.valueList.map((item) => parseInt(data.Max) * 0.9); // 生成新的数组，将每个值都替换为 data.Max 的90%
    getOption();
    setChart();
  }, 800);
});
</script>

<style lang="scss" scoped></style>
