<template>
  <!-- <h1>组件说明</h1> -->
  <div class="main-content">
    <div class="content">
      <h1>小趣智慧清洁SaaS云平台</h1>
    </div>
    <div class="foot">
      <span> Copyright © 2022 QUQUTECH. All Rights Reserved</span>
    </div>
  </div>
  <el-tabs v-model="activeName" v-if="false">
    <el-tab-pane label="Table" name="table">
      <div id="table">
        <h1>基础表格</h1>
        <p>内置需求：</p>
        <p>1、highlight-current-row 点击某行会高亮显示</p>
        <p>2、stripe 斑马纹</p>
        <p>3、border 边框</p>
        <p>4、header-dragend 拖动表头改变列宽</p>
        <p>5、showSelect 是否显示选择框【默认不显示】【可配置】</p>
        <p>
          6、custom 是否显示自定义表格列按钮；
          可自定义表格列属性有：是否显示，列宽，排序（拖动）
        </p>
        <p>7、showActions 是否显示操作列表【默认显示】【可配置】</p>
        <p>8、showPage 是否显示分页【默认显示】【可配置】</p>
        <p>9、是否显示排序，与表头列属性 <code>isSelect</code>相关</p>
        <p>10、showIndex 是否显示数据索引【默认显示】【可配置】</p>
        <p>
          11、showOverflowTooltip
          是否显示表格超出宽度后鼠标经过显示【默认不显示】【可配置】
        </p>
        <p>数据转化需求：</p>
        <p>1、时间类型<code>date</code>,由时间戳转化成年-月-日 时:分:秒</p>
        <p>
          2、select类型，自动转化该列属性参数配置<code>param(0:女;1:男)</code>，变成{key:value}的json格式
        </p>
        <p>3、支持自定义列内容</p>
        <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" v-loading="loading"></qu-table>
        <h1>
          固定表头，须设置高度
          <code>height</code>，默认值为200
        </h1>
        <qu-table :tableData="tableData" :tableHeader="tableHeader" :height="300"></qu-table>
        <h1>设置不同状态</h1>
        <p>
          <code>tableRowClassName</code>,是一个回调函数，可接收一个对象，对象内，row和rowIndex等。
        </p>
        <qu-table :tableData="tableData" :tableHeader="tableHeader" :tableRowClassName="tableRowClassName"></qu-table>
        <h1>自定义表格属性.</h1>
        <p>
          自定义表格属性时，使用
          <code>custom</code>设置。使用
          <code>fetchTableAttr</code> 接收设置数据。
        </p>
        <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" custom @fetchTableAttr="fetchTableAttr">
        </qu-table>
        <h1>显示多选框</h1>
        <p>
          <code>showSelect</code> 控制显示或隐藏多选框。
          <!-- <code>fetchHandAllSelection</code>接收手动点击。 -->
          <code>selectionChange</code>接收选中项。 <b>全选</b>时的回调
        </p>
        <p>
          <el-button @click="clearSelection()">清空选择项</el-button>
          <el-button @click="toggleSelection([tableData[1]])">选中第二行</el-button>
        </p>
        <qu-table :tableData="tableData" :tableHeader="tableHeader" showSelect @selectionChange="selectionChange"
          ref="tableDemo"></qu-table>
        <h1>排序</h1>
        <p>
          <code>需要tableHeader的item配合，将item的isSelect==1;</code>
        </p>
        <p><code>sortChange</code>,会回调当前列的排序参数。</p>
        <qu-table :tableData="tableData" :tableHeader="tableHeader" ref="tableDemo" @sortChange="sortChange"></qu-table>
        <h1>显示/隐藏 分页</h1>
        <p>
          <code>showPage</code>,为true时，显示分页。为false时，隐藏分页。默认为true
        </p>
        <p>
          <code>pageChange</code>
          ,回调{page,size}
        </p>
        <qu-table :tableData="tableData" :tableHeader="tableHeader" ref="tableDemo" :pageProps="pageProps"
          @pageChange="pageChange"></qu-table>
        <h1>自定义列内容</h1>
        <p>这里使用了插槽</p>
        <p><code>tableHeader</code>中 <code>fieldType</code>需要设置为custom</p>
        <p>插槽名为tableHeader中的neName</p>
        <qu-table :tableData="tableData" :tableHeader="tableHeader" ref="tableDemo" :pageProps="pageProps"
          @pageChange="pageChange">
          <template v-for="(item, index) in tableHeader" :key="index" v-slot:[item.enName]="scope">
            <template v-if="item.enName == 'action'">
              <el-button type="primary">编辑</el-button>
            </template>
          </template>
        </qu-table>
        <h1>设置表格行按钮</h1>
        <qu-table :tableData="tableData" :tableHeader="tableHeader" ref="tableDemo" :pageProps="pageProps"
          :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" :tableButtons="tableButtons" @buttonClick="buttonClick"></qu-table>
      </div>
    </el-tab-pane>
    <el-tab-pane label="Tree" name="tree">
      <div id="tree">
        <h1>树结构</h1>
        <qu-tree :treeData="treeData" @nodeClick="nodeClick"></qu-tree>
        <p>内置需求：</p>
        <p>
          1、<code>defaultExpandedKeys</code> 默认展开项 数组 非必传
          默认展开key：0。
        </p>
        <p>
          2、<code>defaultProps</code>自定义节点标签，子节点属性等。默认值为
          <code>label：name，children：childNode</code>
        </p>
        <p>3、<code>nodeKey</code>自定义key属性，默认为id</p>
      </div>
    </el-tab-pane>
    <el-tab-pane label="buttonGroup" name="button-group">
      <h1>按钮组</h1>
      <p>为了方便调用，统一ui标准。抽离页面中表格头部按钮列表到按钮组组件。</p>
      <p>
        <code>buttonList</code>,为按钮列表数据。<code>buttonClick</code>为按钮点击事件回调函数。可接收参数按钮对象。
      </p>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import mockFields from "@/Components/public/quTable/mockButtonData.json";

let loading = ref(true);
const activeName = ref("table");
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    sexy: 1,
  },
  {
    date: "2016-05-02",
    name: "Lucy",
    address: "No. 189, Grove St, Los Angeles",
    sexy: 0,
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const tableHeader = ref([
  {
    enName: "date",
    cnName: "日期",
    width: 180,
    fieldType: "string",
    isTableShow: true,
    isSelect: 1,
  },
  {
    enName: "name",
    cnName: "姓名",
    width: 180,
    isTableShow: true,
    isSelect: true,
  },
  {
    enName: "sexy",
    cnName: "性别",
    fieldType: "select",
    param: "0:女;1:男",
    isTableShow: true,
    width: 180,
  },
  {
    enName: "address",
    cnName: "地址",
    isTableShow: true,
  },
  {
    enName: "action",
    cnName: "操作",
    isTableShow: true,
    fieldType: "custom",
  },
]);
const pageProps = reactive({
  rows: 10,
  page: 1,
  records: 100,
});
const treeData = [
  {
    id: 1,
    name: "Level one 1",
    childNode: [
      {
        id: 4,
        name: "Level two 1-1",
        childNode: [
          {
            id: 9,
            name: "Level three 1-1-1",
          },
          {
            id: 10,
            name: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Level one 2",
    childNode: [
      {
        id: 5,
        name: "Level two 2-1",
      },
      {
        id: 6,
        name: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    name: "Level one 3",
    childNode: [
      {
        id: 7,
        name: "Level two 3-1",
      },
      {
        id: 8,
        name: "Level two 3-2",
      },
    ],
  },
];
let tableButtons = ref([]),
  rowButtons = ref([]);
mockFields.map((item) => {
  if (item.type == 0) {
    rowButtons.value.push(item);
  } else if (item.type == 1) {
    tableButtons.value.push(item);
  }
});

let tableDemo = ref();

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 1500);
});

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex === 1) {
    return "warning-row";
  } else if (rowIndex === 3) {
    return "success-row";
  }
  return "";
};
const fetchTableAttr = (tableAttr) => {
  console.log("tableAttr", tableAttr);
  tableHeader.value = tableAttr;
};
// const fetchHandAllSelection = (selection) => {
//     console.log('selection', selection);
// }
const selectionChange = (selection) => {
  console.log("selection", selection);
};
const clearSelection = () => {
  tableDemo.value.clearSelection();
};
const toggleSelection = (rows) => {
  rows.forEach((row) => {
    tableDemo.value.toggleRowSelection(row);
  });
};
const sortChange = ({ sidx, sord }) => {
  console.log({ sidx, sord });
};
const pageChange = ({ page, rows }) => {
  console.log(page, rows);
};
const rowButtonClick = (obj) => {
  console.log(obj);
};
const buttonClick = (obj) => {
  console.log(obj);
};
const nodeClick = ({ dom, node, cb }) => {
  console.log({ dom, node, cb });
};
</script>
<style lang="scss" scoped>
h1 {
  font-size: 16px;
  font-weight: bold;
}

p {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 1px;
}

code {
  background: palevioletred;
  padding: 3px 5px;
  color: #fff;
  border-radius: 3px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.main-content {
  height: calc(100vh - 150px);
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;

  .foot {
    position: absolute;
    bottom: 0px;
  }
}
</style>
