<template>
	<view class="content">
		<uni-nav-bar title="欧气券" color="#fff" left-icon="left" backgroundColor="transparent" :border="false"
			:statusBar="true" :fixed="true" @clickLeft="$c.back"></uni-nav-bar>

		<view v-if="pageData" class="hd-card relative column justify-center">
			<view class="align-center">
				<image :src="$img1('my/ouqi.png')"></image>
				<view class="ml20 column">
					<text>友达币数量</text>
					<text>{{ pageData.user_integral }}</text>
				</view>
			</view>
			<view class="join mt20">
				<view class="icon">
					<image :src="$img1('my/canyu.png')" lazy-load></image>
				</view>
				今日已参与
				<text>{{ pageData.y_count }}/{{ pageData.z_count }}</text>
			</view>
			<image class="hd-card-box" :src="$img1('my/ouqiBox.png')"></image>
		</view>

		<scroll-view class="tab" scroll-x>
			<view class="tab-item common_bg relative" v-for="(item, i) in tabList" :key="i"
				:class="tabCur==i?'act':'unact'" @click="tabChange(i)">
				<text>
					{{ item.title }}
				</text>
			</view>
		</scroll-view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getList" :down="downOption"
			:up="upOption">
			<view class="list">
				<view class="list-item common_bg" v-for="(item, i) in listData" :key="i" @click="handelClick(item, i)">
					<view v-if="tabList[tabCur].id == 1 && item.level > 2" class="check icon">
						<image v-if="item.choose" :src="$img1('common/check_act.png')" lazy-load></image>

						<image v-else :src="$img1('common/check.png')" lazy-load></image>
					</view>
					<view class="coin">
						<image :src="item.level_img" lazy-load></image>
					</view>
					<view class="info">
						<view class="title">{{ item.title }}</view>
						<!-- <view class="open-num">{{ item.num }}友达币</view> -->
						<view class="num">需要{{ item.kl_num2 }}个参与者</view>
					</view>
					<view v-if="tabList[tabCur].id == 1" class="share-btn relative" @click="h5share(item)">
						<button v-if="!isH5" class="hide" open-type="share" :data-item="item" @click.stop></button>
						立即分享
					</view>

					<view v-else-if="tabList[tabCur].id == 2" class="share-ing">
						<view class="share-num">
							<text>
								{{ item.yi_ling == item.kl_num2 ? '已结束' : '分享中' }}
							</text>
							<template v-if="item.yi_ling != item.kl_num2">
								{{ item.yi_ling }}/{{ item.kl_num2 }}
							</template>
						</view>

						<view class="progress mt20" v-if="item.yi_ling != item.kl_num2">
							<cmd-progress :percent="(item.yi_ling / item.kl_num2) * 100" :show-info="false"
								stroke-color="#D3AFFF" :strokeWidth="5"></cmd-progress>
						</view>
					</view>

					<view v-else-if="tabCur == 3" class="share-end">已结束</view>
				</view>
			</view>
		</mescroll-body>

		<view v-if="tabList[tabCur].id == 1 && pageData" class="mix-fixed common_bg" :style="{
        backgroundImage: `url(${$img('/static/img/3_mix_bg.png')})`
      }">
			<view class="title">
				<text>合并大礼包</text>
			</view>

			<view class="rule">
				高级赏包、低级赏包最多{{ pageData && pageData.ke_hc_count }}个合并1个,合成将损耗{{
          pageData && pageData.sun_hao
        }}友达币!
			</view>

			<view class="coin-num">
				总友达币:{{ (mixData && mixData.sum_num) || 0 }} 将合成:{{
          (mixData && mixData.coupon.title) || '普通赏券'
        }}(友达币{{ (mixData && mixData.sh_num) || 0 }})
			</view>

			<view class="btn-lsit">
				<view class="btn" @click="chooseAll">全选</view>

				<view class="btn" @click="cancelAll">取消</view>

				<view class="btn color" @click="$c.noDouble(submitMix)">
					合成(已选{{ chooseNum }}件)
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			var isH5 = false;
			// #ifdef H5
			isH5 = true;
			// #endif
			return {
				isH5,
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					auto: true,
					page: {
						size: 10 // 每页数据的数量,默认10
					}
				},
				tabList: [{
						id: 1,
						title: '未分享'
					},
					{
						id: 2,
						title: '已分享'
					}
				],
				tabCur: 0,
				pageData: '',
				listData: [],
				mixData: '',
				canReload: false
			}
		},

		computed: {
			chooseNum() {
				if (this.listData.length <= 0) {
					return 0
				}

				if (this.tabList[this.tabCur].id != 1) {
					return 0
				}

				const arr = this.listData.filter(item => item.choose)
				return arr.length
			}
		},

		async onShareAppMessage(e) {
			const item = e.target.dataset.item
			const userInfo = uni.getStorageSync('userinfo')
			await this.beforeShare(item.id)

			return {
				title: `快来领取${userInfo.nickname}分享的${item.num}赏币的${item.title}`,
				imageUrl: item.level_img,
				path: '/pages/user/index' +
					this.$c.qs({
						ou_coupon_id: item.id
					})
			}
		},

		onLoad(options) {
			if (options.type) {
				this.tabCur = options.type
			}
		},

		onShow() {},

		methods: {
			async h5share(item) {

				const userInfo = uni.getStorageSync('userinfo')
				await this.beforeShare(item.id)
				var data = {
					title: `快来领取${userInfo.nickname}分享的${item.num}赏币的${item.title}`,
					imageUrl: item.level_img,
					path: '/pages/user/index' +
						this.$c.qs({
							ou_coupon_id: item.id
						})
				}
				console.log(data);
				this.$c.$fenxiang(data.title, '', data.path, data.imageUrl);
			},
			beforeShare(coupon_id) {
				return new Promise((resolve, reject) => {
					this.req({
						url: 'coupon_share',
						data: {
							coupon_id
						},
						success: res => {
							if (res.status == 1) {
								this.mescroll.resetUpScroll()
								this.mescroll.scrollTo(0, 0)

								resolve()
							}
						}
					})
				})
			},

			submitMix() {
				let arr = this.listData.filter(item => item.choose).map(item => item.id)

				if (arr.length < 2) {
					this.$c.toast({
						title: '请最少选择两个赏券合成'
					})
					return
				}

				this.req({
					url: 'coupon_synthesis',
					data: {
						coupon_ids: arr.join(',')
					},
					success: res => {
						if (res.status == 1) {
							this.$c.toast({
								title: res.msg,
								duration: 500,
								success: () => {
									this.tabChange(this.tabCur)
								}
							})
						}
					}
				})
			},

			confirmMix() {
				let arr = this.listData.filter(item => item.choose).map(item => item.id)

				if (arr.length < 2) {
					this.mixData = ''
					return
				}

				this.req({
					url: 'coupon_ji_suan',
					data: {
						coupon_ids: arr.join(',')
					},
					success: res => {
						if (res.status == 1) {
							this.mixData = res.data
						}
					}
				})
			},

			cancelAll() {
				if (this.tabList[this.tabCur].id != 1) {
					return
				}

				this.listData.map(item => {
					item.choose = false
				})

				this.confirmMix()
			},

			chooseAll() {
				if (this.tabList[this.tabCur].id != 1) {
					return
				}

				let arr = this.listData
					.map((item, i) => {
						return {
							index: i,
							level: item.level
						}
					})
					.filter(item => item.level > 2)
				let arr1 = null

				/* 如果可合成赏券数量大于限制数量 */
				if (arr.length > this.pageData.ke_hc_count) {
					/* 截取等于限制数量的赏券 */
					arr1 = arr.splice(0, this.pageData.ke_hc_count)
				}

				// console.log(arr)

				/* 如果截取了赏券数据 */
				if (arr1) {
					/* 由上往下依次选中 */
					arr1.map(item => {
						this.listData[item.index].choose = true
					})

					/* 清除到之前选中的赏券,防止多选 */
					arr.map(item => {
						this.listData[item.index].choose = false
					})

					/* 如果没有截取 */
				} else {
					/* 默认全部选中 */
					arr.map(item => {
						this.listData[item.index].choose = true
					})
				}

				this.confirmMix()
			},

			handelClick(item, i) {
				if (this.tabList[this.tabCur].id == 1) {
					if (item.level <= 2) {
						this.$c.toast({
							title: '该券不可合成'
						})
						return
					}

					let arr = this.listData.filter(item => item.choose)

					if (arr.length >= this.pageData.ke_hc_count && !item.choose) {
						this.$c.toast({
							title: `赏包最多可选${this.pageData.ke_hc_count}个`
						})
						return
					}

					item.choose = !item.choose
					this.confirmMix()

					return
				}

				this.$c.to({
					url: '/package/mine/coupon-detail',
					query: {
						id: item.id
					}
				})
			},

			tabChange(i) {
				this.tabCur = i
				this.listData = []

				this.mescroll.resetUpScroll()
				this.mescroll.scrollTo(0, 0)
			},

			/**
			 * @description: 获取列表
			 * @param {*} num
			 * @param {*} size
			 * @return {*}
			 */
			getList({
				num,
				size
			}) {
				this.req({
					url: 'coupon_list',
					data: {
						page: num,
						type: this.tabList[this.tabCur].id
					},
					Loading: true,
					success: res => {
						if (res.status == 1) {
							if (this.tabList[this.tabCur].id == 1) {
								res.data.data.data.map(item => {
									item.choose = false
								})
							}

							if (num == 1) {
								this.listData = []
							}

							this.pageData = res.data

							this.listData = this.listData.concat(res.data.data.data)
							this.mescroll.endByPage(
								res.data.data.data.length,
								res.data.data.last_page
							)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 400rpx;

		.hd-card {
			margin: 0 auto;
			width: 710rpx;
			height: 184rpx;
			box-sizing: border-box;
			padding: 28rpx 38rpx;
			border: 4rpx solid #FFFFFF;
			background: #ff873a;
			border-radius: 40rpx;

			>view:nth-child(1) {
				>image {
					width: 70rpx;
					height: 70rpx;
				}

				>view {
					>text:nth-child(1) {
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}

					>text:nth-child(2) {
						font-weight: 700;
						font-size: 36rpx;
						color: #FFFFFF;
					}
				}
			}

			.join {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;

				.icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}

			&-box {
				position: absolute;
				width: 140rpx;
				height: 140rpx;
				top: 24rpx;
				right: 64rpx;
				z-index: 1;
			}
		}

		.common_bg {}

		.tab {
			margin-top: 30rpx;
			white-space: nowrap;

			.tab-item {
				width: 154rpx;
				height: 53rpx;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				margin-left: 30rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;

				&:last-child {
					margin-right: 30rpx;
				}

				&.act {
					background: url($imgurl+'index/checkTab.png') no-repeat 0 0 / 100% 100%;

					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
					}
				}

				&.unact {
					background: url($imgurl+'index/uncheckTab.png') no-repeat 0 0 / 100% 100%;

					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #D6D6D6;
					}
				}
			}

			.common_bg {}
		}

		.list {
			padding: 10rpx 20rpx 0;

			.list-item {
				width: 710rpx;
				height: 186rpx;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 40rpx;
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				position: relative;
				background: #3B3941;
				border-radius: 10rpx;

				.check {
					position: absolute;
					z-index: 1;
					left: 30rpx;
					top: 30rpx;
					width: 32rpx;
					height: 32rpx;
				}

				.coin {
					width: 112rpx;
					height: 120rpx;
					position: relative;
					// z-index: 1;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					flex: 1;
					padding-left: 30rpx;

					.title {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ffffff;
					}

					.open-num {
						margin-top: 10rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ffffff;
					}

					.num {
						margin-top: 10rpx;

						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #dddddd;
					}
				}

				.share-btn {
					width: 180rpx;
					height: 60rpx;
					background: #894DD3;
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}

					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}

				.share-ing {
					display: flex;
					flex-flow: column nowrap;
					align-items: center;

					.share-num {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ffffff
					}

					.progress {
						width: 150rpx;

						/deep/.cmd-progress-inner {
							background-color: #F0F0F0;
						}
					}
				}

				.share-end {
					padding-right: 20rpx;

					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #dddddd;
				}
			}

			.common_bg {}
		}

		.mix-fixed {
			position: fixed;
			z-index: 10;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 370rpx;
			box-sizing: border-box;
			padding: 0 40rpx;

			.title {
				padding-top: 30rpx;

				text {
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 36rpx;
					color: #ff873a;
				}
			}

			.rule {
				margin-top: 20rpx;

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #dddddd;
			}

			.coin-num {
				margin-top: 30rpx;

				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}

			.btn-lsit {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;

				.btn {
					width: 150rpx;
					height: 80rpx;
					border: 2rpx solid #ff873a;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ff873a;
				}

				.color {
					width: 310rpx;
					border: 0;
					background: #ff873a;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					border: 2rpx solid #FFFFFF;
				}
			}
		}
	}
</style>