<template>
  <base-chart :option="chartOptions" />
</template>
<script>
import chartsMixins from "../../chartsMixins.js";
export default {
  name: "funnel-chart",
  mixins: [chartsMixins],
  props: {
    dataSource: {
      default: () => [],
      type: Array,
    },
    utilt: {
      default: "",
      type: String,
    },
    decimals: {
      type: [String, Number],
      default: 2,
    },
  },
  data() {
    return {};
  },
  computed: {
    devicePixelRatio() {
      let devicePixelRatio = window.devicePixelRatio;
      if (devicePixelRatio >= 3) {
        return 3;
      } else if (devicePixelRatio >= 2 && devicePixelRatio < 3) {
        return 2;
      } else {
        return 1;
      }
    },
    chartOptions() {
      const yAxisData = this.dataSource?.map((cur) => cur.value);
      const max = Math.max.apply(
        null,
        yAxisData.filter((cur) => cur)
      );
      return {
        title: {
          text: `{name|总体转化率}{value|${
            yAxisData[0]
              ? (
                  ((yAxisData[yAxisData.length - 1] || 0) /
                    (yAxisData[0] || 1)) *
                  100
                ).toFixed(2) + "%"
              : "--"
          }}`,
          left: "center",
          textStyle: {
            rich: {
              name: {
                fontSize: 13,
                color: "#303133",
                fontWeight: 400,
                padding: [0, 18, 0, 0],
              },
              value: {
                fontSize: 36,
                color: "#303133",
                fontWeight: 700,
              },
            },
          },
        },
        grid: {
          left: 0,
          bottom: -20,
          right: 0,
          top: 50,
        },
        yAxis: [
          {
            inverse: true,
            data: this.dataSource?.map((cur) => cur.name),
            show: false,
            axisLabel: {
              show: false,
            },
            //offset: 30,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          {
            inverse: true,
            data: yAxisData,
            axisLabel: {
              inside: true,
              textStyle: {
                color: "#606266",
                fontSize: 13,
                align: "right",
              },
              formatter: (param) => {
                return `${this.toFormatMoney(param || 0, this.decimals)}${
                  this.utilt
                }\n{b|}\n{b|}`;
              },
              rich: {
                b: {
                  color: "transparent",
                  lineHeight: 20,
                },
              },
            },
            offset: 0,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        xAxis: {
          max: max,
          show: false,
        },
        series: [
          {
            // 辅助系列
            type: "bar",
            barGap: "-100%",
            silent: true,
            itemStyle: {
              color: "transparent",
            },
            barWidth: 19,
            data: yAxisData.map((cur, index) => {
              return {
                value: max || 10,
                label: {
                  position: "insideBottom",
                  distance: -25,
                  show: true,
                  backgroundColor: {
                    image:
                      yAxisData.length !== index + 1
                        ? "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAA6CAYAAABfwdAwAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAkKADAAQAAAABAAAAOgAAAAAFqI2/AAAEWklEQVR4Ae2dz05TQRSHZ9qKLtwAtogC7jUhIC5o2LEwMT6AL+DGjQsfxK0bH0AT9yYa3ZnLQsGQ6F78F9sAC10otIy/c+kt7eQoR6RwaX9NyL1z7mk79+PLuTOTMHgXvdbXw5Vm093eCe66924qBHc2SmFzgAjAgR9wYK3g3bNi0T0cHfXvOm/fZ40QwlCt7u6jfQdvKGRxHkkgIwCZdnD+oFJ297z3WxJPBRJ5vtXcU7QXJcgXCexD4OVYxd0QidJK06o8lGcfarzcJrDYcsZ5GfM0mm6Vj602HJ4YCMjjrFR00wUZMFMeAzGmdBEQZ8Sdgsy2uq6wQQJGAuJOQabqxnymkUAXAXGngFLEdZ4uLGxYCYg7XO+x0mKeSoACqVgYtBKgQFZSzFMJUCAVC4NWAhTISop5KgEKpGJh0EqAAllJMU8lQIFULAxaCVAgKynmqQQokIqFQSsBCmQlxTyVAAVSsTBoJUCBrKSYpxKgQCoWBq0EKJCVFPNUAhRIxcKglQAFspJinkqAAqlYGLQSoEBWUsxTCVAgFQuDVgIUyEqKeSoBCqRiYdBKgAJZSTFPJUCBVCwMWgnIX6YGazLzSKCTgLgjf5m63hnkOQlYCYg78ghbtb6BeSQQEVgtYDO7R1GQTRKwEYA7HtvbFbG9nVShy7Z3MYsEUgLvsc3dNAbRvumK7i4GRNsEQwIWAqkrqTO+mU7jz5/zLyDRTVz4bvkA5gwugdQRuJI6AwztdaCxUf88lNwCEp7gpzG4iHjnGgFxQtwQR8SVLKe9T3QWkGO9Hsabzt3ywS2gOY/p2kTndZ4PBgEI8wl3uhS8e1V07nG57L/Gd64KFCdhJ9cJbKhYhUhVXKti5fEqjkNxHtsnmsAWZFjGHSQQJ8Gu9Al2pReB/voyCRR/AmZup2sbkGgHQmVSBXcxzmM7vwQgyWf0LsFW8wkGMkllxC1jQvXrX3t8IIG0L0GVmpQqhWtV7N4px1n8sEppsI4+Jv+WYAX/7yLBMasuHw+jG4cmUNyZtErV3Bzslio1j+vyCGSVikH1oN1RXZbwlEgqFffmINXF0rWeCaR9OauURuW/Yz2rLpaeHalAcYeiKrU7QA/uQpzH9h4BVJcvaO2OXXpcXfa+9c9nxyqQ1q2NjTDVaHSNpWaQN6hjKakub7OxS6nkkpERv6ZxO65Y7gSKQaBKnanVMOPbHUv1dZVSqovMjH7GTPLUzr1AGqy4SgH8LAbop7TcvMbQ5230uT0zymN1sbA7kQLFN9aqUnOIV7GukVWp8TjvONsQRlZxE8xI06l0a2aU6+pi4dUXAmk3urkZLslYqilrUlhGOMoqlVUXyLxUxNqLVJfhYf9B6+dJj/WtQPEvppdVql+rS8xQaw+MQNrNd1UpPP4AY2a/sVRaXTAzwucl/V5dNGZxbKAFimFIlarX3TVIJOOoWTyCJtOc4GTZfwXyJOWye533mVF8X2yTAAmQQH8S+A3MyD/2wyfc3QAAAABJRU5ErkJggg=="
                        : "xxx.png",
                  },
                  borderWidth: 1,
                  borderRadius: 2,
                  lineHeight: 14,
                  color: "#5058FF",
                  width: 72,
                  height: 28,
                  fontSize: 12,
                  verticalAlign: "middle",
                  formatter: function () {
                    if (index + 1 !== yAxisData.length) {
                      if (cur) {
                        return (
                          ((yAxisData[index + 1] / (cur || 1)) * 100).toFixed(
                            2
                          ) + "%"
                        );
                      } else {
                        return "--";
                      }
                    }
                    return ``;
                  },
                },
              };
            }),
          },
          {
            type: "bar",
            data: yAxisData.map((cur) => cur || " "),
            barWidth: 19,
            showBackground: true,
            backgroundColor: "#f2f2f2",
            itemStyle: {
              color: "#5058FF",
              opacity: 0.8,
            },
            label: {
              position: [10, 10],
              normal: {
                position: [0, -20],
                show: true,
                textStyle: {
                  fontSize: 13,
                  color: "#303133",
                },
                formatter: function (value) {
                  console.log(value);
                  return value.name;
                },
              },
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.funnle-chart-wrap {
  height: 400px;
  .no-data {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;
    font-size: 12px;
  }
}
</style>
