<template>
	<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
		<!--头部 我的相片-->
		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
			<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
			我的相片
		</view>
		<!--图片拼图-->
		<view class="jigsaw-picture" ref="jigsawPicture">
			<image class="picture-backgrounImg" src="https://i2.hdslb.com/bfs/archive/bd7dfae552d4ff42e113a5b5a931d4ab2c225388.jpg"></image>
			<template v-for="(item,index) in pictureJigsawPosition">
				<view class="picture-position" :key="index" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
					<image :src="item.url" @touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></image>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      screenWidth:0,//屏幕宽度
      statusBarHeight: 0,//状态栏高度
      capsule: 0,// 胶囊大小、位置数据
      navHeight: 0,// 导航栏高度
      albumBoxTop:0,//顶部高度
			
      pictureJigsawPosition:[//图片框位置
        {
          url:'https://img2.baidu.com/it/u=1213138858,1241586936&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1153',
          width:'300',
          height:'500',
          top:'200',
          left:'24',
          radius:'50',
        },
        {
          url:'https://i0.hdslb.com/bfs/archive/4d063c42bb8d738f7be5e5a575a6dd19106c1c7d.jpg',
          width:'400',
          height:'200',
          top:'200',
          left:'340',
          radius:'8',
        },
        {
          url:'https://img2.baidu.com/it/u=1268701741,4039580892&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
          width:'400',
          height:'200',
          top:'560',
          left:'340',
          radius:'16',
        },
      ],
			
      transpositionStartMes:{},
      transpositionStartIndex:0,
    }
  },
  onLoad(option) {
    this.recordDeviceInfo()//记录设备信息
    //获取当前view的宽度
    const query = uni.createSelectorQuery().in(this)
    query.select('.jigsaw-picture').boundingClientRect(res => {
      this.screenWidth = res.width
    }).exec()
  },
  methods: {
    recordDeviceInfo() { //---记录设备信息
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
      this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
      this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
      this.albumBoxTop = this.statusBarHeight+this.navHeight
    },
    returnClick() {//头部 点击返回
      uni.navigateBack({
        delta: 1
      })
    },
    //基础换位逻辑
    //1.获取当前位置。确定开始位置的图片值
    //2.获取终点位置
    //3.循环终点位置。确实终点位置是否再开始位置，若不在，则将开始位置和终点位置图片互换
    handleTouchMove(event) {
    },
    handleTouchStart(event,index) {//changedTouches[0]  pageX横向 pageY属相
      this.transpositionStartMes = event.changedTouches[0]
      this.transpositionStartIndex = index
    },
    handleTouchEnd(event) {//点击图片是否切换
      //距离头部高度 
      var navHeight = this.pxToRpx(this.albumBoxTop)
      //获取终点位置
      var endEvent = event.changedTouches[0]
      //参数重组  将参数从当前参数转换为 750rpx的数值
      var newScale = endEvent.pageX/this.screenWidth*750//换算 满宽在哪
      var newRemain = (endEvent.pageY-navHeight)/this.screenWidth*750//换算 满宽在哪  pageY-navHeight  当前手指位置-导航栏高度 为现在手指再DIV内的高度
      endEvent.pageX = newScale
      endEvent.pageY = newRemain
      //循环是否在某个元素框里面
      var newInIndex = null
      this.pictureJigsawPosition.forEach((item,index)=>{
        var overWidth = parseInt(item.width)+parseInt(item.left)
        var overHeight = parseInt(item.height)+parseInt(item.top)
        if(endEvent.pageX>=item.left&&endEvent.pageX<=overWidth&&endEvent.pageY>=item.top&&endEvent.pageY<=overHeight){
          newInIndex = index
        }
      })
      //确定进入其他元素框内时 图片对换
      if(this.transpositionStartIndex!==newInIndex&&newInIndex!==null){
        var indexOne = JSON.parse(JSON.stringify(this.pictureJigsawPosition[this.transpositionStartIndex].url))
        var indexNew = JSON.parse(JSON.stringify(this.pictureJigsawPosition[newInIndex].url))
        this.pictureJigsawPosition[this.transpositionStartIndex].url = JSON.parse(JSON.stringify(indexNew))
        this.pictureJigsawPosition[newInIndex].url = JSON.parse(JSON.stringify(indexOne))
      }
			console.log(this.$refs.jigsawPicture)
    },
    // px转rpx  将头部导航栏PX转换为RPX
    pxToRpx(px) {
      //计算比例
      let scale = uni.upx2px(100)/100
      return px/scale
    },
  }
}
</script>

<style scoped lang="scss">
	.albumBox{
		display: flex;
		flex-direction:column;
		height: 100vh;
		background-color: #fff;
	}
	.nav-bar {
		width: 100%;
		justify-content:center;
		font-size: 36rpx;
		font-weight: 700;
		padding: 0 24rpx 0 24rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		/deep/ .u-icon{
			margin: auto;
			position: absolute;
			left: 24rpx;
			top: 0;
			bottom: 0;
		}
	}
	.jigsaw-picture{
		width: 750rpx;
		height: 1100rpx;
		margin-top: 86rpx;
		position: relative;
		.picture-backgrounImg{
			width: 750rpx;
			height: 1100rpx;
		}
		.picture-position{
			border:solid 1px #333333;
			overflow: auto;
			position: absolute;
		}
		.picture-positionBox{
			width: 750rpx;
			height: 1100rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

</style>
