<template>
  <canvas
    v-if="canvasId"
    :id="canvasId"
    :canvasId="canvasId"
    :style="{
      width: cWidth * pixelRatio + 'px',
      height: cHeight * pixelRatio + 'px',
      transform: 'scale(' + 1 / pixelRatio + ')',
      'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
      'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
    }"
    :ontouch="true"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
    @error="error"
  >
  </canvas>
</template>

<script>
// import { min } from "moment";
import uCharts from "./u-charts.js";
var canvases = {};

export default {
  props: {
    chartType: {
      required: true,
      type: String,
      default: "column",
    },
    opts: {
      required: true,
      type: Object,
      default() {
        return null;
      },
    },
    canvasId: {
      type: String,
      default: "u-canvas",
    },
    cWidth: {
      default: uni.upx2px(375),
    },
    cHeight: {
      default: uni.upx2px(250),
    },
    pixelRatio: {
      type: Number,
      default: 1,
    },
    legends: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      colors: [
        "#5181F6",
        "#00DBB6",
        "#F67F51",
        "#FF515A",
        "#8B5CFF",
        "#00CA69",
      ],
      _opts: {}
    };
  },
  mounted() {
    // this.$nextTick(() => {
    // 	this.init();
    // })
  },
  watch: {
    _opts: {
      handler(newVal, oldVal) {
        // console.log("发生改变了123", newVal)
        this.init();
        this.changeData(this.canvasId, newVal);
      },
      // deep: true,
      // immediate: true,
    },
    opts: {
      handler(newVal, oldVal) {
        // console.log("发生改变了", newVal)
        this._opts = newVal;
        // 	// this.init();
        // 	// console.log('canvases')
        	// console.log(canvases)
        // 	if (canvases = {}) {
        // 		// this.$nextTick(() => {
        // 		// 	this.init();
        // 		// })
        // 		setTimeout(()=>{
        // this.init();
        // this.changeData(this.canvasId, newVal);
        // 		},600)

        // 	} else {

        // 	}
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    init() {
      console.log("图表初始化");
      switch (this.chartType) {
        case "column":
          this.$nextTick(() => {
            console.log("图表初始化1");
            this.initColumnChart();
          });
          break;
        case "line":
          this.$nextTick(() => {
            console.log("图表初始化2");
            this.initLineChart();
          });
          break;
        case "arcbar": //半圆
          console.log("图表初始化3");
          setTimeout(() => {
            this.initArcbarChart();
          }, 1200);
          break;
        case "ring": //圆环
          this.$nextTick(() => {
            console.log("图表初始化4");
            this.initRingChart();
          });
        case "columnar": //柱状图
          this.$nextTick(() => {
            console.log("图表初始化5");
            this.initColumnarChart();
          });
          break;
        case "pie": //圆环
          this.$nextTick(() => {
            console.log("图表初始化6");
            this.initPieChart();
          });
          break;
        case "mix": //混合图
          this.$nextTick(() => {
            console.log("图表初始化7");
            this.initMixChart();
          });
          break;
        default:
          break;
      }
    },
    initColumnChart() {
      // console.log(3333, structuredClone(this._opts.series[0]))
      // .data.sort((a, b) => { a - b})[0] + 20
      console.log(2222222, uni.upx2px(11));
      canvases[this.canvasId] = new uCharts({
        // $this: this,
        // canvasId: this.canvasId,
        context: uni.createCanvasContext(this.canvasId, this),
        type: "column",
        legend: {
          show: false,
        },
        padding: [uni.upx2px(30), 0, uni.upx2px(20), uni.upx2px(20)],
        colors: this.colors,
        fontSize: uni.upx2px(22),
        background: "#FFFFFF",
        pixelRatio: this.pixelRatio,
        // animation: true,
        categories: this._opts.categories,
        series: this._opts.series,
        enableScroll: true,
        textDataTitle: this._opts.textDataTitle ? this._opts.textDataTitle : '',
        textLabelX: this._opts.textDataX ? true : false,
        textDataX: this._opts.textDataX,
        animation: false,
        update: true,
        duration:  0,
        xAxis: {
          disableGrid: true,
          itemCount: 4,
          labelCount: this._opts.categories.length,
          fontSize: uni.upx2px(22),
          lineHeight: uni.upx2px(40),
          scrollShow: true,
          // rotateLabel: true,
        },
        yAxis: {
          format: (val) => {
            if ((val + "").indexOf(".") != -1) {
              return val.toFixed(0); //保留小数后1位
            } else {
              return val;
            }
          },
          // data:{

          // }
          // axisLine:false
          //disabled:true
        },
        dataLabel: true,
        width: this.cWidth * this.pixelRatio,
        height: this.cHeight * this.pixelRatio,
        extra: {
          column: {
            type: "group",
            width: uni.upx2px(28),
          },
        },
        scales: {
          xAxis: [
            {
              stacked: true,
              ticks: {
                fontColor: "red", // X轴样式
              },
            },
          ],
        },
      });
    },
    initLineChart() {
      canvases[this.canvasId] = new uCharts({
        context: uni.createCanvasContext(this.canvasId, this),
        type: "line",
        fontSize: uni.upx2px(22),
        legend: {
          show: this.legends,
        },
        dataLabel: false,
        dataPointShape: true,
        colors: this.colors,
        background: "#FFFFFF",
        pixelRatio: this.pixelRatio,
        categories: this._opts.categories,
        series: this._opts.series,
        animation: true,
        enableScroll: true,
        xAxis: {
          type: "grid",
          axisLine: false,
          gridColor: "#fff",
          gridType: "dash",
          dashLength: 8,
          itemCount: 4,
          scrollShow: true,
          fontSize: uni.upx2px(22),
        },
        yAxis: {
          axisLine: false,
          // gridType: 'dash',
          gridColor: "rgba(42, 43, 91, 0.1)",
          // dashLength: 8,
          // splitNumber: 5,
          min: 0,
          // max: 180,
          // format: (val) => {
          // 	return val.toFixed(0) + '元'
          // }
        },
        width: this.cWidth * this.pixelRatio,
        height: this.cHeight * this.pixelRatio,
        extra: {
          line: {
            type: "curve",
          },
        },
      });
    },

    //半圆
    initArcbarChart() {
      let winWidth = 0;
      uni.getSystemInfo({
        success: function (res) {
          winWidth = res.windowWidth / 2 - 10;
        },
      });
      canvases[this.canvasId] = new uCharts({
        context: uni.createCanvasContext(this.canvasId, this),

        type: "arcbar",
        fontSize: 11,
        legend: {
          show: false,
        },
        background: "#FFFFFF",
        pixelRatio: 1,
        series: this._opts.series,
        animation: true,
        width: this.cWidth,
        height: this.cHeight,
        dataLabel: true,
        subtitle: {
          name: this._opts.series[0].name,
          color: "#000",
          fontSize: 25,
          offsetY: -12,
        },
        extra: {
          arcbar: {
            type: "default",
            width: 12,
            startAngle: 1,
            endAngle: 0,
            gap: 5,
            radius: 90,
            center: {
              y: 100,
              x: winWidth,
            },
          },
        },
      });
    },

    //圆环
    initRingChart() {
      console.log("this.canvasId", this.canvasId);

      var dataLabel = false,
        legend = false;
      var radius = 0;
      if (this.canvasId == "integritySafety") {
        dataLabel = legend = true;
      }
      if (this.canvasId == "qualityPieChart") {
        radius = 30;
      }
      canvases[this.canvasId] = new uCharts({
        context: uni.createCanvasContext(this.canvasId, this),

        type: "ring",
        fontSize: uni.upx2px(22),
        title: this._opts.title,
        legend: {
          show: legend,
        },
        extra: {
          ring: {
            ringWidth:  uni.upx2px(24),
            offsetAngle:  -90,
            activeRadius: radius,
          },
          tooltip: {
            showBox: false,
          },
        },
        width: this.cWidth,
        height: this.cHeight,
        background: "#FFFFFF",
        series: this._opts.series,
        dataLabel: dataLabel,
      });
    },
    // 饼图
    initPieChart() {
      console.log("我是饼图", this.canvasId);
      // return
      canvases[this.canvasId] = new uCharts({
        context: uni.createCanvasContext(this.canvasId, this),
        type: "pie",
        fontSize: uni.upx2px(26),
        title: this._opts.title,
        legend: {
          show: this.legends,
          position: "right",
          lineHeight: uni.upx2px(60),
          fontSize: uni.upx2px(26),
          lineHeight: uni.upx2px(44),
          itemGap: uni.upx2px(20),
          padding: uni.upx2px(10),
          margin: uni.upx2px(10),
        },
        extra: {
          pie: {
            activeOpacity: uni.upx2px(1),
            activeRadius: uni.upx2px(20),
            offsetAngle: 0,
            lableWidth: uni.upx2px(30),
            border: true,
            borderWidth: uni.upx2px(6),
            borderColor: "#FFFFFF",
            linearType: "custom",
          },
          tooltip: {
            showBox: true,
            dashLength: uni.upx2px(8),
            boxPadding: uni.upx2px(6),
            fontSize: uni.upx2px(26),
            lineHeight: uni.upx2px(40),
          },
          markLine: {
            dashLength: uni.upx2px(8),
          }
        },
        width: this.cWidth,
        height: this.cHeight,
        background: "#FFFFFF",
        series: this._opts.series,
        dataLabel: true,
      });
    },
    // 条状图
    initColumnarChart() {
      canvases[this.canvasId] = new uCharts({
        context: uni.createCanvasContext(this.canvasId, this),
        type: "bar",
        fontSize: 11,
        legend: {
          show: this.legends,
        },
        dataLabel: false,
        dataPointShape: true,
        colors: this.colors,
        background: "#FFFFFF",
        pixelRatio: this.pixelRatio,
        categories: this._opts.categories,
        series: this._opts.series,
        animation: true,
        enableScroll: true,
        textLabelX: this._opts.textDataX ? true : false,
        textDataX: this._opts.textDataX,
        xAxis: {
          // min: 0,
          // boundaryGap: "justify",
          disableGrid: true,
          // type: "grid",
          axisLine: false,
          gridColor: "#fff",
          gridType: "dash",
          dashLength: 8,
        },
        yAxis: {
          // itemCount: 4,
          // scrollShow: true,
          //   scrollShow: true,
          //   itemCount: 4,
          //   axisLine: false,
          //   // gridType: 'dash',
          //   gridColor: "rgba(42, 43, 91, 0.1)",
          //   // dashLength: 8,
          //   // splitNumber: 5,
          //   min: 0,
          // max: 180,
          // format: (val) => {
          // 	return val.toFixed(0) + '元'
          // }
        },
        width: this.cWidth * this.pixelRatio,
        height: this.cHeight * this.pixelRatio,
        extra: {
          bar: {
            type: "group",
            width: 30,
            meterBorde: 1,
            meterFillColor: "#FFFFFF",
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            categoryGap: 2,
          },
          tooltip: {
            formatter: function (item, category, seriesName, dataIndex) {
              console.log(66666, item, category, seriesName, dataIndex);
              return `${seriesName} ${category}:${dataIndex}`;
            },
          },
        },
      });
    },
    // 混合图
    initMixChart() {
      canvases[this.canvasId] = new uCharts({
        context: uni.createCanvasContext(this.canvasId, this),
        type: "mix",
        fontSize: uni.upx2px(22),
        legend: {
          show: this.legends,
        },
        dataLabel: false,
        dataPointShape: true,
        colors: this.colors,
        background: "#FFFFFF",
        pixelRatio: this.pixelRatio,
        categories: this._opts.categories,
        series: this._opts.series,
        enableScroll: true,
        animation: false,
        update: true,
        legend: {
          itemGap: uni.upx2px(10),
        },
        xAxis: {
          disableGrid: true,
          // type: "grid",
          axisLine: false,
          gridColor: "#fff",
          gridType: "dash",
          dashLength: 7,
          itemCount: 6,
          fontSize: uni.upx2px(23),
          lineHeight: uni.upx2px(40),
          // scrollShow: true,
        },
        yAxis: {
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridType: "dash",
          dashLength: uni.upx2px(8),
          gridColor: "#CCCCCC",
          padding: uni.upx2px(20),
          showTitle: true,
          data: [
            {
              position: "left",
              title: "累计",
              titleFontSize: uni.upx2px(26),
              titleOffsetY: uni.upx2px(-5),
            },
            {
              position: "right",
              title: "当期",
              textAlign: "left",
              titleFontSize: uni.upx2px(26),
              titleOffsetY: uni.upx2px(-5),
            },
          ],
        },
        width: this.cWidth * this.pixelRatio,
        height: this.cHeight * this.pixelRatio,
        extra: {
          mix: {
            column: {
              width: uni.upx2px(20),
            },
            line: {
              width: uni.upx2px(4),
            }
          },
        },
      });
    },

    // 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
    changeData(cid, newdata) {
      console.log("updateData", newdata);
      console.log(canvases[cid], canvases, cid);
      if (!canvases[cid]) return;
      var xData = newdata.categories;
      if (xData) {
        for (var i = 0; i < xData.length; i++) {
          if (xData[i].length > 5) {
            xData[i] = xData[i].substring(0, 5) + "...";
          }
        }
      }

      canvases[cid].updateData({
        series: newdata.series,
        categories: xData,
        title: newdata.title,
      });
    },
    touchStart(e) {
      // canvases[this.canvasId].showToolTip(e, {
      //   format: function (item, category) {
      //     return category + " " + item.name + ":" + item.data;
      //   },
      // });
      canvases[this.canvasId].scrollStart(e);
    },
    touchMove(e) {
      canvases[this.canvasId].scroll(e);
    },
    touchEnd(e) {
      canvases[this.canvasId].scrollEnd(e);
    },
    error(e) {
      console.log(e);
    },
  },
};
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
  flex: 1;
  background-color: #ffffff;
}
</style>
