import "../../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.mjs";
import "../../../../../store/modules/designStore/designStore.mjs";
import "../../../../../settings/designSetting.mjs";
import "../../../../../../node_modules/.pnpm/screenfull@6.0.2/node_modules/screenfull/index.mjs";
import "../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_root.mjs";
import "../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_baseGetTag.mjs";
import "../../../../../../node_modules/.pnpm/html2canvas@1.4.1/node_modules/html2canvas/dist/html2canvas.esm.mjs";
import cloneDeep from "../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/cloneDeep.mjs";
import "../../../../../../node_modules/.pnpm/crypto-js@4.1.1/node_modules/crypto-js/index.mjs";
import "../../../../../enums/pageEnum.mjs";
import "../../../../../router/index.mjs";
import "../../../../../../node_modules/.pnpm/vue3-lazyload@0.2.5-beta_a6dezdz3je235ci4e3tu4rayna/node_modules/vue3-lazyload/dist/vue3-lazyload.esm.mjs";
import "../../../../../components/GoSkeleton/index.vue.mjs";
import "../../../../../components/GoLoading/index.mjs";
import { useChartDataFetch } from "../../../../../hooks/useChartDataFetch.hook.mjs";
import "../../../../../api/axios.mjs";
import "../../../../../../node_modules/.pnpm/echarts@5.4.3/node_modules/echarts/index.mjs";
import "../../../../../store/modules/langStore/langStore.mjs";
import { useChartEditStore } from "../../../../../store/modules/chartEditStore/chartEditStore.mjs";
import merge from "../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/merge.mjs";
import { defineComponent, onMounted, watch, onUnmounted, openBlock, createElementBlock, Fragment, renderList, createCommentVNode } from "../../../../../../node_modules/.pnpm/@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.mjs";
import { toRefs, reactive, unref } from "../../../../../../node_modules/.pnpm/@vue_reactivity@3.3.4/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.mjs";
import { normalizeStyle } from "../../../../../../node_modules/.pnpm/@vue_shared@3.3.4/node_modules/@vue/shared/dist/shared.esm-bundler.mjs";
const _hoisted_1 = { class: "dv-scroll-board" };
const _hoisted_2 = ["align", "innerHTML"];
const _hoisted_3 = ["align", "innerHTML"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    chartConfig: {
      type: Object,
      required: true
    }
  },
  setup(__props) {
    const props = __props;
    const { w, h } = toRefs(props.chartConfig.attr);
    const status = reactive({
      defaultConfig: {
        /**
         * @description Board header
         * @type {Array<String>}
         * @default header = []
         * @example header = ['column1', 'column2', 'column3']
         */
        header: [],
        /**
         * @description Board dataset
         * @type {Array<Array>}
         * @default dataset = []
         */
        dataset: [],
        /**
         * @description Row num
         * @type {Number}
         * @default rowNum = 5
         */
        rowNum: 5,
        /**
         * @description Header background color
         * @type {String}
         * @default headerBGC = '#00BAFF'
         */
        headerBGC: "#00BAFF",
        /**
         * @description Odd row background color
         * @type {String}
         * @default oddRowBGC = '#003B51'
         */
        oddRowBGC: "#003B51",
        /**
         * @description Even row background color
         * @type {String}
         * @default evenRowBGC = '#003B51'
         */
        evenRowBGC: "#0A2732",
        /**
         * @description Scroll wait time
         * @type {Number}
         * @default waitTime = 2
         */
        waitTime: 2,
        /**
         * @description Header height
         * @type {Number}
         * @default headerHeight = 35
         */
        headerHeight: 35,
        /**
         * @description Column width
         * @type {Array<Number>}
         * @default columnWidth = []
         */
        columnWidth: [],
        /**
         * @description Column align
         * @type {Array<String>}
         * @default align = []
         * @example align = ['left', 'center', 'right']
         */
        align: [],
        /**
         * @description Show index
         * @type {Boolean}
         * @default index = false
         */
        index: false,
        /**
         * @description index Header
         * @type {String}
         * @default indexHeader = '#'
         */
        indexHeader: "#",
        /**
         * @description Carousel type
         * @type {String}
         * @default carousel = 'single'
         * @example carousel = 'single' | 'page'
         */
        carousel: "single",
        /**
         * @description Pause scroll when mouse hovered
         * @type {Boolean}
         * @default hoverPause = true
         * @example hoverPause = true | false
         */
        hoverPause: true
      },
      mergedConfig: props.chartConfig.option,
      header: [],
      rowsData: [],
      rows: [
        {
          ceils: [],
          rowIndex: 0,
          scroll: 0
        }
      ],
      widths: [],
      heights: [0],
      avgHeight: 0,
      aligns: [],
      animationIndex: 0,
      animationHandler: 0,
      updater: 0,
      needCalc: false
    });
    const calcData = () => {
      mergeConfig();
      calcHeaderData();
      calcRowsData();
      calcWidths();
      calcHeights();
      calcAligns();
      animation(true);
    };
    onMounted(() => {
      calcData();
    });
    const mergeConfig = () => {
      status.mergedConfig = merge(cloneDeep(status.defaultConfig), props.chartConfig.option);
    };
    const calcHeaderData = () => {
      let { header, index, indexHeader } = status.mergedConfig;
      if (!header.length) {
        status.header = [];
        return;
      }
      header = [...header];
      if (index)
        header.unshift(indexHeader);
      status.header = header;
    };
    const calcRowsData = () => {
      let { dataset, index, headerBGC, rowNum } = status.mergedConfig;
      if (index) {
        dataset = dataset.map((row, i) => {
          row = [...row];
          const indexTag = `<span class="index" style="background-color: ${headerBGC};border-radius: 3px;padding: 0px 3px;">${i + 1}</span>`;
          row.unshift(indexTag);
          return row;
        });
      }
      dataset = dataset.map((ceils, i) => ({ ceils, rowIndex: i }));
      const rowLength = dataset.length;
      if (rowLength > rowNum && rowLength < 2 * rowNum) {
        dataset = [...dataset, ...dataset];
      }
      dataset = dataset.map((d, i) => ({ ...d, scroll: i }));
      status.rowsData = dataset;
      status.rows = dataset;
    };
    const calcWidths = () => {
      const { mergedConfig, rowsData } = status;
      const { columnWidth, header } = mergedConfig;
      const usedWidth = columnWidth.reduce((all, ws) => all + ws, 0);
      let columnNum = 0;
      if (rowsData[0]) {
        columnNum = rowsData[0].ceils.length;
      } else if (header.length) {
        columnNum = header.length;
      }
      const avgWidth = (w.value - usedWidth) / (columnNum - columnWidth.length);
      const widths = new Array(columnNum).fill(avgWidth);
      status.widths = merge(widths, columnWidth);
    };
    const calcHeights = (onresize = false) => {
      const { mergedConfig, header } = status;
      const { headerHeight, rowNum, dataset } = mergedConfig;
      let allHeight = h.value;
      if (header.length)
        allHeight -= headerHeight;
      const avgHeight = allHeight / rowNum;
      status.avgHeight = avgHeight;
      if (!onresize)
        status.heights = new Array(dataset.length).fill(avgHeight);
    };
    const calcAligns = () => {
      const { header, mergedConfig } = status;
      const columnNum = header.length;
      let aligns = new Array(columnNum).fill("left");
      const { align } = mergedConfig;
      status.aligns = merge(aligns, align);
    };
    const animation = async (start = false) => {
      const { needCalc } = status;
      if (needCalc) {
        calcRowsData();
        calcHeights();
        status.needCalc = false;
      }
      let { avgHeight, animationIndex, mergedConfig, rowsData, updater } = status;
      const { waitTime, carousel, rowNum } = mergedConfig;
      const rowLength = rowsData.length;
      if (rowNum >= rowLength)
        return;
      if (start) {
        await new Promise((resolve) => setTimeout(resolve, waitTime * 1e3));
        if (updater !== status.updater)
          return;
      }
      const animationNum = carousel === "single" ? 1 : rowNum;
      let rows = rowsData.slice(animationIndex);
      rows.push(...rowsData.slice(0, animationIndex));
      status.rows = rows.slice(0, carousel === "page" ? rowNum * 2 : rowNum + 1);
      status.heights = new Array(rowLength).fill(avgHeight);
      await new Promise((resolve) => setTimeout(resolve, 300));
      if (updater !== status.updater)
        return;
      status.heights.splice(0, animationNum, ...new Array(animationNum).fill(0));
      animationIndex += animationNum;
      const back = animationIndex - rowLength;
      if (back >= 0)
        animationIndex = back;
      status.animationIndex = animationIndex;
      status.animationHandler = setTimeout(animation, waitTime * 1e3 - 300);
    };
    const stopAnimation = () => {
      status.updater = (status.updater + 1) % 999999;
      if (!status.animationHandler)
        return;
      clearTimeout(status.animationHandler);
    };
    const onRestart = async () => {
      try {
        if (!status.mergedConfig)
          return;
        stopAnimation();
        calcData();
      } catch (error) {
        console.log(error);
      }
    };
    watch(
      () => w.value,
      () => {
        onRestart();
      }
    );
    watch(
      () => h.value,
      () => {
        onRestart();
      }
    );
    watch(
      () => props.chartConfig.option,
      () => {
        onRestart();
      },
      { deep: true }
    );
    useChartDataFetch(props.chartConfig, useChartEditStore, (resData) => {
      props.chartConfig.option.dataset = resData;
      onRestart();
    });
    onUnmounted(() => {
      stopAnimation();
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        status.header.length && status.mergedConfig ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: "header",
          style: normalizeStyle(`background-color: ${status.mergedConfig.headerBGC};`)
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(status.header, (headerItem, i) => {
            return openBlock(), createElementBlock("div", {
              class: "header-item",
              key: `${headerItem}${i}`,
              style: normalizeStyle(`
        height: ${status.mergedConfig.headerHeight}px;
        line-height: ${status.mergedConfig.headerHeight}px;
        width: ${status.widths[i]}px;
      `),
              align: status.aligns[i],
              innerHTML: headerItem
            }, null, 12, _hoisted_2);
          }), 128))
        ], 4)) : createCommentVNode("", true),
        status.mergedConfig ? (openBlock(), createElementBlock("div", {
          key: 1,
          class: "rows",
          style: normalizeStyle(`height: ${unref(h) - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`)
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(status.rows, (row, ri) => {
            return openBlock(), createElementBlock("div", {
              class: "row-item",
              key: `${row.toString()}${row.scroll}`,
              style: normalizeStyle(`
        height: ${status.heights[ri]}px;
        line-height: ${status.heights[ri]}px;
        background-color: ${status.mergedConfig[row.rowIndex % 2 === 0 ? "evenRowBGC" : "oddRowBGC"]};
      `)
            }, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(row.ceils, (ceil, ci) => {
                return openBlock(), createElementBlock("div", {
                  class: "ceil",
                  key: `${ceil}${ri}${ci}`,
                  style: normalizeStyle(`width: ${status.widths[ci]}px;`),
                  align: status.aligns[ci],
                  innerHTML: ceil
                }, null, 12, _hoisted_3);
              }), 128))
            ], 4);
          }), 128))
        ], 4)) : createCommentVNode("", true)
      ]);
    };
  }
});
export {
  _sfc_main as default
};
