<template>
	<view class="body">
		<view v-if="adUnitId" style="width: 94%; margin-left: 3%;">
			<ad-custom :unit-id="adUnitId"  ad-intervals="30" ></ad-custom>
		</view>
		<view class="contents">
			<view class="imagesContent">
				<view class="titleContent">
					<view class="title-content">
						<u--text bold size="18" color="#0081ff" text="图集"></u--text>
					</view>
					<view class="title-shadow">
						<u--text bold color="#0081ff" text="IMAGES"></u--text>
					</view>
				</view>
				<view class="imagesContent-images">
					<u-swiper @change="imageCurrentChange" imgMode="aspectFit" height="400" :list="imagesList"
						previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5" current="imageCurrent"
						indicatorMode="dot" indicator indicatorInactiveColor="#3c9cff" indicatorActiveColor="red"
						bgColor="#ffffff"></u-swiper>
				</view>
				<view class="imagesContent-buttonGroup">
					<view class="imagesContent-buttonGroup-top">
						<view class="imagesContent-buttonGroup-left">
							<u-button @click="copyImageUrl" type="primary" plain text="复制链接"></u-button>
						</view>
						<view class="imagesContent-buttonGroup-right">
							<u-button @click="download(imagesList[imageCurrent])" type="primary" text="下载单张"></u-button>
						</view>
					</view>
					<view class="imagesContent-buttonGroup-bottom">
						<u-button @click="downloadAll" type="primary" text="下载全部"></u-button>
					</view>
				</view>
			</view>
			<view class="copywritingContent">
				<view class="titleContent">
					<view class="title-content">
						<u--text bold size="18" color="#0081ff" text="文案"></u--text>
					</view>
					<view class="title-shadow">
						<u--text bold color="#0081ff" text="TITLE"></u--text>
					</view>
				</view>
				<view class="copywritingContent-textarea">
					<u--textarea maxlength="180" height="140" v-model="copywriting" placeholder="文案内容"></u--textarea>
				</view>
				<view class="copywritingContent-button">
					<u-button @click="copyText(copywriting)" type="primary" text="复制文案"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addNewDownloadUrl
	} from "@/api/app/index.js"
	export default {
		data() {
			return {
				adUnitId:"",
				imageCurrent: 0,
				isOpenAd: false,
				videoAd_id: "",
				imagesList: [],
				copywriting: ""
			}
		},
		onLoad() {
			let _this = this;
			this.adUnitId = uni.getStorageSync("sysSet").wzinfoAd
			uni.getStorage({
				key: 'analysisData',
				success: function(res) {
					_this.imagesList = res.data.pics
					_this.copywriting = res.data.title
				}
			})
		},
		methods: {
			imageCurrentChange(e) {
				let _this = this;
				_this.imageCurrent = e.current
			},
			copyImageUrl() {
				let _this = this;
				// console.log(this.imageCurrent)
				_this.copyText(_this.imagesList[_this.imageCurrent])
			},
			downloadAll() {
				let _this = this;
				for (let i = 0; i < _this.imagesList.length; i++) {
					_this.download(_this.imagesList[i])
				}
			},
			download(url) {
				let _this = this;
				const downloadTask = uni.downloadFile({
					url: url.replace('http://', 'https://'), //仅为示例，并非真实的资源
					success: (downloadRes) => {
						if (downloadRes.statusCode === 200) {
							console.log('下载成功');
							uni.saveImageToPhotosAlbum({
								filePath: downloadRes.tempFilePath,
								success() {
									uni.hideLoading()
									uni.showToast({
										icon: "success",
										title: "下载成功！"
									})
								},
								fail: function(err) {
									uni.hideLoading();
									console.log(err)
									if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
										err
										.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err
										.errMsg ===
										"saveImageToPhotosAlbum:fail authorize no response"
									) {
										// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
										uni.showModal({
											title: '提示',
											content: '需要您授权保存相册',
											showCancel: false,
											success: modalSuccess => {
												uni.openSetting({
													success(settingdata) {
														console.log(
															"settingdata",
															settingdata)
														if (settingdata
															.authSetting[
																'scope.writePhotosAlbum'
															]) {
															uni.showModal({
																title: '提示',
																content: '获取权限成功,再次点击图片即可保存',
																showCancel: false,
															})
														} else {
															uni.showModal({
																title: '提示',
																content: '获取权限失败，将无法保存到相册哦~',
																showCancel: false,
															})
														}
													},
													fail(failData) {
														console.log("failData",
															failData)
													},
													complete(finishData) {
														console.log(
															"finishData",
															finishData)
													}
												})
											}
										})
									}
								}
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						if (err.errMsg.includes("fail url not in domain list")) {
							addNewDownloadUrl(url.replace(/^https?:\/\/(.*?)(:\d+)?\/.*$/, '$1')).then(response => {}),
							uni.showModal({
								title: '提示',
								content: '因为微信限制，下载失败，可以通过浏览器链接下载，是否复制链接自行去浏览器下载？',
								success: (modalRes) => {
									if (modalRes.confirm) {
										_this.copyText(url)
									}
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: '下载失败了',
								showCancel: false,
							})
						}

						// console.log(err)
					}
				});
				downloadTask.onProgressUpdate((downloadTaskRes) => {
					uni.showLoading({
						title: '下载进度' + downloadTaskRes.progress + '%',
						mask:true
					})
				})

			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function(res) {
						uni.showToast({
							title: '复制成功',
						});
					},
					fail() {
						uni.showToast({
							icon: "error",
							title: '复制失败了'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $u-bg-color;
	}

	.ad-show {
		width: 100%;
	}

	.contents {
		padding: 20rpx 20rpx;
	}

	.imagesContent,
	.copywritingContent {
		margin-top: 30rpx;
		padding: 30rpx 20rpx;
		box-shadow: 3px 3px 4px rgba(26, 26, 26, 0.2);
		background-color: white;
		border-radius: 7px;
	}

	.titleContent {
		position: relative;
	}

	.title-shadow {
		position: absolute;
		bottom: -20rpx;
		font-style: italic;
		opacity: 0.4;
		padding-left: 10rpx;
	}

	.imagesContent-images,
	.copywritingContent-textarea {
		padding: 0 16rpx;
		margin-top: 40rpx;
	}

	.imagesContent-buttonGroup {
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.imagesContent-buttonGroup-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.imagesContent-buttonGroup-bottom,
	.copywritingContent-button {
		padding-top: 25rpx;
		width: 100%;
		box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2);
	}

	.imagesContent-buttonGroup-left,
	.imagesContent-buttonGroup-right {
		width: 45%;
		box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2);
	}
</style>