# ListView 列表、虚拟列表

<template>
  <a-button @click="addItem(1,0)">前面新增1项</a-button>
  <a-button @click="addItem(8,0)">前面新增8项</a-button>
  <a-button @click="addItem()">后面新增1项</a-button>
  <a-button @click="addItem(8)">后面新增8项</a-button>
  <a-button @click="addItem(15)">15新增1项</a-button>
  <a-button @click="removeItem()">删除最后一项</a-button>
  <a-button @click="scrollTo(4500)">手动滚动到4500</a-button>
  <a-button @click="scrollTo(4500, true)">手动滚动到4500(带动画)</a-button>
  <a-button @click="scrollToTop()">手动滚动到顶部</a-button>
  <a-button @click="scrollToBottom()">手动滚动到底部</a-button>
  <a-button @click="scrollToTop(true)">手动滚动到顶部(带动画)</a-button>
  <a-button @click="scrollToBottom(true)">手动滚动到底部(带动画)</a-button>

  <h3-list-view ref="listView" :fixedSize="false" style="width:100%; height: 500px;" :list="list">
    <template #item="{item, index}">
    <div>
      <span>{{item.value}}</span> - <span @click="clickItem(index)">{{item.count}}</span>
      <a-button @click="removeItem(item, index)">移除</a-button>
    </div>
    </template>
  </h3-list-view>
</template>
<script>
export default {
  data() {
    const list = [];
    for (let i = 0; i < 1000; i++) {
      list.push({ value: i, count: 0 });
    }
    return {
      list,
    };
  },
  methods: {
    clickItem(index) {
      this.list[index].count++;
    },
    addItem (size = 1, index) {
      console.time('addItem');
      this.$refs.listView.addItem(new Array(size).fill(0).map((item,index) => ({
        value: `${Date.now()}-${index}`,
        count: 0
      }))], index);
      console.timeEnd('addItem');
    },
    removeItem(item, index) {
      const par = this.list[item.parent];
      console.time('removeItem');
      this.$refs.listView.removeItem(index);
      console.timeEnd('removeItem');
    },
    scrollTo(distance, animate) {
      this.$refs.listView.scrollTo(distance, animate);
    }
    scrollToTop(animate) {
      this.$refs.listView.scrollToTop(animate);
    }
    scrollToBottom(animate) {
      this.$refs.listView.scrollToBottom(animate);
    }
  }
};
</script>

<template>
  <div class="tree-demo">
    <h3-list-view ref="listView" :alias="alias" style="width:100%; height: 100%;" :list="list">
      <template #item="{item}">
        <div
          class="my-tree-item"
          :class="[`level-${item._LEVEL}`, {'has-child': item._HAS_CHILDREN, 'is-expand': item._EXPAND}]"
          :style="{paddingLeft: `${item._LEVEL * 20}px`}"
        >
          <i class="tree-icon" @click="toggleTreeNode(item)"></i>
          <span class="tree-label">{{ item.label }}</span>
        </div>
      </template>
    </h3-list-view>
  </div>
</template>

<script>
import { eachTree, toTreeArray } from 'xe-utils';
export default {
  name: 'SharedOrgPane',
  data () {
    return {
      loading: false,
      list: [],
      fullList: [],
      tree: [],
      mockList: [],
      alias: {
        visible: '_VISIBLE'
      }
    };
  },
  created () {
    this.loadTree(100);
  },
  methods: {
    loadTree (size) {
      // 模拟后台
      this.loading = true;
      setTimeout(() => {
        const treeData = getTree(size);
        // 将树结构拍平，构建列表树结构
        console.time('eachTree');
        eachTree(treeData, (item, index, items, paths, parent, nodes) => {
          // 层级
          item._LEVEL = nodes.length - 1;
          // 是否展开
          item._EXPAND = false;
          // 是否可视
          item._VISIBLE = !item._LEVEL;
          // 是否有子节点
          item._HAS_CHILDREN = item.children && item.children.length > 0;
          // 是否叶子节点
          item._IS_LEAF = !item._HAS_CHILDREN;
        });
        this.tree = treeData;
        console.timeEnd('eachTree');
        console.time('treeList');
        const treeList = toTreeArray(this.tree).map((item, index) => {
          item._ID_KEY = index;
          return item;
        });
        console.timeEnd('treeList');
        this.list = treeList;
        this.loading = false;
      }, 200);
    },
    toggleTreeNode (row) {
      if (row._HAS_CHILDREN) {
        row._EXPAND = !row._EXPAND;
        this.setTreeExpand(row, row._EXPAND);
      }
    },
    setTreeExpand (row, isExpand) {
      const toggleKeys = [];
      const children = row ? row.children || [] : this.tree;
      eachTree(children, (item, index, items, path, parent) => {
        item._VISIBLE = parent ? parent._EXPAND && parent._VISIBLE : isExpand;
        if (item._LEVEL !== 0 && ((isExpand && item._VISIBLE) || (!isExpand && !item._VISIBLE))) {
          toggleKeys.push(item._ID_KEY);
        }
      });
      console.time('isExpand');
      isExpand ? this.$refs.listView.showByKeys(toggleKeys) : this.$refs.listView.hideByKeys(toggleKeys);
      console.timeEnd('isExpand');
    },
    allTreeExpand (isExpand) {
      if (isExpand) {
        eachTree(this.tree, item => {
          item._EXPAND = item._HAS_CHILDREN;
          item._VISIBLE = true;
        });
      } else {
        eachTree(this.tree, item => {
          item._EXPAND = false;
          item._VISIBLE = !item._LEVEL;
        });
      }
    },
  },
};

</script>