<template>
	<view class="main">
		<feedback :showQa="showQa" @closeFeed ='closeFeed'/>
		<navBar :navTitle="'消息'" :hasRight="true" :stickyShow="stickyShow" :currentPage="'pages/mine/index'" :backBackGroundColor="'#699A70'" @clickRight="clickRight"/>
		<view class="list">
			<scroll-view style="width: 100%; height: calc(100vh - 200upx); position: relative" scroll-y="true">
				<view
					class="card"
					v-for="item in indexList"
					:key="item.Uuid"
					:style="!item.Clicked ||!item.Claimed?  'background-color: #E4E4E4;':'background-color: #FFFFFF;' "
					@click="openKt(item)"
				>
					<view class="avtor"><image class="avtimg" :src="item.PicUrl"></image></view>
					<view class="item">
						<view class="item-txt">
							<view v-if="item.DropOrAnnounce === 0" class="kt">{{$t('airdrop')}}</view>
							<view v-else class="gonggao">{{$t('announcement')}}</view>
							<view v-if="item.DropOrAnnounce === 0" class="title">{{ item.Series }}</view>
							<view v-else class="title">{{ item.Title }}</view>
							<image
								v-if="!item.Clicked&& item.DropOrAnnounce === 0"
								class="dian"
								src="../../../static/image/mine/dian.png"
							></image>
						</view>
						<view class="item-txt" style="margin-top: 10upx">
							<view v-if="item.DropOrAnnounce === 0" class="content">{{ item.Desc }}</view>
							<view v-else class="content" v-html="item.Content"></view>
							<!-- <view style="font-size: 12upx;color: rgba(255, 255, 255, 0.3);">{{ item.TimeFormat }}</view> -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup :show="showKt" mode="center" @close="closePop" bgColor="transparent">
			<view class="popupLocale-box">
				<view style="padding-left: 190upx; padding-right: 190upx">
					<view v-if="!this.isMsgDetail" class="title">{{$t('airdrop')}}</view>
					<view v-else style="background-color: #EDC466;" class="title">{{$t('announcement')}}</view>
				</view>
				<view class="item"><image style="width: 600upx; height: 600upx" :src="listItem.PicUrl"></image></view>
				<view
					style="
            color: #000;
            margin-top: 10upx;
            margin-bottom: 10upx;
            font-size: 40upx;
          "
				>
					{{ this.isMsgDetail ? listItem.Title : listItem.Collection }}
				</view>
				<view v-if="!this.isMsgDetail" style="color: #6c6c6c; margin-top: 10upx; margin-bottom: 10upx">
					{{ listItem.Desc }}
				</view>
				<view v-else style="color: #6c6c6c; margin-top: 10upx; margin-bottom: 10upx" v-html="listItem.Content"></view>
			</view>
			<view style="display: flex">
				<u-button
					v-if="listItem.Claimed === 0 && !this.isMsgDetail"
					:text="$t('to.accept')"
					
					@click="recive"
					style="width: 460rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;background:  #699A70;
		  border: none;
		  color:#fff;"
				></u-button>
				<u-button
					v-if="listItem.Clicked === 0  && this.isMsgDetail"
					:text="$t('read')"
					@click="readMsg"
					style="
				  width: 460rpx;
				  height: 56rpx;
				  border-radius: 40rpx;
				  margin-top: 30rpx;
				  background:  #699A70;
				  border: none;
				  color:#fff;
				"
				></u-button>
				<u-button
					v-if="listItem.Clicked === 1 && this.isMsgDetail"
					:text="$t('close')"
					
					@click="closePop"
					style="
				  width: 460rpx;
				  height: 56rpx;
				  border-radius: 40rpx;
				  margin-top: 30rpx;
				  background: #699A70;
				  border: none;
				  color:#fff;
				"
				></u-button>
				<u-button
					v-if="listItem.Claimed === 1 && !this.isMsgDetail"
					:text="$t('close')"
					
					@click="closePop"
					style="width: 460rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;background:  #699A70;
		  border: none;
		  color:#fff;"
				></u-button>
			</view>
		</u-popup>
	</view>
</template>
<script>
import feedback from '../feedback/feedback.vue';

export default {
	components:{
		feedback
	},
	data() {
		return {
			showKt: false,
			stickyShow: false,
			indexList: [],
			listItem: {},
			isMsgDetail: false,
			showQa:false
		};
	},
	onLoad() {
		this.loadmore();
	},
	onPageScroll(e) {
		this.stickyShow = e.scrollTop > 5 ? true : false;
	},
	methods: {
		closePop() {
			this.showKt = false;
			this.loadmore();
			this.canScroll();
		},
		// 打开空头详情
		async openKt(item) {
			this.listItem = item;
			// console.log(this.listItem);
			if (this.listItem.DropOrAnnounce === 0) {
				this.isMsgDetail = false;
				await this.clickDetail();
			} else {
				this.isMsgDetail = true;
			}

			this.showKt = true;
			this.stopScroll();
		},
		// 阅读
		async readMsg(){
			let data = {
				Uuid: this.listItem.Uuid,
				Clicked: this.listItem.Clicked
			};
			let res = await this.$api.airdrop.readMsg(data);
			if (res.status === 0) {
				this.showKt = false;
				this.canScroll();
				this.loadmore();
			} else {
				uni.hideLoading();
				uni.$u.toast(res.msg);
			}
		},
		// 查看详情
		async clickDetail() {
			let data = {
				Collection: this.listItem.Collection,
				Desc: this.listItem.Desc,
				PicUrl: this.listItem.PicUrl,
				Series: this.listItem.Series,
				Uuid: this.listItem.Uuid,
				Clicked: this.listItem.Clicked
			};
			let res = await this.$api.airdrop.collectionSepcific(data);
			if (res.status === 0) {
			} else {
				uni.hideLoading();
				uni.$u.toast(res.msg);
			}
		},
		// 加载空投列表
		async loadmore() {
			let res = await this.$api.airdrop.collectionList();
			if (res.status === 0) {
				this.indexList = res.data.Data;
			} else {
				uni.hideLoading();
				uni.$u.toast(res.msg);
			}
		},

		// 接受1
		async recive() {
			let data = {
				UserId: uni.getStorageSync('mall-user-info').ID,
				Uuid: this.listItem.Uuid
			};
			
			let res = await this.$api.airdrop.getCollection(data);
			if (res.status === 0) {
				this.step2(this.listItem.CollectionUid);
			} else {
				uni.hideLoading();
				uni.$u.toast(res.msg);
			}
		},
		// 接受1
		async step2(id) {
			let data = {
				collectionsUID: id,
				userAirdropUuid: this.listItem.Uuid
			};
			let res = await this.$api.airdrop.getCollectionStepTwo(data);
			if (res.status === 0) {
				this.showKt = false;
				this.canScroll();
				this.loadmore();
			} else {
				uni.hideLoading();
				uni.$u.toast(res.msg);
			}
		},
		clickRight() {
			this.showQa = true;
		},
		closeFeed(isShow){
			this.showQa = isShow
		}
	}
};
</script>

<style lang="scss">
page {
	background: #F5F5F5;
	// background-size: 100% 100%;
	// background-attachment: fixed;
	height: 100vh;
	box-sizing: border-box;
}
.main {
	height: 100%;
	padding: 36upx 32upx;
	.list {
		height: 100%;
	}
	// .u-popup /deep/ .u-transition {
	// 	background-color: rgba(0, 0, 0, 0.9) !important;
	// }
	.popupLocale-box {
		background: rgba(255, 255, 255, 0.8);
		width: 582rpx;
		overflow: hidden;
		padding: 30rpx 42rpx;
		.title {
			// background-color: rgba(88, 146, 255, 0.6);
			background: rgba(105,154,112, 0.6);
			font-size: 40rpx;

			border-radius: 40upx;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.u-button {
			width: 260rpx;
			height: 56rpx;
			border-radius: 40rpx;
		}
		.item {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.card {
		width: 100%;
		height: 200upx;
		border-radius: 8upx;
		text-align: center;
		margin-bottom: 20upx;
		display: inline-flex;
		// background: #FFFFFF;
		.avtor {
			width: 220upx;
			margin-top: 30upx;
			height: 100%;
			display: block;
			align-items: center;
			.avtimg {
				width: 144upx;
				height: 144upx;
			}
		}
		.item {
			flex: 1;
			height: 100%;
			padding-right: 20upx;
			position: relative;
			.happy {
				position: absolute;
				width: 181upx;
				height: 176upx;
				right: 0;
			}
			.item-txt {
				margin-top: 30upx;
				display: inline-flex;
				width: 100%;
				align-items: center;
				position: relative;
				.kt {
					padding: 4upx 16upx ;
					// background-color: #558bf2;
					background: #699A70;
					border-radius: 30upx;
					margin-right: 10upx;
					font-size: 24upx;
				}
				.gonggao {
					padding: 4upx 16upx ;
					background-color: #edc466;
					border-radius: 30upx;
					margin-right: 10upx;
					font-size: 24upx;
				}
				.title {
					width: 290upx;
					font-size: 34upx;
					line-height: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					word-break: break-all;
					color: #434343;
					text-align: left;
					-webkit-box-orient: vertical;
				}
				.dian {
					width: 40upx;
					height: 40upx;
					position: absolute;
					right: 20upx;
				}
				.content {
					width: 300upx;
					height: 80upx;
					word-break: break-all;
					text-align: left;

					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行
					-webkit-box-orient: vertical;
					color: #878787;
				}
			}
		}
	}
}
</style>
