<template>
  <a-card title="树形结构图片翻页查看" style="min-width: 800px;overflow-x:auto ">
    <a-row>
      <!-- 左侧文件树 -->
      <a-col :span="5">
        <a-tree
          showLine
          :treeData="treeData"
          :expandedKeys="[expandedKeys[0]]"
          :selectedKeys="selectedKeys"
          :style="{'height':'500px','border-right':'2px solid #c1c1c1','overflow-y':'auto'}"
          @expand="onExpand"
          @select="this.onSelect"
        >
        </a-tree>
      </a-col>

      <!--右侧缩略图-->
      <a-col :span="19">
        <a-row style="margin-top: 10px">
          <a-col :span="24" style="padding-left: 2%;margin-bottom: 10px">
            <a-button @click="prev" type="primary">
              <a-icon type="left"/>
              上一页
            </a-button>
            <a-button @click="next" type="primary" style="margin-left: 8px">下一页
              <a-icon type="right"/>
            </a-button>
            <span style="margin-left: 15%;font-weight: bolder">{{ navName }}</span>
          </a-col>
          <a-col :span="24" style="padding-left: 2%;">
            <img :src="imgUrl" preview>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'ImgTurnPage',
  components: {
    draggable
  },
  data() {
    return {
      description: '图片翻页',
      //数据集
      treeData: [{
        title: '第一页',
        key: '0-0',
        children: [{
          title: '1页',
          key: '0-0-0',
          imgUrl: 'https://static.jeecg.com/upload/test/1_1588149743473.jpg'
        }, {
          title: '2页',
          key: '0-0-1',
          imgUrl: 'https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'
        }]
      }, {
        title: '第二页',
        key: '0-1',
        children: [{
          title: '1页',
          key: '0-1-0',
          imgUrl: 'https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg'
        }, {
          title: '2页',
          key: '0-1-1',
          imgUrl: 'https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg'
        }]
      }, {
        title: '第三页',
        key: '0-2',
        children: [{
          title: '1页',
          key: '0-2-0',
          imgUrl: 'https://static.jeecg.com/upload/test/1374962_1587621329085.jpg'
        }]
      }],
      selectedKeys: [],
      expandedKeys: [],
      sort: 0,
      imgUrl: '',
      navName: '',
      imgList: [],
    }
  },
  created() {
    this.getImgList();
  },
  methods: {
    getImgList() {
      var count = 0;
      for (var i = 0; i < this.treeData.length; i++) {
        for (var j = 0; j < this.treeData[i].children.length; j++) {
          this.imgList.push({
            key: this.treeData[i].children[j].key,
            pkey: this.treeData[i].key,
            sort: count++,
            imgUrl: this.treeData[i].children[j].imgUrl,
            navName: this.treeData[i].title + "/" + this.treeData[i].children[j].title
          })
        }
      }
      this.setValue(this.imgList[this.sort]);
    },
    onSelect(selectedKeys, info) {
      for (var i = 0; i < this.imgList.length; i++) {
        if (this.imgList[i].key === selectedKeys[0]) {
          this.sort = this.imgList[i].sort;
          this.setValue(this.imgList[i]);
          break;
        }
      }
    },
    onExpand(expandedKeys) {
      this.expandedKeys = [];
      if (expandedKeys !== null && expandedKeys !== '') {
        this.expandedKeys[0] = expandedKeys[1];
      }
    },
    prev() {
      if (this.sort === 0) {
        this.sort = this.imgList.length - 1;
      } else {
        this.sort = this.sort - 1;
      }
      this.setValue(this.imgList[this.sort]);
    },
    next() {
      if (this.sort === this.imgList.length - 1) {
        this.sort = 0;
      } else {
        this.sort = this.sort + 1;
      }
      this.setValue(this.imgList[this.sort]);
    },
    // 设置受控节点值
    setValue(value) {
      this.selectedKeys = [];
      this.imgUrl = value.imgUrl;
      this.selectedKeys[0] = value.key;
      this.expandedKeys[0] = value.pkey;
      this.navName = value.navName;
    }
  }
}
</script>

<style scoped>

</style>