<template>
  <div class="line-chart-wrap" :style="customChartStyle">
    <base-chart :option="chartOption" v-if="showChart" />
    <div v-else class="text"><span>暂无数据</span></div>
  </div>
</template>
<script>
import chartsMixins from "../../chartsMixins.js";
export default {
  name: "line-bar-chart",
  mixins: [chartsMixins],
  props: {
    customChartStyle: {
      type: String,
      default: "",
    },
    dataSource: {
      type: Array,
      default: () => {
        return [];
      },
    },
    colors: {
      type: Array,
      default: () => {
        return [0, 2, 3, 4, 7, 0];
      },
    },
    decimals: {
      default: 2,
      type: [Number, String],
    },
    tooltipFormatter: {
      type: Function,
    },
    tooltipValueUnit: {
      type: String,
      default: "",
    },
    tooltipTitleFn: {
      type: Function,
    },
    tooltip: {
      type: Object,
      default: () => ({}),
    },
    xAxisAxisLabelFormattter: {
      type: Function,
    },
    yAxisName: {
      type: String,
      default: "",
    },
    yAxisAxisLabelFormattter: {
      type: Function,
    },
    yAxis: {
      type: Object,
      default: () => ({}),
    },
    legend: {
      type: Object,
      default: () => ({}),
    },
    showDataZoom: {
      default: false,
      type: Boolean,
    },
    dataZoom: {
      type: Object,
      default: () => ({}),
    },
    grid: {
      type: Object,
      default: () => ({}),
    },
    showChart: {
      default: true,
      type: [Boolean, Number],
    },
    otherConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  methods: {
    getXAxis() {
      return {
        type: "category",
        name: "",
        axisLine: {
          show: true,
          lineStyle: { color: "#DCDFE6" },
        },
        axisTick: {
          show: false,
        },
        show: true,
        axisLabel: {
          show: true,
          color: "#909399",
          formatter: (params) => {
            if (this.xAxisAxisLabelFormattter) {
              return this.xAxisAxisLabelFormattter(params);
            }
            return this.getTime(params).time;
          },
        },
      };
    },
    getYAxis() {
      return {
        type: "value",
        name: this.yAxisName || "",
        show: true,
        axisLabel: {
          show: true,
          color: "#909399",
          ...(this.yAxisAxisLabelFormattter
            ? {
                formatter: (params) => {
                  return this.yAxisAxisLabelFormattter(params);
                },
              }
            : {}),
        },
        nameTextStyle: {
          color: "#909399",
          fontSize: 12,
        },
        nameGap: 10,
        axisLine: {
          show: true,
          lineStyle: { color: "#DCDFE6" },
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
          },
        },
      };
    },
  },

  computed: {
    boundaryGap() {
      return this.dataSource?.some((cur) => cur.type === "bar");
    },
    chartOption() {
      return {
        title: {
          top: "10",
          left: "center",
          text: "",
          textStyle: {},
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              show: false,
            },
          },
          borderColor: "transparent",
          formatter: (params) => {
            if (this.tooltipFormatter) {
              return this.tooltipFormatter(params);
            } else {
              if (this.dataSource) {
                const title = this.tooltipTitleFn
                  ? this.tooltipTitleFn(params[0])
                  : params[0]?.axisValue;
                if (this.dataSource.length) {
                  return (
                    `<div style="font-size:12px;">` +
                    `<div style="margin-bottom: 8px; line-height:14px;color: #303133;widht:100%;text-align:left">${title}</div>` +
                    params
                      .map((cur) => {
                        return `<div style="${
                          this.defaultStyle
                        };position: relative;padding-left:10px;height: 16px;margin-top:4px;line-height:18px"><span><span style="position:absolute; left:0;bottom: 5px;;background:${
                          cur.color
                        };margin-right: 4px;width: 5px;height:5px;border-radius:6px;"> </span><span style="margin-right:32px;color:#606266;">${
                          cur.seriesName
                        }</span></span><span style="color: #303133;">${this.toFormatMoney(
                          cur.value,
                          this.decimals
                        )}${this.tooltipValueUnit || ""}</span></div>`;
                      })
                      .join("") +
                    `</div>`
                  );
                }
                return "";
              }
              return "";
            }
          },
          backgroundColor: "rgba(255,255,255,0.95)",
          ...this.tooltip,
        },
        legend: {
          show: true,
          left: "center",
          selector: false,
          type: "scroll",
          top: 0,
          borderWidth: 0,
          textStyle: {
            fontSize: 12,
          },
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20,
          ...this.legend,
        },
        dataZoom: [
          {
            show: this.showDataZoom,
            type: "slider",
            xAxisIndex: 0,
            height: 10,
            bottom: 5,
            moveHandleSize: 0,
            handleSize: 20,
            showDetail: false,
            borderColor: "transparent",
            borderWidth: 0,
            handleIcon:
              "image://data:image/png;base64,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",
            moveHandleStyle: {
              color: "#5058FF",
            },
            brushStyle: {
              color: "rgba(80,88,255,0.3)",
            },
            dataBackground: {
              areaStyle: {
                color: "rgba(80,88,255,0.2)",
              },
            },
            backgroundColor: "rgba(80,88,255,0.1)",
            ...this.dataZoom,
          },
        ],
        grid: {
          right: 10,
          left: 10,
          top: "45",
          bottom: this.showDataZoom ? 33 : 1,
          containLabel: true,
          ...this.grid,
        },
        xAxis: this.dataSource.length
          ? this.dataSource?.reduce((total, item) => {
              if (total.some((cur) => item.xAxisIndex === cur.xAxisIndex)) {
                return total;
              } else {
                const defaultXAxis = this.getXAxis();
                return total.concat(
                  Object.assign(defaultXAxis, {
                    data: item?.data?.map((cur) =>
                      // eslint-disable-next-line no-prototype-builtins
                      typeof cur === "object" && cur.hasOwnProperty("x")
                        ? cur.x
                        : cur
                    ),
                    gridIndex: item.xAxisIndex || 0,
                    boundaryGap: this.boundaryGap,
                  })
                );
              }
            }, [])
          : this.getXAxis(),
        yAxis: this.dataSource.length
          ? this.dataSource?.reduce((total, item) => {
              if (total.some((cur) => item.yAxisIndex === cur.yAxisIndex)) {
                return total;
              } else {
                const defaultYAxis = this.getYAxis();
                return total.concat(Object.assign(defaultYAxis, this.yAxis));
              }
            }, [])
          : this.getYAxis(),
        series: this.dataSource?.map((cur) => {
          return {
            barMaxWidth: 16,
            ...cur,
            data: cur.data?.map((cur) =>
              // eslint-disable-next-line no-prototype-builtins
              typeof cur === "object" && cur.hasOwnProperty("y") ? cur.y : cur
            ),
            itemStyle: {
              opacity: 0.8,
            },
          };
        }),
        color: this.colors?.every((cur) => typeof cur === "number")
          ? this.getColorList(this.colors)
          : this.colors,
        ...this.otherConfig,
      };
    },
  },
};
</script>
<style scoped lang="scss">
.line-chart-wrap {
  height: 264px;
  .text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;
    text-align: center;
    span {
      font-size: 12px;
      margin-top: -30px;
    }
  }
}
</style>
