<script lang="ts">
export default {
  name: "LayTable",
};
</script>

<script setup lang="ts">
import "./index.less";
import {
  ref,
  watch,
  useSlots,
  withDefaults,
  onMounted,
  StyleValue,
  WritableComputedRef,
  computed,
  onBeforeUnmount,
} from "vue";
import { v4 as uuidv4 } from "../../utils/guidUtil";
import { Recordable } from "../../types";
import { LayIcon } from "@layui/icons-vue";
import LayCheckbox from "../checkbox/index.vue";
import LayDropdown from "../dropdown/index.vue";
import LayPage from "../page/index.vue";
import LayEmpty from "../empty/index.vue";
import TableRow from "./TableRow.vue";
import { nextTick } from "vue";

export interface LayTableProps {
  id?: string;
  skin?: string;
  size?: string;
  page?: Recordable;
  columns: Recordable[];
  dataSource: Recordable[];
  defaultToolbar?: boolean;
  selectedKey?: string;
  selectedKeys?: Recordable[];
  indentSize?: number;
  childrenColumnName?: string;
  height?: number;
  maxHeight?: string;
  even?: boolean;
  expandIndex?: number;
  rowClassName?: string | Function;
  cellClassName?: string | Function;
  rowStyle?: string | Function;
  cellStyle?: string | Function;
  spanMethod?: Function;
  defaultExpandAll?: boolean;
  expandKeys?: Recordable[];
  loading?: boolean;
  getCheckboxProps?: Function;
  getRadioProps?: Function;
}

const props = withDefaults(defineProps<LayTableProps>(), {
  id: "id",
  size: "md",
  indentSize: 30,
  childrenColumnName: "children",
  dataSource: () => [],
  selectedKeys: () => [],
  selectedKey: "",
  maxHeight: "auto",
  even: false,
  rowClassName: "",
  cellClassName: "",
  expandIndex: 0,
  rowStyle: "",
  cellStyle: "",
  defaultExpandAll: false,
  spanMethod: () => {},
  expandKeys: () => [],
  loading: false,
  getCheckboxProps: () => {},
  getRadioProps: () => {},
});

const tableId = uuidv4();

const emit = defineEmits([
  "change",
  "update:expandKeys",
  "update:selectedKeys",
  "update:selectedKey",
  "row-contextmenu",
  "row-double",
  "row",
]);

const slot = useSlots();
const slots = slot.default && slot.default();

const allChecked = ref(false);
const hasChecked = ref(false);
const tableDataSource = ref<any[]>([...props.dataSource]);
const tableColumns = computed(() => {
  return [...props.columns];
});

const tableHeadColumns = ref<any[]>([]);
const tableBodyColumns = ref<any[]>([]);

/**
 * 获取数组深度
 *
 * @param arr 数组
 */
const getLevel = (arr: any[]) => {
  let maxLevel = 0;
  (function callBack(arr, level) {
    ++level;
    maxLevel = Math.max(level, maxLevel);
    for (let i = 0; i < arr.length; i++) {
      let item = arr[i];
      if (item.children && item.children.length > 0) {
        callBack(item.children, level);
      } else {
        delete item.children;
      }
    }
  })(arr, 0);
  return maxLevel;
};

/**
 * 获取叶节点的数量
 *
 * @param json 当前节点
 */
function getLeafCountTree(json: any) {
  if (!json.children || json.children.length == 0) {
    json.colspan = 1;
    return 1;
  } else {
    var leafCount = 0;
    for (var i = 0; i < json.children.length; i++) {
      leafCount = leafCount + getLeafCountTree(json.children[i]);
    }
    json.colspan = leafCount;
    return leafCount;
  }
}

/**
 * 计算内容列
 *
 * @param columns 原始列
 */
const findFindNode = (columns: any[]) => {
  columns.forEach((column) => {
    if (column.children) {
      findFindNode(column.children);
    } else {
      tableBodyColumns.value.push(column);
    }
  });
};

findFindNode(tableColumns.value);

/**
 * 计算显示列
 *
 * @param columns 原始列
 */
const tableColumnKeys = ref<any[]>([]);

const findFindNodes = (columns: any[]) => {
  columns.forEach((column) => {
    if (column.children) {
      tableColumnKeys.value.push(column.key);
      findFindNodes(column.children);
    } else {
      if (!column.hide) {
        tableColumnKeys.value.push(column.key);
      }
    }
  });
};

findFindNodes(tableColumns.value);

/**
 * 计算数组差异
 *
 * @param arr1 数组
 * @param arr2 数组
 */
function diff(arr1: any[], arr2: any[]) {
  var newArr = [];
  arr1 = Array.from(new Set(arr1)); // 去重
  arr2 = Array.from(new Set(arr2)); // 去重
  newArr = arr1.concat(arr2);
  return newArr.filter((x) => !(arr1.includes(x) && arr2.includes(x)));
}

/**
 * 计算标题列
 *
 * @param level 层级, 用于决定会被 push 到的目标数组
 */
const findFinalNode = (level: number, columns: any[]) => {
  columns.forEach((column) => {
    if (column.children) {
      const colSpan = getLeafCountTree(column);
      column.colspan = colSpan;
      if (!tableHeadColumns.value[level]) {
        tableHeadColumns.value[level] = [];
      }
      tableHeadColumns.value[level].push(column);
      findFinalNode(level + 1, column.children);
    } else {
      const rowSpan = getLevel(columns);
      column.rowspan = rowSpan;
      if (!tableHeadColumns.value[level]) {
        tableHeadColumns.value[level] = [];
      }
      tableHeadColumns.value[level].push(column);
    }
  });
};

findFinalNode(0, tableColumns.value);

const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
const tableExpandKeys = ref<Recordable[]>([...props.expandKeys]);

watch(
  () => props.selectedKeys,
  () => {
    tableSelectedKeys.value = props.selectedKeys;
  },
  { deep: true }
);

watch(
  () => props.expandKeys,
  () => {
    tableExpandKeys.value = props.expandKeys;
  },
  { deep: true }
);

const tableSelectedKey: WritableComputedRef<string> = computed({
  get() {
    return props.selectedKey;
  },
  set(val) {
    emit("update:selectedKey", val);
  },
});

watch(
  () => props.dataSource,
  () => {
    tableDataSource.value = [...props.dataSource];
    nextTick(() => {
      getScrollWidth();
    });
  },
  { deep: true }
);

const changeAll = (isChecked: boolean) => {
  // Selected
  if (isChecked) {
    const datasources = props.dataSource.filter((item: any, index: number) => {
      return !props.getCheckboxProps(item, index).disabled;
    });
    const ids = datasources.map((item) => {
      return item[props.id];
    });
    tableSelectedKeys.value = [...ids];
  } else {
    // unSelected
    tableSelectedKeys.value = [];
  }
};

watch(
  tableSelectedKeys,
  () => {
    if (tableSelectedKeys.value.length === props.dataSource.length) {
      allChecked.value = true;
    } else {
      allChecked.value = false;
    }
    if (tableSelectedKeys.value.length > 0) {
      hasChecked.value = true;
    } else {
      hasChecked.value = false;
    }
    emit("update:selectedKeys", tableSelectedKeys.value);
  },
  { deep: true, immediate: true }
);

watch(
  tableExpandKeys,
  () => {
    emit("update:expandKeys", tableExpandKeys.value);
  },
  { deep: true, immediate: true }
);

const change = function (page: any) {
  emit("change", page);
};

const rowClick = function (data: any, evt: MouseEvent) {
  emit("row", data, evt);
};

const rowDoubleClick = function (data: any, evt: MouseEvent) {
  emit("row-double", data, evt);
};

const rowContextmenu = function (data: any, evt: MouseEvent) {
  emit("row-contextmenu", data, evt);
};

const print = function () {
  let subOutputRankPrint = document.getElementById(tableId) as HTMLElement;
  let newContent = subOutputRankPrint.innerHTML;
  let oldContent = document.body.innerHTML;
  document.body.innerHTML = newContent;
  window.print();
  window.location.reload();
  document.body.innerHTML = oldContent;
};

/**
 * excel 导出
 */
const exportData = () => {
  var tableStr = ``;
  for (let tableHeadColumn of tableHeadColumns.value) {
    tableStr += "<tr>";
    for (let column of tableHeadColumn) {
      tableStr += `<td colspan=${column.colspan} rowspan=${column.rowspan}>${column.title}</td>`;
    }
    tableStr += "</tr>";
  }
  tableDataSource.value.forEach((item, rowIndex) => {
    tableStr += "<tr>";
    tableBodyColumns.value.forEach((tableColumn, columnIndex) => {
      Object.keys(item).forEach((name) => {
        if (tableColumn.key === name) {
          const rowColSpan = props.spanMethod(
            item,
            tableColumn,
            rowIndex,
            columnIndex
          );
          const rowspan = rowColSpan ? rowColSpan[0] : 1;
          const colspan = rowColSpan ? rowColSpan[1] : 1;
          if (rowspan != 0 && colspan != 0) {
            tableStr += `<td colspan=${colspan} rowspan=${rowspan}>${item[name]}</td>`;
          }
        }
      });
    });
    tableStr += "</tr>";
  });
  var worksheet = "Sheet1";
  var uri = "data:application/vnd.ms-excel;base64,";
  var exportTemplate = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" 
        xmlns="http://www.w3.org/TR/REC-html40">
        <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
            <x:Name>${worksheet}</x:Name>
                <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
            </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head>
        <body>
            <table syle="table-layout: fixed;word-wrap: break-word; word-break: break-all;">${tableStr}</table>
        </body>
    </html>`;
  window.location.href = uri + base64(exportTemplate);
  return;
};

//输出base64编码
function base64(s: string) {
  return window.btoa(unescape(encodeURIComponent(s)));
}

const sortTable = (e: any, key: string, sort: string) => {
  let currentSort = e.target.parentNode.getAttribute("lay-sort");
  if (sort === "desc") {
    if (currentSort === sort) {
      e.target.parentNode.setAttribute("lay-sort", "");
      tableDataSource.value = [...props.dataSource];
    } else {
      e.target.parentNode.setAttribute("lay-sort", "desc");
      tableDataSource.value.sort((x, y) => {
        if (x[key] < y[key]) return 1;
        else if (x[key] > y[key]) return -1;
        else return 0;
      });
    }
  } else {
    if (currentSort === sort) {
      e.target.parentNode.setAttribute("lay-sort", "");
      tableDataSource.value = [...props.dataSource];
    } else {
      e.target.parentNode.setAttribute("lay-sort", "asc");
      tableDataSource.value.sort((x, y) => {
        if (x[key] < y[key]) return -1;
        else if (x[key] > y[key]) return 1;
        else return 0;
      });
    }
  }
};

let tableBody = ref<HTMLElement | null>(null);
let tableHeader = ref<HTMLElement | null>(null);
let scrollWidthCell = ref(0);

const getScrollWidth = () => {
  const clientWidth: number = tableBody.value?.clientWidth || 0;
  const offsetWidth: number = tableBody.value?.offsetWidth || 0;
  if (clientWidth < offsetWidth) {
    scrollWidthCell.value = offsetWidth - clientWidth;
  }
};

const hasl = ref(false);
const hasr = ref(false);

const classes = computed(() => {
  return [
    hasl.value ? "layui-table-has-fixed-left" : "",
    hasr.value ? "layui-table-has-fixed-right" : "",
  ];
});

watch(
  () => props.height,
  () => {
    nextTick(() => {
      getScrollWidth();
    });
  }
);

watch(
  () => props.maxHeight,
  () => {
    nextTick(() => {
      getScrollWidth();
    });
  }
);

onMounted(() => {
  getScrollWidth();
  getFixedColumn();
  tableBody.value?.addEventListener("scroll", () => {
    getFixedColumn();
  });
  window.onresize = () => {
    getFixedColumn();
  };
});

const getFixedColumn = () => {
  tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
  // @ts-ignore
  if (tableBody.value?.scrollWidth > tableBody.value?.clientWidth) {
    if (tableBody.value?.scrollLeft == 0) {
      hasl.value = false;
      hasr.value = true;
    } else {
      // @ts-ignore
      const t = tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2;
      const s = tableBody.value?.scrollWidth;
      // @ts-ignore
      if (t > s) {
        hasl.value = true;
        hasr.value = false;
      } else {
        hasl.value = true;
        hasr.value = true;
      }
    }
  } else {
    hasl.value = false;
    hasr.value = false;
  }
};

const slotsData = ref<string[]>([]);

props.columns.map((value: any) => {
  if (value.customSlot) {
    slotsData.value.push(value.customSlot);
  }
});

const currentIndentSize = ref(0);
const childrenExpandSpace = ref(false);

props.dataSource.map((value: any) => {
  if (value[props.childrenColumnName]) {
    childrenExpandSpace.value = true;
  }
});

/**
 * @remark 排除 hide 列
 */
const renderFixedStyle = (column: any, columnIndex: number) => {
  if (column.fixed) {
    if (column.fixed == "left") {
      var left = 0;
      for (var i = 0; i < columnIndex; i++) {
        if (
          props.columns[i].fixed &&
          props.columns[i].fixed == "left" &&
          tableColumnKeys.value.includes(props.columns[i].key)
        ) {
          left = left + props.columns[i]?.width.replace("px", "");
        }
      }
      return { left: `${left}px` } as StyleValue;
    } else {
      var right = 0;
      for (var i = columnIndex + 1; i < props.columns.length; i++) {
        if (
          props.columns[i].fixed &&
          props.columns[i].fixed == "right" &&
          tableColumnKeys.value.includes(props.columns[i].key)
        ) {
          right = right + props.columns[i]?.width.replace("px", "");
        }
      }
      return { right: `${right}px` } as StyleValue;
    }
  } else {
    var isLast = true;
    for (var i = columnIndex + 1; i < props.columns.length; i++) {
      if (
        props.columns[i].fixed == undefined &&
        tableColumnKeys.value.includes(props.columns[i].key)
      ) {
        isLast = false;
      }
    }
    return isLast ? ({ "border-right": "none" } as StyleValue) : {};
  }
  return {} as StyleValue;
};

/**
 * @remark 排除 hide 列
 */
const renderFixedClassName = (column: any, columnIndex: number) => {
  if (column.fixed) {
    if (column.fixed == "left") {
      var left = true;
      for (var i = columnIndex + 1; i < props.columns.length; i++) {
        if (
          props.columns[i].fixed &&
          props.columns[i].fixed == "left" &&
          tableColumnKeys.value.includes(props.columns[i].key)
        ) {
          left = false;
        }
      }
      return left ? `layui-table-fixed-left-last` : "";
    } else {
      var right = true;
      for (var i = 0; i < columnIndex; i++) {
        if (
          props.columns[i].fixed &&
          props.columns[i].fixed == "right" &&
          tableColumnKeys.value.includes(props.columns[i].key)
        ) {
          right = false;
        }
      }
      return right ? `layui-table-fixed-right-first` : "";
    }
  }
};

const hasTotalRow = computed(() => {
  let b = false;
  props.columns.forEach((item) => {
    if (item.totalRow) {
      b = true;
    }
  });
  return b;
});

const renderTotalRowCell = (column: any) => {
  if (column.totalRow) {
    if (column.totalRow != true) {
      return column.totalRow;
    } else {
      let total = 0;
      tableDataSource.value.forEach((item) => {
        total = total + Number(item[column.key]);
      });
      return total;
    }
  }
};

onBeforeUnmount(() => {
  window.onresize = null;
});
</script>

<template>
  <div :id="tableId">
    <table class="layui-hide" lay-filter="test"></table>
    <div class="layui-form layui-border-box layui-table-view" :class="classes">
      <!-- 工具栏 -->
      <div v-if="defaultToolbar || slot.toolbar" class="layui-table-tool">
        <div v-if="slot.toolbar" class="layui-table-tool-temp">
          <slot name="toolbar"></slot>
        </div>
        <div v-if="defaultToolbar" class="layui-table-tool-self">
          <lay-dropdown updateAtScroll>
            <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_PRINT">
              <i class="layui-icon layui-icon-cols"></i>
            </div>
            <template #content>
              <div class="layui-table-tool-checkbox">
                <lay-checkbox
                  v-for="column in tableHeadColumns[0]"
                  v-model="tableColumnKeys"
                  skin="primary"
                  :disabled="column.children"
                  :key="column.key"
                  :value="column.key"
                  >{{ column.title }}</lay-checkbox
                >
              </div>
            </template>
          </lay-dropdown>
          <div
            class="layui-inline"
            title="导出"
            lay-event="LAYTABLE_PRINT"
            @click="exportData()"
          >
            <i class="layui-icon layui-icon-export"></i>
          </div>
          <div
            class="layui-inline"
            title="打印"
            lay-event="LAYTABLE_PRINT"
            @click="print()"
          >
            <i class="layui-icon layui-icon-print"></i>
          </div>
        </div>
      </div>

      <div class="layui-table-box">
        <!-- 表头 -->
        <div
          class="layui-table-header"
          :style="[{ 'padding-right': `${scrollWidthCell}px` }]"
        >
          <div class="layui-table-header-wrapper" ref="tableHeader">
            <table class="layui-table" :lay-size="size" :lay-skin="skin">
              <colgroup>
                <template v-for="column in tableBodyColumns" :key="column">
                  <template v-if="tableColumnKeys.includes(column.key)">
                    <col
                      :width="column.width"
                      :style="{
                        minWidth: column.minWidth ? column.minWidth : '50px',
                      }"
                    />
                  </template>
                </template>
              </colgroup>
              <thead>
                <template
                  v-for="(
                    tableHeadColumn, tableHeadColumnIndex
                  ) in tableHeadColumns"
                  :key="tableHeadColumnIndex"
                >
                  <tr>
                    <template
                      v-for="(column, columnIndex) in tableHeadColumn"
                      :key="column"
                    >
                      <th
                        v-if="tableColumnKeys.includes(column.key)"
                        :colspan="column.colspan"
                        :rowspan="column.rowspan"
                        class="layui-table-cell"
                        :class="[
                          renderFixedClassName(column, columnIndex),
                          column.fixed
                            ? `layui-table-fixed-${column.fixed}`
                            : '',
                          column.type == 'checkbox'
                            ? 'layui-table-cell-checkbox'
                            : '',
                          column.type == 'radio'
                            ? 'layui-table-cell-radio'
                            : '',
                          column.type == 'number'
                            ? 'layui-table-cell-number'
                            : '',
                        ]"
                        :style="[
                          {
                            textAlign: column.align,
                          },
                          renderFixedStyle(column, columnIndex),
                        ]"
                      >
                        <template v-if="column.type == 'checkbox'">
                          <lay-checkbox
                            v-model="hasChecked"
                            :is-indeterminate="!allChecked"
                            skin="primary"
                            value="all"
                            @change="changeAll"
                          />
                        </template>
                        <template v-else>
                          <span>
                            <template v-if="column.titleSlot">
                              <slot :name="column.titleSlot"></slot>
                            </template>
                            <template v-else>
                              {{ column.title }}
                            </template>
                          </span>
                          <!-- 插槽 -->
                          <span
                            v-if="column.sort"
                            class="layui-table-sort layui-inline"
                            lay-sort
                          >
                            <i
                              @click.stop="sortTable($event, column.key, 'asc')"
                              class="layui-edge layui-table-sort-asc"
                              title="升序"
                            ></i>
                            <i
                              @click.stop="
                                sortTable($event, column.key, 'desc')
                              "
                              class="layui-edge layui-table-sort-desc"
                              title="降序"
                            ></i>
                          </span>
                        </template>
                      </th>
                    </template>
                  </tr>
                </template>
              </thead>
            </table>
          </div>
        </div>
        <!-- 表身 -->
        <div
          class="layui-table-body layui-table-main"
          :style="{ height: height, maxHeight: maxHeight }"
          ref="tableBody"
        >
          <table
            class="layui-table"
            v-if="tableDataSource.length > 0 && loading == false"
            :class="{ 'layui-table-even': props.even }"
            :lay-size="size"
            :lay-skin="skin"
          >
            <colgroup>
              <template
                v-for="(column, columnIndex) in tableBodyColumns"
                :key="columnIndex"
              >
                <template v-if="tableColumnKeys.includes(column.key)">
                  <col
                    :width="column.width"
                    :style="{
                      minWidth: column.minWidth ? column.minWidth : '50px',
                    }"
                  />
                </template>
              </template>
            </colgroup>
            <tbody>
              <!-- 渲染 -->
              <template v-for="(data, index) in tableDataSource" :key="index">
                <table-row
                  :id="id"
                  :index="index"
                  :data="data"
                  :columns="tableBodyColumns"
                  :indent-size="indentSize"
                  :currentIndentSize="currentIndentSize"
                  :tableColumnKeys="tableColumnKeys"
                  :expandSpace="childrenExpandSpace"
                  :expandIndex="expandIndex"
                  :cellStyle="cellStyle"
                  :cellClassName="cellClassName"
                  :rowStyle="rowStyle"
                  :rowClassName="rowClassName"
                  :spanMethod="spanMethod"
                  :defaultExpandAll="defaultExpandAll"
                  :getCheckboxProps="getCheckboxProps"
                  :getRadioProps="getRadioProps"
                  @row="rowClick"
                  @row-double="rowDoubleClick"
                  @row-contextmenu="rowContextmenu"
                  v-model:expandKeys="tableExpandKeys"
                  v-model:selectedKeys="tableSelectedKeys"
                  v-model:selectedKey="tableSelectedKey"
                >
                  <template v-for="name in slotsData" #[name]="{ data }">
                    <slot :name="name" :data="data"></slot>
                  </template>
                  <template v-if="slot.expand" #expand="{ data }">
                    <slot name="expand" :data="data"></slot>
                  </template>
                </table-row>
              </template>
              <tr v-if="hasTotalRow" class="layui-table-total">
                <template
                  v-for="(column, columnIndex) in columns"
                  :key="columnIndex"
                >
                  <template v-if="tableColumnKeys.includes(column.key)">
                    <td>{{ renderTotalRowCell(column) }}</td>
                  </template>
                </template>
              </tr>
            </tbody>
          </table>
          <lay-empty
            v-if="tableDataSource.length == 0 && loading == false"
          ></lay-empty>
          <template v-if="loading == true">
            <div class="layui-table-loading">
              <i
                class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"
              ></i>
            </div>
          </template>
        </div>
      </div>
      <div v-if="page" class="layui-table-page">
        <lay-page
          show-page
          show-skip
          show-limit
          :total="page.total"
          :limit="page.limit"
          v-model="page.current"
          @jump="change"
        >
          <template #prev>
            <lay-icon type="layui-icon-left" />
          </template>
          <template #next>
            <lay-icon type="layui-icon-right" />
          </template>
        </lay-page>
      </div>
    </div>
  </div>
</template>
