<template>
	<view class="preview-mask">
		<swiper class="swiper" circular duration="500" :current='currentNum' @change="imgToFun">
			<swiper-item v-for="(item,index) in imgList" :key="index">
				<image class="swiper-img" :src="item.imgUrl"></image>
			</swiper-item>
		</swiper>
		<view class="preview-list">
			<view class="list-img" v-for="(item,index) in imgList" :key="index" :class="currentNum==index?'list-imgAct':''" @click="thumbnailFun(index)">
				<image :src="item.imgUrl"></image>
				<view>
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="preview-close">
			<u-icon name="close"></u-icon>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      imgList:[
        {
          imgUrl:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
          name:'金属相框',
        },
        {
          imgUrl:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
          name:'木框',
        },
        {
          imgUrl:'https://img1.baidu.com/it/u=2652134479,594912468&fm=253&fmt=auto&app=138&f=JPEG?w=878&h=493',
          name:'无框',
        },
      ],//相片集合
      pictureFrame:[
        {
          url:'',
          name:'金属相框',
          width:'',
          height:'',
        },
        {
          url:'',
          name:'木框',
          width:'',
          height:'',
        },
        {
          url:'',
          name:'无框',
          width:'',
          height:'',
        },
      ],//相框集合
      imgAllList:[],//相片加相框融合集合
      currentNum:1,//当前位置
    }
  },
  methods: {
    imgFusion(){//相片相框融合
      if(this.pictureFrame.length>0){
        this.imgList.forEach((item,index)=>{
          this.pictureFrame.forEach((item2,index2)=>{
            var data = {
              url:item.imgUrl,
              pictureUrl:item2.url,
              pictureWidth:item2.width,
              pictureHeight:item2.height,
            }
            this.imgAllList.push(data)
          })
        })
      }
    },
    imgToFun(event){//当前轮播图第几张
      this.currentNum = event.detail.current
      console.log(event)
    },
    thumbnailFun(index){//点击缩略图 查看详情
      this.currentNum = index
    },
  }
}
</script>

<style scoped lang="scss">
	.preview-mask{
		padding-top: 296rpx;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
		background-color: rgba(0,0,0,.3);
	}
	/deep/ .swiper{
		width: 100%;
		height: 956rpx;
		margin-bottom: 36rpx;
	}
	.swiper-img{
		display: block;
		width: 680rpx;
		height: 956rpx;
		margin: 0 auto;
	}
	.preview-list{
		display: flex;
		width: 100%;
		height: 80rpx;
		padding: 0 36rpx 0 36rpx;
		overflow: auto;
		.list-img{
			width: 80rpx;
			height: 80rpx;
			margin-right: 8rpx;
			background: rgba(254,102,0,0);
			border-radius: 4rpx;
			position: relative;
			image{
				display: block;
				width: 72rpx;
				height: 72rpx;
				border-radius: 4rpx;
				margin: auto;
				position: absolute;
				top:0;
				right: 0;
				bottom: 0;
				left: 0;
			}
			view{
				width: 72rpx;
				height: 24rpx;
				font-weight: 600;
				font-size: 16rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				text-align: center;
				background: #CFA891;
				margin: auto;
				position: absolute;
				bottom: 4rpx;
				left: 0;
				right: 0;
			}
		}
		.list-imgAct{
			background: rgba(254,102,0,1);
		}
	}
	.preview-close{
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		top: 204rpx;
		right: 34rpx;
		/deep/ .u-icon--right{
			flex-direction: row-reverse !important;
		}
		/deep/ .u-icon__icon{
			color: #fff !important;
			font-weight: bold !important;
			font-size: 50rpx !important;
			line-height: 52rpx !important;
		}
	}
</style>
