<template>
  <div class='tuitui-image-preview'>
    <div class='title'>点击按钮查看</div>
    <div class='tuitui-image-btns'>
      <div><BKButton :text="'基本'" @click="toggleNormalShow"></BKButton></div>
      <div><BKButton :text="'指定起始'" @click="toggleIndexShow"></BKButton></div>
    </div>
    <BKImagePreview :imageList="imageList" :hide="toggleNormalShow" v-if='normalShow'></BKImagePreview>
    <BKImagePreview :imageList="imageList" :hide="toggleIndexShow" v-if='indexShow' :defaultIndex="defaultIndex"></BKImagePreview>
  </div>
</template>
<script>
import BKImagePreview from '@/components/BKImagePreview'
import BKButton from '@/components/BKButton'

export default {
  components: {
    BKImagePreview,
    BKButton
  },
  data () {
    return {
      imageList: [
        'https://storage.bkjk.com/storage/file/f54083119edfb83c4cfe9ce2eeebc076.jpeg',
        'https://storage.bkjk.com/storage/file/ee7d265d95882cbbe6ce30a1d5a3db63.jpg',
        'https://storage.bkjk.com/storage/file/6da14260c621f36d2ba23f5ff820e352.jpg',
        'https://storage.bkjk.com/storage/file/ca1b69216ba9faa3c2eab5aa78cfe306.jpg',
        'https://storage.bkjk.com/storage/file/79fff5480af8cafc9350080b0e0550fe.jpg',
        'https://storage.bkjk.com/storage/file/654e4493c68c2061349696c949520d8e.jpg',
        'https://storage.bkjk.com/storage/file/ef750fb748528946972a4b566c6d971c.jpg'
      ],
      normalShow: false,
      indexShow: false,
      defaultIndex: 2
    }
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKImagePreview 图片预览'
    })
  },
  methods: {
    toggleNormalShow () {
      this.normalShow = !this.normalShow
    },
    toggleIndexShow () {
      this.indexShow = !this.indexShow
    }
  }
}
</script>
<style scoped>
.tuitui-image-preview {
  width: 100vw;
  padding: 40px;
}
.title {
  font-size: 26px;
  color: #ccc;
  font-weight: 600;
}
.tuitui-image-btns > div {
  margin-top: 60px;
}
</style>
