<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 queryInfo" data-type="view" id="jigsawPicture" ref="jigsawPicture">
			<image class="picture-backgrounImg queryInfo" 
				data-type="image2" data-src="http://lx.pangdly.com/img/yunduan.331a774.jpg" data-widthonce="750" data-heightonce="1100" 
				src="http://lx.pangdly.com/img/yunduan.331a774.jpg"></image>
			<template v-for="(item,index) in pictureJigsawPosition">
				<view class="picture-position queryInfo" data-type="view" :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 class="queryInfo" 
						data-type="image1" :data-src="item.url" :data-widthonce="item.width" :data-heightonce="item.height" :src="item.url" 
						@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></image>
				</view>
			</template>
		</view>
		<button @click="toCanvas">按钮</button>
		<tk-view2canvas ref="tkCanvas" 
			:canvas-width="canvasWidth" 
			:canvas-height="canvasHeight">
		</tk-view2canvas>
	</view>
</template>

<script>
let promiseIndex = 0
let promiseArray = []
let imageArray = []
let imageIndex = 0
import tkView2canvas from '@/components/tk-view2canvas' //面包屑导航
export default {
  components: {
    tkView2canvas
  },
  data() {
    return {
      screenWidth:0,//屏幕宽度
      statusBarHeight: 0,//状态栏高度
      capsule: 0,// 胶囊大小、位置数据
      navHeight: 0,// 导航栏高度
      albumBoxTop:0,//顶部高度
			
      pictureJigsawPosition:[//图片框位置
        {
          url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
          width:'300',
          height:'500',
          top:'200',
          left:'24',
          radius:'50',
        },
        {
          url:'http://lx.pangdly.com/img/liangjiang.097258e.jpg',
          width:'400',
          height:'200',
          top:'200',
          left:'340',
          radius:'8',
        },
        {
          url:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
          width:'400',
          height:'200',
          top:'560',
          left:'340',
          radius:'16',
        },
      ],
			
      transpositionStartMes:{},
      transpositionStartIndex:0,
      canvasWidth: 1080,  //canvas的width
      canvasHeight: 1920, //canvas的height 我这里简单写成1080*1920.可以根据自己的业务需求去动态修改这个尺寸。
    }
  },
  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 = parseInt(endEvent.pageX/this.screenWidth*750)//换算 满宽在哪
      var newRemain = parseInt((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))
      }
    },
    // px转rpx  将头部导航栏PX转换为RPX
    pxToRpx(px) {
      //计算比例
      let scale = uni.upx2px(100)/100
      return px/scale
    },
    toCanvas(){
      let that = this
      var arrayInfo = []
      // 1.先查询要绘制的view,image,text相关属性数据
      // 这里我将需要查询的所有view或text或image的类名都设置为queryInfo
      uni.createSelectorQuery().selectAll('.queryInfo').boundingClientRect().exec((res)=>{
        let resArray = res[0]
        console.log('获取到信息：', res[0])
        for(let i=0;i<resArray.length;i++){
          //1.判断查询到的组件类别,如果是view类，就按照view对应的格式将创建的对象添加到数组中
          if(resArray[i].dataset.type == 'view'){
            let bgColor = resArray[i].dataset.bgcolor||'#fff'
            let width = resArray[i].width
            let height = resArray[i].height
            let posX = resArray[i].left
            let posY = resArray[i].top
            arrayInfo.push({
              type:'view',
              width: width,
              height: height,
              bgColor: bgColor,
              posX:posX,
              posY:posY
            })
          }//2.判断查询到的组件类别,如果是image类，就按照image对应的格式将创建的对象添加到数组中
          else if(resArray[i].dataset.type == 'image1'){
            let type = 'image1'
            let src= resArray[i].dataset.src
            let posX = resArray[i].left
            let posY = resArray[i].top
            let width = resArray[i].width
            let height = resArray[i].height
            let swidth = parseInt(resArray[i].dataset.widthonce/750*this.screenWidth)
            let sheight = parseInt(resArray[i].dataset.heightonce/750*this.screenWidth)
            arrayInfo.push({
              type:'image1',
              src: src,
              width:width,
              height: height,
              swidth,
              sheight,
              posX:posX,
              posY:posY
            })
          }
          else if(resArray[i].dataset.type == 'image2'){
            let type = 'image2'
            let src= resArray[i].dataset.src
            let posX = resArray[i].left
            let posY = resArray[i].top
            let width = resArray[i].width
            let height = resArray[i].height
            arrayInfo.push({
              type:'image2',
              src: src,
              width:width,
              height: height,
              posX:posX,
              posY:posY
            })
          }
          //3.判断查询到的组件类别,如果是text类，就按照text对应的格式将创建的对象添加到数组中
          else if(resArray[i].dataset.type == 'text'){
            let type = 'text'
            let color= resArray[i].dataset.color
            let word= resArray[i].dataset.word
            let size= resArray[i].dataset.size
            let posX = resArray[i].left
            let posY = resArray[i].top
            arrayInfo.push({
              type:'text',
              color:color,
              word:word,
              size:size,
              posX:posX,
              posY:posY
            })
          }
        }
        //查询完毕后，也就创建好了arrayInfo数组，下面将arrayInfo数组作为参数，传给组件的drawCanvas()方法
        that.$refs.tkCanvas.drawCanvas(arrayInfo)
      })
    },
  }
}
</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>
