<template>
  <div :class="_class">
    <div :class="_fixedClass" v-if="fixed">
      <div :class="_fixedHeaderClass" :style="{marginBottom: - scrollWidth +'px',marginRight: - scrollWidth +'px'}">
        <table :style="{width:width + 'px'}">
          <colgroup>
            <col
              v-for="(column, index) in columns"
              :key="index"
              :width="column.width"/>
          </colgroup>
          <thead :class="_headClass">
            <slot name="thead">
              <tr>
                <th
                  v-for="(column, index) in columns"
                  :key="index"
                  :class="column.sorter ?  _sortThClass : ''"
                  @click="sortColumn(column,index)">
                  <Checkbox v-if="selector && index===0"
                    v-model="allValue" @change="checkAll"
                    :indeterminate="indeterminate"
                  ></Checkbox>
                  <span :class="_titleClass">{{ column.title }}</span>
                  <span :class="[ _sortClass,item === index ? _sortChangeClass : '']" v-if="column.sorter">
                    <div :class="_sortInnerClass">
                      <i :class="_sortUpClass" />
                      <i :class="_sortDownClass" />
                    </div>
                  </span>
                </th>
              </tr>
            </slot>
          </thead>
        </table>
      </div>
      <div :class="_fixedBodyClass" @scroll="onScrollCol" @mousewheel="onScrollCol" :style="{height:height + 'px'}">
        <table :style="{width:width + 'px'}">
          <colgroup>
            <col
              v-for="(column, index) in columns"
              :key="index"
              :width="column.width"/>
          </colgroup>
          <tbody>
            <slot>
              <template v-if="data.length">
                <tr
                  v-for="(row, rowIndex) in dataNow"
                  :key="rowIndex"
                  @change="selectRow(rowIndex)">
                  <template v-if="row.id || row.rowKey">
                    <td
                      v-for="(column, index) in columns"
                      :style="column.style"
                      :key="index">
                      <Checkbox v-if="selector && index===0"
                        :value="selector[index]"
                        v-model="selectValueList[rowIndex]"
                        @click="changeSelect"
                      ></Checkbox>
                      <span v-if="column.expand" :class="_expandClass"
                        @click="expandType(columns,row,rowIndex)">
                        <Icon :icon="openExpand(rowIndex)"></Icon>
                      </span>
                      <RenderCell
                        v-if="column.render"
                        :render="column.render"
                        :index="rowIndex"
                        :row="row">
                      </RenderCell>
                      <template v-else>
                        {{ row[column.key] }}
                      </template>
                    </td>
                  </template>

                  <td v-if="!row.id && expandIndex.indexOf(rowIndex - 1) != -1"
                    :colspan="this.columns.length"
                    :class="_expandTdClass">
                    <ExpandCell
                      :expand="columns[0].expand"
                      :item="dataNow[rowIndex - 1]">
                    </ExpandCell>
                  </td>
                </tr>
              </template>
              <tr v-else>
                <td
                  :colspan="columns.length"
                  :class="_emptyTextClass">
                  {{ emptyText }}
                </td>
              </tr>
            </slot>
          </tbody>
        </table>
      </div>
      <div :class="[_fixedLeftClass,{ 'hive-table-fixed-left-shabow' : leftShabow }]"
        v-if="fixedLeftHead.length">
        <div :class="_fixedHeaderClass" :style="{marginBottom: - scrollWidth +'px',marginBottom: - scrollWidth +'px',marginRight: - scrollWidth +'px'}">
          <table>
            <colgroup>
              <col
                v-for="(column, index) in fixedLeftHead"
                :key="index"
                :width="column.width"/>
            </colgroup>
            <thead :class="_headClass">
              <slot name="thead">
                <tr>
                  <th
                    v-for="(column, index) in fixedLeftHead"
                    :key="index"
                    :class="column.sorter ?  _sortThClass : ''"
                    @click="sortColumn(column,index)">
                    <Checkbox v-if="selector && index===0"
                      v-model="allValue" @change="checkAll"
                      :indeterminate="indeterminate"
                    ></Checkbox>
                    <span :class="_titleClass">{{ column.title }}</span>
                    <span :class="[ _sortClass,item === index ? _sortChangeClass : '']" v-if="column.sorter">
                      <div :class="_sortInnerClass">
                        <i :class="_sortUpClass" />
                        <i :class="_sortDownClass" />
                      </div>
                    </span>
                  </th>
                </tr>
              </slot>
            </thead>
          </table>
        </div>
        <div :class="_fixedBodyClass" @scroll="onScrollCol" @mousewheel="onScrollCol" :style="{paddingBottom: scrollWidth +'px',marginBottom: - scrollWidth +'px',marginRight: - scrollWidth +'px',height:height + 'px'}">
          <table>
            <colgroup>
              <col
                v-for="(column, index) in fixedLeftHead"
                :key="index"
                :width="column.width"/>
            </colgroup>
            <tbody>
              <slot>
                <template v-if="data.length">
                  <tr
                    v-for="(row, rowIndex) in dataNow"
                    :key="rowIndex"
                    @change="selectRow(rowIndex)">
                    <template v-if="row.id || row.rowKey">
                      <td
                        v-for="(column, index) in fixedLeftHead"
                        :style="column.style"
                        :key="index">
                        <Checkbox v-if="selector && index===0"
                          :value="selector[index]"
                          v-model="selectValueList[rowIndex]"
                          @click="changeSelect"
                        ></Checkbox>
                        <span v-if="column.expand" :class="_expandClass"
                          @click="expandType(fixedLeftHead,row,rowIndex)">
                          <Icon :icon="openExpand(rowIndex)"></Icon>
                        </span>
                        <RenderCell
                          v-if="column.render"
                          :render="column.render"
                          :index="rowIndex"
                          :row="row">
                        </RenderCell>
                        <template v-else>
                          {{ row[column.key] }}
                        </template>
                      </td>
                    </template>

                    <td v-if="!row.id && expandIndex.indexOf(rowIndex - 1) != -1"
                      :colspan="this.fixedLeftHead.length"
                      :class="_expandTdClass">
                      <ExpandCell
                        :expand="fixedLeftHead[0].expand"
                        :item="dataNow[rowIndex - 1]">
                      </ExpandCell>
                    </td>
                  </tr>
                </template>
                <tr v-else>
                  <td
                    :colspan="fixedLeftHead.length"
                    :class="_emptyTextClass">
                    {{ emptyText }}
                  </td>
                </tr>
              </slot>
            </tbody>
          </table>
        </div>
      </div>
      <div :class="[_fixedRightClass,{ 'hive-table-fixed-right-shabow' : rightShabow }]"
        v-if="fixedRightHead.length">
        <div :class="_fixedHeaderClass" :style="{marginBottom: - scrollWidth +'px',marginRight: - scrollWidth +'px'}">
          <table>
            <colgroup>
              <col
                v-for="(column, index) in fixedRightHead"
                :key="index"
                :width="column.width"/>
            </colgroup>
            <thead :class="_headClass">
              <slot name="thead">
                <tr>
                  <th
                    v-for="(column, index) in fixedRightHead"
                    :key="index"
                    :class="column.sorter ?  _sortThClass : ''"
                    @click="sortColumn(column,index)">
                    <Checkbox v-if="selector && index===0"
                      v-model="allValue" @change="checkAll"
                      :indeterminate="indeterminate"
                    ></Checkbox>
                    <span :class="_titleClass">{{ column.title }}</span>
                    <span :class="[ _sortClass,item === index ? _sortChangeClass : '']" v-if="column.sorter">
                      <div :class="_sortInnerClass">
                        <i :class="_sortUpClass" />
                        <i :class="_sortDownClass" />
                      </div>
                    </span>
                  </th>
                </tr>
              </slot>
            </thead>
          </table>
        </div>
        <div :class="_fixedBodyClass" @scroll="onScrollCol" @mousewheel="onScrollCol" :style="{marginBottom: - scrollWidth +'px',paddingBottom: scrollWidth +'px',height:height + 'px'}">
          <table>
            <colgroup>
              <col
                v-for="(column, index) in fixedRightHead"
                :key="index"
                :width="column.width"/>
            </colgroup>
            <tbody>
              <slot>
                <template v-if="data.length">
                  <tr
                    v-for="(row, rowIndex) in dataNow"
                    :key="rowIndex"
                    @change="selectRow(rowIndex)">
                    <template v-if="row.id || row.rowKey">
                      <td
                        v-for="(column, index) in fixedRightHead"
                        :style="column.style"
                        :key="index">
                        <Checkbox v-if="selector && index===0"
                          :value="selector[index]"
                          v-model="selectValueList[rowIndex]"
                          @click="changeSelect"
                        ></Checkbox>
                        <span v-if="column.expand" :class="_expandClass"
                          @click="expandType(fixedRightHead,row,rowIndex)">
                          <Icon :icon="openExpand(rowIndex)"></Icon>
                        </span>
                        <RenderCell
                          v-if="column.render"
                          :render="column.render"
                          :index="rowIndex"
                          :row="row">
                        </RenderCell>
                        <template v-else>
                          {{ row[column.key] }}
                        </template>
                      </td>
                    </template>

                    <td v-if="!row.id && expandIndex.indexOf(rowIndex - 1) != -1"
                      :colspan="this.fixedRightHead.length"
                      :class="_expandTdClass">
                      <ExpandCell
                        :expand="fixedRightHead[0].expand"
                        :item="dataNow[rowIndex - 1]">
                      </ExpandCell>
                    </td>
                  </tr>
                </template>
                <tr v-else>
                  <td
                    :colspan="fixedRightHead.length"
                    :class="_emptyTextClass">
                    {{ emptyText }}
                  </td>
                </tr>
              </slot>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <table v-else>
      <colgroup>
        <col
          v-for="(column, index) in columns"
          :key="index"
          :width="column.width"/>
      </colgroup>
      <thead :class="_headClass">
        <slot name="thead">
          <tr>
            <th
              v-for="(column, index) in columns"
              :key="index"
              :class="column.sorter ?  _sortThClass : ''"
              @click="sortColumn(column,index)">
              <Checkbox v-if="selector && index===0"
                v-model="allValue" @change="checkAll"
                :indeterminate="indeterminate"
              ></Checkbox>
              <span :class="_titleClass">{{ column.title }}</span>
              <span :class="[ _sortClass,item === index ? _sortChangeClass : '']" v-if="column.sorter">
                <div :class="_sortInnerClass">
                  <i :class="_sortUpClass" />
                  <i :class="_sortDownClass" />
                </div>
              </span>
            </th>
          </tr>
        </slot>
      </thead>

      <tbody>
        <slot>
          <template v-if="data.length">
            <tr
              v-for="(row, rowIndex) in dataNow"
              :key="rowIndex"
              @change="selectRow(rowIndex)">
              <template v-if="row.id || row.rowKey">
                <td
                  v-for="(column, index) in columns"
                  :style="column.style"
                  :key="index">
                  <Checkbox v-if="selector && index===0"
                    :value="selector[index]"
                    v-model="selectValueList[rowIndex]"
                    @click="changeSelect"
                  ></Checkbox>
                  <span v-if="column.expand" :class="_expandClass"
                    @click="expandType(columns,row,rowIndex)">
                    <Icon :icon="openExpand(rowIndex)"></Icon>
                  </span>
                  <RenderCell
                    v-if="column.render"
                    :render="column.render"
                    :index="rowIndex"
                    :row="row">
                  </RenderCell>
                  <template v-else>
                    {{ row[column.key] }}
                  </template>
                </td>
              </template>

              <td v-if="!row.id && expandIndex.indexOf(rowIndex - 1) != -1"
                :colspan="columns.length"
                :class=" _expandTdClass">
                <ExpandCell
                  :expand="columns[0].expand"
                  :item="dataNow[rowIndex - 1]">
                </ExpandCell>
              </td>
            </tr>
          </template>
          <tr v-else>
            <td
              :colspan="columns.length"
              :class="_emptyTextClass">
              {{ emptyText }}
            </td>
          </tr>
        </slot>
      </tbody>
    </table>
    <div :class="_pageClass" v-if="pagination">
      <Pagination
        :total="data.length"
        @change="changePage"
        @pageSizeChange="changePageSize"
        show-jumper
        :page-size-option="[10,20,30]">
      </Pagination>
    </div>
  </div>
</template>

<script>
  import RenderCell from '../render-cell';
  import ExpandCell from './expand-cell';
  import Pagination from '../pagination';
  import Icon from '../icon';
  import Checkbox from '../checkbox';

  const name = 'hive-table';

  export default {
    name,
    components: {
      RenderCell,
      ExpandCell,
      Pagination,
      Icon,
      Checkbox,
    },
    props: {
      columns: {
        type: Array,
        default() {
          return [];
        },
      },
      data: {
        type: Array,
        default() {
          return [];
        },
      },
      // 带边框
      border: Boolean,
      emptyText: {
        type: String,
        default: '暂无数据',
      },
      /**
       * 可选择
       *
       */
      selector: Array,
      /**
       * 是否分页
       */
      pagination: {
        type: Boolean,
        default: true,
      },
      fixed: Boolean,
      /**
       * 表格的行 key 参数名
       */
      rowKey: {
        type: String,
        default: 'id',
      },
      /**
       * 表格宽度
       */
      width: Number,
      /**
       * 表格高度
       */
      height: Number,
    },
    data() {
      return {
        dataNow: [],
        pageSize: this.pagination ? 10 : this.data.length,
        pageNow: 1,
        toSorter: '',
        // 当前排序操作的列
        item: -1,
        dataValue: this.data,
        sortType: [],
        // 折叠展开的行
        expandIndex: [],
        // 当前折叠状态，true：折叠
        expandTypeValue: true,
        indeterminate: false,
        // 可选择时是否全选
        allValue: false,
        selectValue: false,
        // 可选择时当前页状态
        selectValueList: [],
        // 可选择时所有数据状态
        selectValueAll: [],
        // 可选择时选中项
        selectList: this.selector ? this.selector : '',
        onChangeSelect: this.selector ? this.selector.onChange : '',
        // 左浮动列
        fixedLeftHead: this.columns.filter(item => item.fixed === 'left'),
        // 右浮动列
        fixedRightHead: this.columns.filter(item => item.fixed === 'right'),
        // 横向滚动条
        scrollLeftCol: 0,
        // 纵向滚动条
        scrollTopRow: 0,
        // 滚动条宽度
        scrollWidth: 0,
        // 右边阴影
        rightShabow: true,
        // 左边阴影
        leftShabow: false,
      };
    },
    computed: {
      _class() {
        return [
          name,
          {
            [`${name}-border`]: this.border,
          },
        ];
      },
      _pageClass() {
        return `${name}_page`;
      },
      _headClass() {
        return `${name}-thead`;
      },
      _titleClass() {
        return `${name}-thead-title`;
      },
      _emptyTextClass() {
        return [
          `${name}-empty-text`,
        ];
      },
      _sortThClass() {
        return `${name}-thead-th-sorter`;
      },
      _sortClass() {
        return [
          `${name}-thead-sorter`,
        ];
      },
      _sortChangeClass() {
        return {
          [`${name}-thead-sorter--asc`]: this.toSorter === 'asc',
          [`${name}-thead-sorter--desc`]: this.toSorter === 'desc',
        };
      },
      _sortInnerClass() {
        return `${name}-thead-sorter-inner`;
      },
      _sortUpClass() {
        return `${name}-thead-sorter-up`;
      },
      _sortDownClass() {
        return `${name}-thead-sorter-down`;
      },
      _expandClass() {
        return {
          [`${name}-expand`]: this.columns[0].expand,
        };
      },
      _expandTdClass() {
        return `${name}-td-expand`;
      },
      _noExpandTdClass() {
        return `${name}-td-expand-no`;
      },
      _fixedClass() {
        return `${name}-fixed`;
      },
      _fixedHeaderClass() {
        return `${name}-fixed-head`;
      },
      _fixedBodyClass() {
        return `${name}-fixed-body`;
      },
      _fixedLeftClass() {
        return `${name}-fixed-left`;
      },
      _fixedLeftWidth() {
        let sum = 0;
        for (let i of this.fixedLeftHead) {
          sum = sum + i.width;
        }
        return sum;
      },
      _fixedRightClass() {
        return `${name}-fixed-right`;
      },
      _fixedRightWidth() {
        return `${name}-fixed-right`;
      },
      _fixedWidth() {
        let dom = document.querySelectorAll('.hive-table-fixed > .hive-table-fixed-body');
        // let domTd =
        console.log(this.$refs);
        this.columns.forEach(element => {

        });
      },
    },
    watch: {
      pageSize(value) {
        this.changePage(this.pageNow);
      },
      dataValue() {
        this.changePage(this.pageNow);
      },
      selector(value) {
        this.selectValueAll = [];
        for (let i = 0; i < this.data.length; i++) {
          this.selectValueAll.push(false);
        }
        this.selectList = value;
        for (let i = 0; i < value.length; i++) {
          this.selectValueAll[value[i]] = true;
        }

        for (let i = (this.pageNow - 1) * this.pageSize; i < this.pageSize * this.pageNow; i++) {
          if (this.selectValueAll[i] === true) {
            this.selectValueList.splice(i % this.pageSize, 1, true);
          } else {
            this.selectValueList.splice(i % this.pageSize, 1, false);
          }
        }
        let select = new Set(this.selectValueList);
        if (select.size === 1 && select.has(true)) {
          this.allValue = true;
        } else {
          this.allValue = false;
        }
        if (select.size > 1) {
          this.indeterminate = true;
        } else {
          this.indeterminate = false;
        }
      },
    },
    mounted() {
      const dataValue = this.data.concat();
      if (this.columns[0].expand) {
        this.pageSize = this.pageSize * 2;
        let newData = [];
        for (let i = 0; i < this.dataValue.length; i++) {
          newData.push(this.dataValue[i]);
          newData.push('');
        }
        this.dataValue = newData.concat();
      }
      this.dataNow = dataValue.splice(this.pageSize * 0, this.pageSize * 1).concat();
      this.sortType = this.data.concat();
      if (this.selector) {
        this.columns.unshift(0);
        for (let i = 0; i < this.data.length; i++) {
          this.selectValueAll.push(false);
        }
        for (let i = 0; i < this.pageSize; i++) {
          this.selectValueList.push(false);
        }
      }

      // 滚动条高度
      let width = this.getScrollWidth();

      this.$nextTick(() => {
        let dom = document.querySelectorAll('.hive-table-fixed > .hive-table-fixed-body');
        let domFixed = {};
        let domRight = {};
        let domLeft = {};
        for (let i = 0; i < dom.length; i++) {
          let head = dom[i].previousElementSibling;
          let headTd = head.querySelectorAll('th');
          let domTd = dom[i].querySelector('tr').querySelectorAll('td');
          let domTr = dom[i].querySelectorAll('tr');

          if (dom[i].nextElementSibling != null) {
            domFixed = dom[i].nextElementSibling;
            if (domFixed.nextElementSibling) {
              domRight = domFixed.nextElementSibling.querySelectorAll('.hive-table-fixed-body tr');
            }
            if (domFixed.className.indexOf('hive-table-fixed-right') !== -1) {
              domRight = domFixed.querySelectorAll('.hive-table-fixed-body tr');
            }
            for (let k = 0; k < domRight.length; k++) {
              domRight[k].style.height = domTr[k].offsetHeight + 'px';
            }
            if (domFixed.className.indexOf('hive-table-fixed-left') !== -1) {
              domLeft = domFixed.querySelectorAll('.hive-table-fixed-body tr');
            }
            for (let k = 0; k < domLeft.length; k++) {
              domLeft[k].style.height = domTr[k].offsetHeight + 'px';
            }
          }
          for (let j = 0; j < domTd.length; j++) {
            headTd[j].style.width = domTd[j].offsetWidth + 'px';
          }
        }
      });
    },
    methods: {
      changePage(value) {
        const dataValue = this.dataValue.concat();
        this.dataNow = [];
        this.pageNow = value;
        this.dataNow = dataValue.splice(this.pageSize * (value - 1), this.pageSize).concat();
        if (this.selector) {
          this.allValue = false;
          this.selectValueList = [];
          let nowPageList = this.selectValueAll.slice((this.pageNow - 1) * this.pageSize, this.pageNow * this.pageSize);
          this.selectValueList = nowPageList.concat();
          let select = new Set(this.selectValueList);
          if (select.size === 1 && select.has(true)) {
            this.allValue = true;
          } else {
            this.allValue = false;
          }
          if (select.size > 1) {
            this.indeterminate = true;
          } else {
            this.indeterminate = false;
          }
        }
      },
      changePageSize(value) {
        this.pageSize = value;
      },
      sortColumn(column, num) {
        if (!column.sorter) {
          return '';
        }
        if (this.item != num) {
          this.item = num;
          this.toSorter = '';
        }
        if (this.toSorter === '') {
          if (column.order === 'desc') {
            this.dataValue.sort(column.sorter);
            this.toSorter = 'desc';
          } else {
            this.dataValue.sort(column.sorter);
            this.toSorter = 'asc';
          }
        } else if (column.order === 'desc') {
          if (this.toSorter === 'desc') {
            this.dataValue.sort(column.sorter).reverse();
            this.toSorter = 'asc';
          } else {
            this.dataValue = this.sortType.concat();
            this.toSorter = '';
          }
        } else {
          if (this.toSorter === 'desc') {
            this.dataValue = this.sortType.concat();
            this.toSorter = '';
          } else {
            this.dataValue.sort(column.sorter).reverse();
            this.toSorter = 'desc';
          }
        }
      },
      expandType(columns, row, rowIndex) {
        let index = this.expandIndex.indexOf(rowIndex);
        if (index === -1) {
          this.expandIndex.push(rowIndex);
        } else {
          this.expandIndex.splice(index, 1);
        }
        if (this.expandTypeValue === true) {
          this.expandTypeValue = false;
        } else {
          this.expandTypeValue = true;
        }
      },
      openExpand(index) {
        if (this.expandIndex.indexOf(index) != -1) {
          return 'remove';
        } else {
          return 'add';
        }
      },
      checkAll(value) {
        let selectNum = new Set(this.selectList);
        this.allValue = !!value;
        this.selectValueList = [];
        this.indeterminate = false;
        if (this.allValue) {
          for (let i = 0; i < this.dataNow.length; i++) {
            this.selectValueList.push(true);
            selectNum.add((this.pageNow - 1) * this.pageSize + i);
            this.selectValueAll.splice((this.pageNow - 1) * this.pageSize + i, 1, true);
          }
        } else {
          for (let i = 0; i < this.dataNow.length; i++) {
            this.selectValueList.push(false);
            selectNum.delete((this.pageNow - 1) * this.pageSize + i);
            this.selectValueAll.splice((this.pageNow - 1) * this.pageSize + i, 1, false);
          }
        }
        this.selectList = [...selectNum].sort(function(a, b) { return a - b; });
        this.$emit('onChange', this.selectList);
      },
      changeSelect(event) {
        this.selectValue = event.target.checked;
      },
      selectRow(index) {
        for (let i = (this.pageNow - 1) * this.pageSize; i < this.pageNow * this.pageSize; i++) {
          if (this.selectValueAll[i] === true) {
            this.selectValueList[i % this.pageSize] = true;
          } else {
            this.selectValueList[i % this.pageSize] = false;
          }
        }

        let selectNum = new Set(this.selectList);
        if (this.selectValue) {
          this.selectValueList[index] = true;
          this.selectList.push((this.pageNow - 1) * this.pageSize + index);
          this.selectValueAll.splice((this.pageNow - 1) * this.pageSize + index, 1, true);
          this.$emit('onChange', this.selectList.sort(function(a, b) { return a - b; }));
        } else {
          this.selectValueList[index] = false;
          selectNum.delete((this.pageNow - 1) * this.pageSize + index);
          this.selectValueAll.splice((this.pageNow - 1) * this.pageSize + index, 1, false);
          this.selectList = [...selectNum].sort(function(a, b) { return a - b; });
          this.$emit('onChange', this.selectList);
        }
        let select = new Set(this.selectValueList);
        if (select.size > 1) {
          this.indeterminate = true;
          this.allValue = false;
        } else {
          this.indeterminate = false;
          if (select.has(true)) {
            this.allValue = true;
          }
        }
      },
      onScroll(e) {
        this.scrollLeftCol = e.target.scrollLeft;
        let scrollHeightCol = e.target.scrollWidth - e.target.offsetWidth;
        let head = e.currentTarget.previousElementSibling || e.currentTarget.previousElementSibling;
        head.scrollLeft = this.scrollLeftCol;

        if (e.target.scrollLeft > 0 && e.target.scrollLeft < scrollHeightCol) {
          this.leftShabow = true;
          this.rightShabow = true;
        } else if (e.target.scrollLeft === 0) {
          this.leftShabow = false;
        } else {
          this.rightShabow = false;
        }
      },

      onScrollCol(e) {
        this.onScroll(e);
        let scroll = e.target;
        let dom = e.target.parentElement;
        let domList = dom.parentElement.querySelectorAll('.hive-table-fixed-body');
        if (domList.length === 0) {
          domList = dom.closest('.hive-table-fixed').querySelectorAll('.hive-table-fixed-body');
          scroll = e.target.closest('.hive-table-fixed-body');
        }
        console.log(e.target.closest('.hive-table-fixed-body').scrollTop);
        for (let i = 0; i < domList.length; i++) {
          domList[i].scrollTop = scroll.scrollTop;
        }
      },

      // 获取滚动条大小
      getScrollWidth() {
        const oDiv = document.createElement('DIV');
        oDiv.style.cssText = 'position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;';
        const noScroll = document.body.appendChild(oDiv).clientWidth;
        oDiv.style.overflowY = 'scroll';
        const scroll = oDiv.clientWidth;
        document.body.removeChild(oDiv);
        this.scrollWidth = noScroll - scroll;
        return this.scrollWidth;
      },

    },
  };
</script>
