<template>
	<view>
		<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
			<view style="width: 100%;height: 15px;"></view>
			<scroll-view scroll-y>
				<view class="content">
					<view class="center">
						您收藏的
					</view>
					<block v-if="coinList.length > 0">
						<view class="center coin-title">
							硬币名称：{{coinList[curSwiperIndex].name}}
						</view>
						<view class="center" style="font-size: 14px;font-weight: 400;">
							ID：{{coinList[curSwiperIndex].id}}
						</view>

						<!-- 硬币swiper -->
						<z-swiper ref="zSwiper" v-model="coinList" style="padding-top: 15px;height: 180px;" @swiper="swiperCoin" :options="{slidesPerView : 2,centeredSlides : true, effect: 'coverflow'}">
							<z-swiper-item v-for="(item,index) in coinList" key="coin1">
								<view class="coin-item">
									<image :src="item.img" mode="heightFix"></image>
								</view>
							</z-swiper-item>
						</z-swiper>
						<!-- 产出地址 -->
						<view class="center coin-address">
							<view class="">
								产出地址
							</view>
							<view class="">
								{{coinList[curSwiperIndex].address}}
							</view>
						</view>

						<!-- 我的收藏 -->
						<view class="collect">
							<view class="collect-text">
								我的收藏
							</view>
							<scroll-view scroll-y style="height: 165px;">
								<view class="mycoin-list">
									<view v-for="(item,index) in coinList" key="coin2" class="center"
										style="flex-direction: column;">
										<view class="mycoin-warp" :class="{'mycoin-warp-check': curCoin.id === item.id}" @click="switchCoin(index, item)">
											<view class="mycoin-item">
												<image :src="item.img2" mode="widthFix"></image>
											</view>
											<image v-if="item.pay_status === 1" class="coinstar" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/mycoin-star.png" mode="widthFix"></image>
										</view>
										<view style="font-size: 8px;padding-bottom: 10px;padding-top: 5px;">
											{{dateFormat(item.date)}}
										</view>
									</view>
								</view>
							</scroll-view>
							<view class="btm-bck">
								<text v-if="JSON.stringify(curCoin) === '{}'" class="duihuan-disable">兑换奖励</text>
								<text v-else-if="curCoin.apply_status === 0" class="duihuan-available" @click="duihuan">兑换奖励</text>
								<text v-else class="duihuan-disable">{{curCoin.pay_status === 0 ? '已申请，审核后自动发放' : '已兑换'}}</text>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="null-collect center">
							暂无收藏品
						</view>
					</block>
				</view>
			</scroll-view>
			<view style="position: absolute;bottom: 0;left: 0;width: 100%;display: flex;">
				<image style="width: 100%;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/bottom-bck.png" mode="widthFix"></image>
			</view>
		</touch-popup>
	</view>
</template>
<script>
	export default {
		name: 'mycoin',
		data() {
			return {
				curSwiperIndex: 0
			}
		},
		methods: {
			swiperCoin() {
				let that = this
				this.$refs.zSwiper.swiper.on("slideChange", (swiper) => {
					that.curSwiperIndex = swiper.activeIndex;
				})
			},
			slideTo(i) {
				this.$refs.zSwiper.swiper.slideTo(i, 1000, false)
			}
		}
	}
</script>
<script setup>
	const app = getApp()
	import {
		ref,
		defineExpose,
		computed,
		nextTick,
		getCurrentInstance
	} from 'vue'
	const {ctx}=getCurrentInstance()
	const popup = ref() // ref组件

	const coinList = ref([]);
	const curCoin = ref({});
	const test = () => {
		console.log('这里是setup test');
	}
	const switchCoin = (index, item) => {
		curCoin.value = item;
		ctx.slideTo(index);
	}
	const duihuan = () => {
		if (JSON.stringify(curCoin.value) === '{}') return;
		uni.request({
			url: app.globalData.requestUrl + '/api/user/coin/pay',
			data: {
				coin_id: curCoin.value.id
			},
			method: 'POST',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success: (res) => {
				if (res.data.code === 200) {
					uni.showToast({
						title: '已申请兑换奖励',
						icon: 'none'
					});
					curCoin.value.apply_status = 1;
					loadData();
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			}
		})
	}
	const dateFormat = (val) => {
		let d = new Date(val)
		return `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()}`
	}
	const loadData = (isOpen = false) => {
		if (isOpen) {
			uni.showLoading();
		}
		uni.request({
			url: app.globalData.requestUrl + '/api/user/coin/list',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success: (res) => {
				if (res.data.code === 200) {
					console.log(res.data)
					for (let i = 0; i < res.data.data.length; i++) {
						let coin = res.data.data[i]
						if (coin.type === 1) {
							coin.img = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/gold.png'
							coin.img2 = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/gold.png'
						} else if (coin.type === 2) {
							coin.img = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/silver.png'
							coin.img2 = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/silver.png'
						} else if (coin.type === 3) {
							coin.img = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/copper.png'
							coin.img2 = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/copper.png'
						}
						res.data.data[i] = coin
					}
					coinList.value = res.data.data;
					if (isOpen) {
						popup.value.open();
					}
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			complete() {
				if (isOpen) {
					uni.hideLoading();
				}
			}
		})
	}
	const open = () => {
		loadData(true);
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.duihuan-available {
		font-size: 13px;
		margin-right: 10px;
		background-image: linear-gradient(180deg, #C5FF99 0%, #3DFEB7 100%);
		-webkit-background-clip: text;
		color: transparent;
	}
	.duihuan-disable {
		font-size: 13px;
		margin-right: 10px;
		color: #FFFFFF80;
	}
	
	.coinstar {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 18px !important;
		height: auto;
	}
	.mycoin-item image {
		width: 38px;
	}
	.mycoin-warp {
		width: 58px;
		height: 58px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 16px;
		position: relative;
	}
	.mycoin-warp-check {
		background: linear-gradient(315deg, #00EADC 0%, #75FF83 100%);;
	}
	.mycoin-item {
		background-color: #fff;
		width: 52px;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 14px;
		flex-direction: column;
	}

	.mycoin-list {
		padding: 5px 30px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.btm-bck {
		width: 100%;
		height: 32px;
		background-color: #000;
		background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/collect-bottom-bck.png') no-repeat;
		background-size: 180rpx;
		background-color: #000;
		background-position: left 0 bottom 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.collect-text {
		font-weight: bold;
		font-size: 14px;
		padding: 10px 15px;
	}

	.collect {
		border-radius: 20px;
		overflow: hidden;
		margin: 0 15px;
		display: flex;
		flex-direction: column;
		background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/collect-bck.png') no-repeat,
			linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%);
		background-size: 550rpx;
		background-position: right 0 top 0;
	}

	.coin-address {
		padding: 15px;
		font-size: 14px;
		display: flex;
		flex-direction: column;
	}

	.coin-item image {
		height: 180px;
	}

	.coin-item {
		display: flex;
		justify-content: center;
	}

	.coin-title {
		font-size: 22px;
		font-weight: 700;
		margin-top: 5px;
	}

	.content {
		height: calc(100% - 45px);
		background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/top-bck.png') no-repeat;
		background-position: top;
		background-size: 750rpx;
		padding: 15px 0;
	}

	scroll-view {
		height: calc(100% - 15px);
		z-index: 1;
		position: relative;
	}

	.null-collect {
		position: absolute;
		top: 50%;
		width: 100%;
	}
</style>