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

<script setup lang="ts">
import * as XLSX from "xlsx";
import { ref, watch, useSlots, withDefaults, onMounted } from "vue";
import { v4 as uuidv4 } from "../../utils/guidUtil";
import { Recordable } from "../../types";
import LayCheckbox from "../checkbox";
import LayDropdown from "../dropdown";
import LayPage from "../page";
import LayIcon from "../icon";
import "./index.less";

const tableId = uuidv4();

export interface LayTableProps {
  id?: string;
  skin?: string;
  size?: string;
  page?: Recordable;
  checkbox?: boolean;
  columns: Recordable[];
  dataSource: Recordable[];
  defaultToolbar?: boolean;
  selectedKeys?: Recordable[];
}

const props = withDefaults(defineProps<LayTableProps>(), {
  id: "id",
  size: "md",
  dataSource: () => [],
  selectedKeys: () => [],
});

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

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

const allChecked = ref(false);
const tableDataSource = ref([...props.dataSource]);
const tableSelectedKeys = ref([...props.selectedKeys]);
const tableColumns = ref([...props.columns]);
const tableColumnKeys = ref(
  props.columns.map((item: any) => {
    return item.key;
  })
);

watch(
  () => props.dataSource,
  () => {
    tableDataSource.value = [...props.dataSource];
  }
);

const changeAll = function (checked: any) {
  const ids = props.dataSource.map((item: any) => {
    return item[props.id];
  });
  tableSelectedKeys.value.splice(0, ids.length);
  if (checked) {
    ids.forEach((id) => {
      tableSelectedKeys.value.push(id);
    });
  }
  emit("update:selectedKeys", tableSelectedKeys.value);
};

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

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

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

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

// 打印 table 数据
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;
};

// 导出 table 数据
const exportData = () => {
  const wb = XLSX.utils.book_new();
  let arr: any[] = [];
  props.dataSource.forEach((item) => {
    let obj = {};
    tableColumns.value.forEach((tableColumn) => {
      // @ts-ignore
      Object.keys(item).forEach((name) => {
        if (tableColumn.key === name) {
          // @ts-ignore
          obj[tableColumn.title] = item[name];
        }
      });
    });
    arr.push(obj);
  });
  const ws = XLSX.utils.json_to_sheet(arr);
  XLSX.utils.book_append_sheet(wb, ws, "sheet");
  XLSX.writeFile(wb, "export.xls", {
    bookType: "xls",
  });
  return;
};

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 {
      // 进行 desc 排序
      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 {
      // 进行 asc 排序
      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 tableHeader = ref<HTMLElement | null>(null);
let tableBody = ref<HTMLElement | null>(null);

// 拖动监听
onMounted(() => {
  tableBody.value?.addEventListener("scroll", () => {
    tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
  });
});
</script>

<template>
  <div :id="tableId">
    <table class="layui-hide" lay-filter="test"></table>
    <div class="layui-form layui-border-box layui-table-view">
      <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">
          <LayDropdown>
            <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_PRINT">
              <i class="layui-icon layui-icon-cols"></i>
            </div>
            <template #content>
              <div style="padding: 10px">
                <LayCheckbox
                  v-for="column in columns"
                  :key="column"
                  v-model="tableColumnKeys"
                  skin="primary"
                  :label="column.key"
                  >{{ column.title }}</LayCheckbox
                >
              </div>
            </template>
          </LayDropdown>
          <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">
        <!-- table header -->
        <div class="layui-table-header" ref="tableHeader">
          <table class="layui-table" :lay-size="size">
            <thead>
              <tr>
                <th v-if="checkbox" class="layui-table-col-special">
                  <div class="layui-table-cell laytable-cell-checkbox">
                    <LayCheckbox
                      v-model="allChecked"
                      skin="primary"
                      label="all"
                      @change="changeAll"
                    />
                  </div>
                </th>
                <template v-for="column in columns" :key="column">
                  <th v-if="tableColumnKeys.includes(column.key)">
                    <!-- TODO Table header slot  -->
                    <div
                      class="layui-table-cell"
                      :style="{ width: column.width }"
                    >
                      <span>{{ column.title }}</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>
                    </div>
                  </th>
                </template>
              </tr>
            </thead>
          </table>
        </div>
        <!-- table body -->
        <div class="layui-table-body layui-table-main" ref="tableBody">
          <table class="layui-table" :lay-size="size">
            <tbody>
              <template v-for="data in tableDataSource" :key="data">
                <tr
                  @click.stop="rowClick(data)"
                  @dblclick.stop="rowDoubleClick(data)"
                >
                  <!-- 复选框 -->
                  <td v-if="checkbox" class="layui-table-col-special">
                    <div class="layui-table-cell laytable-cell-checkbox">
                      <LayCheckbox
                        v-model="tableSelectedKeys"
                        skin="primary"
                        :label="data[id]"
                      />
                    </div>
                  </td>

                  <!-- 数据列 -->
                  <template v-for="column in columns" :key="column">
                    <template v-if="tableColumnKeys.includes(column.key)">
                      <!-- 插 槽 Column -->
                      <template v-if="column.customSlot">
                        <td class="layui-table-cell">
                          <div :style="{ width: column.width }">
                            <slot :name="column.customSlot" :data="data"></slot>
                          </div>
                        </td>
                      </template>
                      <!-- 匹 配 Column -->
                      <template
                        v-else
                        v-for="(value, key) in data"
                        :key="value"
                      >
                        <td v-if="column.key == key" class="layui-table-cell">
                          <div :style="{ width: column.width }">
                            <span> {{ value }} </span>
                          </div>
                        </td>
                      </template>
                    </template>
                  </template>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
      <div v-if="page" class="layui-table-page">
        <LayPage
          :total="page.total"
          :limit="page.limit"
          v-model="page.current"
          show-page
          show-limit
          show-skip
          @jump="change"
        >
          <template #prev><LayIcon type="layui-icon-left" /></template>
          <template #next><LayIcon type="layui-icon-right" /></template>
        </LayPage>
      </div>
    </div>
  </div>
</template>
