<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">
			<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" @drop="dropFun(event)" @dragover="allowDrag(event)" :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" draggable="true" @dragstart="dragFun(event)"></image>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      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:'460',
          left:'340',
          radius:'16'
        },
      ],
    }
  },
  onLoad(option) {
    this.recordDeviceInfo()//记录设备信息
  },
  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
      })
    },
    //图片拖动
    allowDrag(ev){
      console.log('123')
      ev.preventDefault()
    },
    dragFun(ev){
      console.log('456')
      ev.dataTransfer.setData('Text',ev.target.id)
    },
    dropFun(ev){
      console.log('789')
      ev.preventDefault()
      var data = ev.dataTransfer.getData('Text')
      ev.target.appendChild(document.getElementById(data))
    },
  }
}
</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;
		}
	}
</style>
