<template>
	<div>
		<v-header :title="title" :is-show-prev-page="true"></v-header>
		<div style="padding:20px;">
      		<el-button type="primary" @click="handleBannerClick">显示画廊</el-button>
		</div>
    	<fade-animation>
			<common-gallary
				:imgs="gallaryImgs"
        		:initial-slide="initialSlide"
        		:show-gallary="showGallary"
				v-show="showGallary"
				@close="handelGallaryClose"
			></common-gallary>
		</fade-animation>
	</div>
</template>

<script>
import VHeader from '@/common/header/VHeader';
import CommonGallary from '@/common/gallary/Gallary'
import FadeAnimation from '@/common/fade/FadeAnimation'
export default {
	name: 'testGallery',
	components: {
		VHeader,
    	CommonGallary,
  		FadeAnimation,
	},
	data() {
		return {
			title: 'testGallery',
      		gallaryImgs: [],
      		showGallary: false,
      		initialSlide: 2,
		};
	},
	methods: {
		init() {},
	    handleBannerClick () {
	      	this.showGallary = true
	      	this.gallaryImgs = ['https://vschool-solution.oss-cn-shenzhen.aliyuncs.com/10086/TestUpload/20190709/wx_file_4308560462_1562642697164.jpeg', 'https://vschool-solution.oss-cn-shenzhen.aliyuncs.com/10086/TestUpload/20190709/wx_file_6162812963_1562642517723.jpeg', 'https://vschool-solution.oss-cn-shenzhen.aliyuncs.com/10086/TestUpload/20190709/wx_file_9404638340_1562663293526.jpeg'];
	    },
	    handelGallaryClose ({ activeIndex }) {
        this.initialSlide = activeIndex
        this.showGallary = false
	    },
	},
	created() {},
	mounted() {
		this.init();
	}
};
</script>

<style lang="stylus" scoped></style>
