<template>
	<view class="content">
		<view class="box">
			<view class="title flex">
				<view class="title-font">分享文案</view>
				<view class="title-btn" @click="comfirm()">复制文案</view>
			</view>
			<view class="box-info">
				<view class="info-title">{{ info.title }}</view>
				<view class="info-tip">{{ info.comment }}</view>
				<view class="info-url">{{ url }}</view>
			</view>
			<view class="title flex" style="margin-top: 20rpx;">
				<view class="title-font">
					分享素材
					<text>(已选{{ nowlen }}/{{ alllen }})</text>
				</view>
			</view>
			<view class="image-box">
				<view class="image-item" v-for="(item, index) in imageBox" @click="change(item)">
					<image :src="item.url" mode=""></image>
					<view class="isxuan" v-if="item.isxuan"></view>
				</view>
			</view>
		</view>
		<view class="btn" @click="onDown()">下载</view>
	</view>
</template>

<script>
import sunuiGrand from '@/components/sunui-grand/sunui-grand.vue';
import { reply_detail, short_link } from '@/api/activity.js';
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
export default {
	data() {
		return {
			info: {},
			url: '',
			imageBox: [],
			alllen: '',
			nowlen: ''
		};
	},
	components: {
		sunuiGrand
	},
	onLoad(opt) {
		this.id = opt.id;
	},
	onShow() {
		this.imageBox = [];
		this.loadData();
	},
	onReachBottom() {},
	onReady() {},
	methods: {
		loadData() {
			const obj = this;
			reply_detail({}, this.id).then(({ data }) => {
				data.pics.forEach(e => {
					let u = {
						isxuan: true,
						url: e
					};
					obj.imageBox.push(u);
				});
				this.alllen = obj.imageBox.length;
				this.nowlen = obj.imageBox.length;
				this.info = data;
			});
			short_link({ url: 'pages/zc/plDetail?id=' + this.id }).then(({ data }) => {
				console.log(data);
				this.url = data.link;
			});
		},
		change(opt) {
			if (opt.isxuan) {
				opt.isxuan = false;
				this.nowlen -= 1;
			} else {
				opt.isxuan = true;
				this.nowlen += 1;
			}
		},
		comfirm() {
			let text = this.info.comment + this.url;
			const result = uniCopy(text);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		},
		onDown() {
			let that = this;
			let index = 0;
			let list = [];
			that.imageBox.forEach(e => {
				if (e.isxuan) {
					list.push(e.url);
				}
			});
			// console.log('触发下载图片');
			// 第一步，先调用授权功能
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success() {
					// 1 授权成功遍历所有要下载的图片
					if (list && list.length > 0) {
						// console.log(that.pathList, '============查看有没有图片数据=============>');
						let i = 1;
						list.forEach(item => {
							// 1.1 调用下载api方法
							uni.showLoading({
								title: '下载第' + i + '图片中，共' + list.length + '张'
							});
							uni.downloadFile({
								url: item, // 获取要下载的服务器里的图片地址
								success: res => {
									// 1.2 获取远程图片地址后,将图片地址缓存到本地
									if (res.statusCode === 200) {
										// console.log(res, '============下载后的图片地址=============>');
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath, // 把远程的图片地址及图片保存到本地
											success: function(res) {
												// 1.3保存成功后弹框提示保存成功
												i += 1;
												uni.showToast({
													title: '保存成功',
													icon: 'none'
												});
											},
											fail: function(res) {
												// console.log(res, '============fail=============>');
												// 1.4保存失败给用户弹框提示
												uni.showToast({
													title: '保存失败',
													icon: 'none'
												});
												if (res.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
													return;
												}
											}
										});
									}
								}
							});
						});
					} else {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						});
					}
				},
				fail() {
					// 2、授权失败 弹框再次要求授权
					uni.showModal({
						title: '您需要授权相册权限',
						success(res) {
							// 2.1点击确认按钮就调取授权设置页面
							if (res.confirm) {
								// 2.2 开启授权设置页面
								uni.openSetting({
									success(res) {},
									fail(res) {}
								});
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
	background: #f8f8f8;
}
.box {
	width: 730rpx;
	margin: 20rpx auto 0;
	border-radius: 20rpx;
	background: #ffffff;
	padding: 20rpx;
	.title {
		.title-font {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #303030;
			text {
				display: inline-block;
				margin-left: 10rpx;
				color: #999999;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}
		.title-btn {
			width: 150rpx;
			height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #e66f6f;
			border-radius: 30rpx;
			color: #e66f6f;
		}
	}
	.box-info {
		background: #f6f6f6;
		width: 700rpx;
		padding: 20rpx;
		margin: 20rpx auto 0;
		.info-title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #303030;
		}
		.info-tip {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #303030;
		}
		.info-url {
			margin-top: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
	.image-box {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.image-item {
			margin: 10rpx;
			position: relative;
			width: 33%;
			height: 300rpx;
			.isxuan {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background: #e04b4b;
			}
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.btn {
	margin: 0 auto;
	position: fixed;
	bottom: 20rpx;
	left: 0;
	right: 0;
	width: 710rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e04b4b;
	color: #ffffff;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	border-radius: 50rpx;
}
</style>