<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="cjimg">
					<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="beforeUploadImg">发布营销内容</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>

		<picker-color :isShow="showPickerColor" :bottom="0" @callback='getPickerColor' />

		<view class="">
			<l-clipper v-if="show" @success="successImg" @cancel="show = false" :width="800" :height="960" :is-lock-width="true" :is-lock-height="true" />
			<!-- <button @tap="show = true">裁剪</button> -->
		</view>
	</view>
</template>

<script>
	import {
		$pmdfb,
		$getImgWH,
		$initializeImg,
		$ossFilesForm,
		$uploadImg
	} from "@/http/apiManager.js"
	import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
	export default {
		components: {
			"picker-color": pickerColor,
		},
		data() {
			return {
				imgList: [],
				changeImgFlag: false,
				PMDtextarea: '',
				showPickerColor: false,
				fontColor: '#000',
				BackgroundColor: '#000',
				colorType: '',
				selectImgData: {},
				imageUrl: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/97205/26/1142/87801/5dbac55aEf795d962/48a4d7a63ff80b8b.jpg',
				show: false,
				url: '',
			}
		},
		onLoad(options) {
			this.picUrl = ''; // 初始化图片
			this.getImgWH()
			this.getInitializeIMG() //回显图片
		},
		methods: {
			cjimg(){
				this.show=true
			},
			successImg(e){
				console.log(e);
				this.show=false
				this.imgList.push({url:e.url})
				this.beforeUploadImg()
				
			},
			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)
			},

			beforeUploadImg() {
				this.imgList.forEach(item => {
					$ossFilesForm({
						bizType: "applyment",
						sourceFileName: item.url,
						sourceFileSize: 1000,
					}).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
						}
						this.uploadImg(item.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: ossImgUrl.data
							}]
						}).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>
