<template>
	<view class="rekeaseMain">
		<view class="main-title">
			营销内容
		</view>
		<view class="banner-mian">
			<view class="banner-list" v-for="(img,index) in imgList" :key="img">
				<view class="banner-list-title">
					第{{index+1}}屏广告
				</view>
				<image :src="img.url" mode="" @click="previewImage(img.url)"></image>
				<view class="del-box">
					<view class="del-tip" @click="delImg(index)">
						<image  style="height: 30rpx;width: 30rpx;margin-top:0rpx;" src="../../static/img/del.svg" mode=""></image>
						<text>删除</text>
					</view>
				</view>
			</view>
			<view class="addimg-box" v-if="imgList.length<5">
				<view class="addimg-title" @click="changeImg">
					<image src="../../static/img/add.svg" mode=""></image>
					<view class="">
						加一屏广告
					</view>
				</view>
			</view>
		</view>
		
		<view class="">
			<button style="background: linear-gradient(45deg, #17c5c6, #15ccb0);color: #fff;border: 0; margin-top: 20rpx; margin-bottom: 60rpx;" @click="releaseImg">发布营销内容</button>
		</view>
		
		<view class="main-title">
			跑马灯内容
		</view>
		<view class="PMDtextarea-box" v-show="!changeImgFlag">
			<textarea v-model="PMDtextarea" name="" id="" maxlength="20" style="background:#f4f4f4; width:100%;height:150rpx; box-sizing: border-box; border-radius: 10rpx; padding: 20rpx;"></textarea>
			<view class="PMDtextarea-num">
				{{PMDtextarea.length}}/20
			</view>
		</view>
		
		<view class="fontColor-select">
			<text>选择字体颜色</text>	
			<view @click="changeFontColor('font')" style="width: 50rpx;height: 50rpx;border-radius: 10rpx; margin-left: 50rpx;" :style="{background:fontColor}"></view>
		</view>
		
		<view class="fontColor-select">
			<text>选择背景颜色</text>	
			<view @click="changeFontColor('background')" style="width: 50rpx;height: 50rpx;border-radius: 10rpx; margin-left: 50rpx;" :style="{background:BackgroundColor}"></view>
		</view>
		
		<view class="">
			<button style="background: linear-gradient(45deg, #17c5c6, #15ccb0);color: #fff;border: 0; margin-top: 20rpx; margin-bottom: 60rpx;" @click="releaseLamp">发布跑马灯</button>
		</view>
		<view class="">
			<button style="background:#d1f3f5;color: #4ac3c3;border: 1px solid #15ccb0; margin-top: 20rpx; margin-bottom: 60rpx;">查看效果</button>
		</view>
		<view class="upload-image" v-if="changeImgFlag">
			<view class="upload-image-body">
				<canvas canvas-id="picCanvas"
					:style="'position: absolute; width: ' + picSizeW + 'px; height: ' + picSizeH + 'px; left: -' + picSizeW + 'px;'"></canvas>
				<view class="pic-preview" @touchstart="touchstart" @touchmove="touchmove">
					<scroll-view class='pic-area' @scroll='scroll' scroll-x scroll-y>
						<view :style="{ height: `calc(50% - ${areaH * 0.5}vw)` }"></view>
						<image :src="picSrc || picUrl" :style="styleImg"></image>
						<view :style="{ height: `calc(50% - ${areaH * 0.5}vw)` }"></view>
					</scroll-view>
					<view class="outside-mask-block" :style="styleV"></view>
					<view class="outside-mask-block" :style="styleV" style="bottom: 0;"></view>
					<view class="outside-mask-block" :style="styleH" style="left: 0;"></view>
					<view class="outside-mask-block" :style="styleH" style="right: 0;"></view>
				</view>
				<view class="bottom-bar safe-area-inset-bottom">
					<block v-if="picSrc != ''">
						<view class="rechoose" @click="chooseImage">重选</view>
						<button class="button" size="mini" @click="uploadClick">确定</button>
					</block>
					<view v-else class="choose-btn" @click="chooseImage">选择图片</view>
				</view>
			</view>
		</view>
		
		<picker-color :isShow="showPickerColor" :bottom="0"  @callback='getPickerColor'/>
	</view>
</template>

<script>
	import { $pmdfb,$getImgWH,$initializeImg,$ossFilesForm,$uploadImg} from "@/http/apiManager.js"
	import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
	import storageManage from "@/util/storageManage.js"
	const AREA_SIZE = 75; // 裁剪框占屏幕尺寸百分比
	const IMG_SIZEW = 800; // 裁剪图片默认尺寸
	const IMG_SIZEH = 960; // 裁剪图片默认尺寸

	export default {
		    components: {
		        "picker-color":pickerColor,
		    },
		data() {
			return {
				// bobyHeight: this.getBobyHeight(),
				picSrc: '',
				picUrl: '',
				dataKey: '',
				areaW: AREA_SIZE,
				areaH: AREA_SIZE,
				width: this.areaW,
				height: this.areaH,
				old_width: 0,
				old_height: 0,
				picSizeW: 800,
				picSizeH: 960,
				x: 0,
				y: 0,
				distance: 0,
				scale: 1,
				disable: false,
				imgList: [],
				changeImgFlag:false,
				PMDtextarea:'',
				showPickerColor:false,
				fontColor:'#000',
				BackgroundColor:'#000',
				colorType:'',
				selectImgData:{},
			}
		},
		onLoad(options) {
			this.picSizeW = Number(options.w) || IMG_SIZEW;
			this.picSizeH = Number(options.h) || IMG_SIZEH;
			this.picUrl = ''; // 初始化图片
			this.initAreaSize();
			this.getImgWH()
			this.getInitializeIMG() //回显图片
		},
		computed: {
			styleImg() {
				return `padding: 0 ${50 - this.areaW * 0.5}%;width: ${this.width}%;height: ${this.height}vw;`;
			},
			styleV() {
				// (屏幕高度 - 图片高度) / 2
				return `height: calc(50% - ${this.areaH * 0.5}vw);left: ${50 - this.areaW * 0.5}%;right: ${50 - this.areaW * 0.5}%;`;
			},
			styleH() {
				// (屏幕宽度 - 图片宽度) / 2
				return `top: 0;bottom: 0;width: ${50 - this.areaW * 0.5}%;`;
			},
		},
		methods: {
			async getImgWH(){
				let res = await $getImgWH('QR939200003565')
				console.log(res);
				if(res.code===0){
					this.picSizeH=res.bizData.picHeight
					this.picSizeW=res.bizData.picWidth
				}
			},
			
			async getInitializeIMG(){
				let res = await $initializeImg('QR939200003565')
				console.log(res);
				if(res.code===0){
					if(res.bizData.length>1){
						res.bizData.map(item=>{
							this.imgList.push({url:item.picName})
						})
					}
				}
			},
			
			async releaseLamp(){
				let data={
					deviceNo:'QR939200003565',
					inputText:this.PMDtextarea,
					fontColor:this.fontColor,
					bgColor:this.BackgroundColor,
				}
				let res = await $pmdfb(data)
				console.log(res);
			},
			getPickerColor(color){
				if(color){
					if(this.colorType==='font'){
						this.fontColor=color
					}else{
						this.BackgroundColor=color
					}
				}
				this.showPickerColor=false
			},
			changeFontColor(type){
				this.colorType=type
				this.showPickerColor=true
			},
			previewImage(url){
				console.log(url);
				let data={
					urls:[]
				}
				data.urls.push(url)
				uni.previewImage(data)
			},
			changeImg(){
				this.changeImgFlag=true
			},
			delImg(index){
				this.imgList.splice(index,1)
			},
			initAreaSize() {
				if (this.picSizeW > this.picSizeH) {
					this.areaH = AREA_SIZE * this.picSizeH / this.picSizeW;
				} else if (this.picSizeW < this.picSizeH) {
					this.areaW = AREA_SIZE * this.picSizeW / this.picSizeH;
				}
				this.width = this.areaW;
				this.height = this.areaH;
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.resetData();
						this.selectImgData={
							url:res.tempFiles[0].path,
							size:res.tempFiles[0].size
						}
						this.initImage(res.tempFiles[0].path);
					}
				});
			},

			resetData() {
				this.picSrc = '';
				this.distance = 0;
				this.old_width = 0;
				this.old_height = 0;
				this.x = 0;
				this.y = 0;
				this.scale = 1;
				this.disable = false;
				this.initAreaSize();
			},

			initImage(url,size) {
				uni.getImageInfo({
					src: url,
					success: (res) => {
						// #ifdef APP-PLUS || MP
						if (['png', 'jpeg', 'jpg'].indexOf(res.type) == -1) {
							uni.showModal({
								title: '',
								content: '仅支持上传png和jpg格式图片',
								showCancel: true,
								cancelText: '取消',
								confirmText: '重选',
								success: (res) => {
									if (res.confirm) {
										this.chooseImage();
									}
								},
							});
							return;
						}
						// #endif
						let scale = res.width / res.height;
						let areaScale = this.areaW / this.areaH;
						this.picSrc = url;
						this.scale = scale;
						if (scale > 1) { // 横向图片
							if (scale >= areaScale) { // 图片宽不小于目标宽，则高固定，宽自适应
								this.width = (this.height / res.height) * this.width * (res.width / this
									.width);
							} else { // 否则宽固定、高自适应
								this.height = res.height * this.width / res.width;
							}
						} else { // 纵向图片
							if (scale <= areaScale) { // 图片高不小于目标高，宽固定，高自适应
								this.height = (this.width / res.width) * this.height / (this.height / res
									.height);
							} else { // 否则高固定，宽自适应
								this.width = res.width * this.height / res.height;
							}
						}
						// 记录原始宽高，为缩放比列做限制
						this.old_width = this.width;
						this.old_height = this.height;
					},
				});

			},

			touchstart(e) {
				if (this.picSrc && e.touches.length == 2) {
					let _x = e.touches[1].pageX - e.touches[0].pageX,
						_y = e.touches[1].pageY - e.touches[0].pageY,
						distance = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
					this.distance = distance;
				}
			},

			touchmove(e) {
				if (this.picSrc && e.touches.length == 2) {
					let _x = e.touches[1].pageX - e.touches[0].pageX,
						_y = e.touches[1].pageY - e.touches[0].pageY,
						old_width = this.old_width,
						old_height = this.old_height,
						newdistance = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2)),
						distance = this.distance,
						end_distance = newdistance - distance,
						pic_scale = 1 + end_distance * 0.001,
						width = this.width * pic_scale,
						height = this.height * pic_scale;
					let max = width / old_width;
					if (max > 2) {
						width = old_width * 2;
						height = old_height * 2;
					} else if (max < 1) {
						width = old_width;
						height = old_height;
					}
					this.width = width;
					this.height = height;
				}
			},

			scroll(e) {
				if (this.picSrc) {
					let x = e.detail.scrollLeft,
						y = e.detail.scrollTop;
					this.x = x;
					this.y = y;
				}
			},

			uploadClick(e) {
				console.log(e);
				uni.showModal({
					content: '确定要截取当前可视区域图片并上传吗？',
					success: modalRes => {
						if (modalRes.confirm) {
							uni.showLoading({
								title: '上传中...',
								mask: true
							});
							const systemInfo = uni.getSystemInfoSync();
							let whScale = systemInfo.screenWidth * 0.01, // 图片宽高vw与px比
								// 生成图片的实际尺寸与截取区域比
								xScale = this.picSizeW / (systemInfo.screenWidth * this.areaW * 0.01),
								yScale = this.picSizeH / (systemInfo.screenWidth * this.areaH * 0.01);
							const canvas = uni.createCanvasContext('picCanvas');
							// 注意：无法直接绘制网络图片，需要先下载到本地
							canvas.drawImage(this.picSrc, -this.x * xScale, -this.y * yScale, this.width *
								whScale * xScale, this.height *
								whScale * xScale);
							canvas.draw(setTimeout(() => {
								uni.canvasToTempFilePath({
									x: 0,
									y: 0,
									width: this.picSizeW,
									height: this.picSizeH,
									destWidth: this.picSizeW, // 必要，保证生成图片宽度不受设备分辨率影响
									destHeight: this.picSizeH, // 必要，保证生成图片高度不受设备分辨率影响
									canvasId: 'picCanvas',
									success: (fileRes) => {
										console.log(fileRes,'initImageinitImageinitImage')
										uni.hideLoading()
										this.imgList.push({url:fileRes.tempFilePath})
										let str =fileRes.tempFilePath
										str = str.substring(0, str.length - 3)+'jpg'
										this.uploadImage(str);
										this.changeImgFlag=false
									},
									fail: function(err) {
										console.log(err);
										uni.showToast({
											title: '上传失败：图片生成过程中遇到错误',
											icon: 'none'
										});
										this.changeImgFlag=false
									}
								}, this);
							}, 1000));
						}
					}
				});
			},
			uploadImage(tempFilePath) {
				// 在H5平台下，tempFilePath 为 base64
				this.resetData()
				$ossFilesForm({
				  bizType: "applyment",
				  sourceFileName:'http://tmp/umPJ4jKRMPO370afabf8febe678b66a70f143e34a90d.jpg',
				  sourceFileSize: this.selectImgData.size,
				}).then(({bizData})=>{
					let url,
					  isOss,
					  ossImgUrl = ""
					if (bizData.formActionUrl === "LOCAL_SINGLE_FILE_URL") {
					  url = appConfig.env.JEEPAY_BASE_URL + props.upLoadUrl
					  isOss = false
					} else {
					  url = bizData.formActionUrl
					  ossImgUrl = { data: bizData.ossFileUrl }
					  isOss = true
					}
					console.log(ossImgUrl.data);
					this.uploadImg(this.selectImgData.url, url, bizData.formParams, isOss, ossImgUrl)
				})
			},
			uploadImg(tempFilePaths, url, formParams, isOss, ossImgUrl){
				console.log(tempFilePaths, url, formParams, isOss, ossImgUrl);
				const token = storageManage.token()
				
				var successCount = 0 //多图时，上传成功数量
				var qualification = [] //多图存储
				uni.uploadFile({
				  url: url,
				  filePath: tempFilePaths,
				  name: "file",
				  header: {
				    itoken: token,
				  },
				  formData: formParams,
				  // 代表完成的函数 注：此处可以传入三个函数  success （成功）/ fail（失败） / complete （完成）
				  complete(res) {
					console.log(res);
					$uploadImg({
						deviceNo:'QR939200003565',
						carouselPicInfo:[{
							picName:'https://qilinlife-pub.oss-cn-hangzhou.aliyuncs.com/applyment/ff22fa1c-8d97-4ef6-ae4a-a79d63cc285c.jpg'
						}]
					}).then(({bizData})=>{
						console.log(bizData);
					})
				}})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rekeaseMain {
		padding: 20rpx;

		.main-title {
			line-height: 60rpx;
			position: relative;
			padding-left: 20rpx;
		}
		.main-title::after{
			content: '';
			display: block;
			width: 8rpx;
			background: #16c3c3;
			height: 30rpx;
			position: absolute;
			left: 0;
			top: 17rpx;
		}

		.banner-mian {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.banner-list {
				width: 48%;
				text-align: center;
				height: 470rpx;
				margin-top: 20rpx;
				.banner-list-title {
					background: #e7f9f9;
					padding: 15rpx;
					font-size: 24rpx;
					color: #1ac3c7;
					border-radius: 10rpx 10rpx 0 0;
					height: 40rpx;
				}

				image {
					width: 100%;
					border-radius: 10rpx;
					margin-top: -10rpx;
					height: 340rpx;
				}
				.del-box{
					display: flex;
					justify-content: center;
					margin-top: 16rpx;
					.del-tip {
						width: 40%;
						background: #fce3df;
						color: #f00;
						border-radius: 30rpx;
						border: 1px solid #f00;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 4rpx;
					}
				}

			}

			.addimg-box {
				width: 48%;
				background: #f4f4f4;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 400rpx;
				margin-top: 20rpx;
				.addimg-title {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}
		.PMDtextarea-box{
			position: relative;
			.PMDtextarea-num{
				position: absolute;
				right: 5rpx;
				bottom: 10rpx;
			}
		}
		
		.fontColor-select{
			display: flex;
			margin: 30rpx 0;
		}
	}

	.upload-image {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;

		.upload-image-body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			display: flex;
			flex-direction: column;

			.pic-preview {
				width: 100%;
				flex: 1;
				position: relative;

				.pic-area {
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					font-size: 0;
					z-index: 1;
					background-color: $uni-bg-color-grey;
					position: absolute;
					display: flex;
					flex-direction: column;
				}

				.outside-mask-block {
					background-color: rgba(51, 51, 51, 0.9);
					z-index: 2;
					position: absolute;
				}
			}

			.bottom-bar {
				display: flex;
				flex-direction: row;
				position: relative;
				background-color: $uni-bg-color-grey;

				.rechoose {
					color: $uni-color-primary;
					padding: 0 $uni-spacing-row-lg;
					line-height: 100rpx;
				}

				.choose-btn {
					color: $uni-color-primary;
					text-align: center;
					line-height: 100rpx;
					flex: 1;
				}

				.button {
					margin: auto $uni-spacing-row-lg auto auto;
				}
			}

			.safe-area-inset-bottom {
				padding-bottom: 0;
				padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
				padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2
			}

		}
	}
</style>
