<template>
	<view class="main">
		<!-- nav -->
		<navigation :bgTransparent=true>{{ i18n.CharityDetails }}</navigation>
		<view class="body">
			<view class="titleBody">
				<!-- 海报 -->
				<u--image class="img" :showLoading="true" :src="baseURL+detail.charityDetails.img" width="750rpx"
					height="762rpx"></u--image>
				<!-- 文章标题 -->
				<view class="title">{{detail.charityDetails.title}}</view>
			</view>

			<view class="contentBody">
				<view class="about">{{ i18n.About }}</view>
				<!-- 文字内容 -->
				<view class="content" v-html="detail.charityDetails.content"></view>
				<!-- 捐赠详情 -->
				<view class="Participants">
					<view class="title">{{ i18n.Participants }}</view>
					<!-- 进度条 -->
					<u-line-progress class="progressbar" :showText="false" :percentage="detail.charityDetails.percentage" activeColor="#00E8A2"
						height="32rpx">
					</u-line-progress>
					<!-- 百分比 -->
					<view class="progress">{{detail.charityDetails.percentage}}%</view>
					<!-- 捐赠用户头像 -->
					<view class="userIconList">
						<u--image v-for="(item, index) in detail.headerImgList" :key="index" class="userIcon" :showLoading="true"
							:src="baseURL+item.headImgPath" width="64rpx" height="64rpx"></u--image>
					</view>

				</view>
				<!-- 按钮 -->
				<u-button class="button" color="#00E8A2" throttleTime="500" @click="DonatePopupShow = true" :disabled="detail.charityDetails.status!='open'">
				{{detail.charityDetails.status!='open'?i18n.Closeddonation:i18n.DonateNow}}
				</u-button>

				<!-- DonateNow按钮通知弹出层 -->
				<u-popup class="DonatePopup" :show="DonatePopupShow" round="40rpx" mode="bottom"
					@close="DonatePopupShow = false" @open="DonatePopupShow = true" bgColor="#211F32">
					<view class="content">
						<view class="close" @click="DonatePopupShow = false"></view>
						<u--form class="form" :model="coinInfo" :rules="rules" ref="form1" errorType="toast">
							<!-- coin选择框 -->
							<u-form-item class="input-item" prop="coinCode" ref="item1">
								<u-input class="input" color="#fff" fontSize="32rpx"
									border="none" :placeholder="i18n.PleaseChooseCoin" :disabled="true">
								</u-input>
								<view class="selectCoinBtn" @click="USDTPopupShow = true">{{coinInfo.coinCode}}
								</view>
							</u-form-item>
							<view class="Available">{{ i18n.AvailableBlance }}:{{detail.userCapital}}{{" "}}{{detail.coins[0].enname}}</view>
							<!-- 数量 -->
							<u-form-item class="input-item" prop="amount" ref="item1">
								<u-input class="input" v-model="coinInfo.amount" color="#fff" fontSize="32rpx"
									border="none" :placeholder="i18n.Quantity">
								</u-input>
							</u-form-item>
							<!-- 密码 -->
							<u-form-item class="input-item" prop="payPassword" ref="item1">
								<u-input class="input" v-model="coinInfo.payPassword" color="#fff" fontSize="32rpx"
									border="none" :placeholder="i18n.WithdrawalPassword">
								</u-input>
							</u-form-item>

						</u--form>
						<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="DonatePopupDisabled"
							@click="donate" :throttleTime="500">{{ i18n.DonateNow }}
						</u-button>
					</view>
				</u-popup>

				<!-- USDT按钮通知弹出层 -->

				<u-popup class="USDTPopup" :show="USDTPopupShow" round="40rpx" mode="bottom"
					@close="USDTPopupShow = false" @open="USDTPopupShow = true" bgColor="#211F32">
					<view class="content">
						<view class="close" @click="USDTPopupShow = false"></view>
						<scroll-view scroll-y="true" style="height: 580rpx;" scroll-with-animation="true"
							@touchmove.stop.prevent="">
							<radio-group class="radioGroup"  v-model="radioValue">
								<label class="checkBox" v-for="(item, index) in detail.coins" :key="index" @click="radioChange(item)">
									<view class="icon">
										<u-icon :name="baseURL+'/coins/'+item.enname+'.png'" size="52rpx" width="52rpx"></u-icon>
									</view>
									<view class="iconName">
										<view class="top">{{item.enname}}</view>
										<view class="bottom">{{item.useCapital}}{{" "}}{{item.code}}</view>
									</view>
									<radio color="#00E8A2" shape="square" :checked="coinInfo.coinCode==item.enname"></radio>
								</label>

							</radio-group>
						</scroll-view>

						<u-button class="button" color="#00E8A2" throttleTime="500" @click="USDTPopupShow = false">OK
						</u-button>
					</view>
				</u-popup>


			</view>

		</view>


	</view>
</template>

<script>
	import UButton from '../../uview-ui/components/u-button/u-button'
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	import md5 from 'js-md5'
	export default {
		name: "charityDetails",
		data() {
			return {
				id:'',
				baseURL:'',
				DonatePopupShow: false,
				USDTPopupShow: false,
				coinInfo: {
					amount:null,
					coinCode:null,
					payPassword:null,
				},
				rules: {
					
				},
				radioValue: '',
				detail:{},
			};
		},
		computed: {
			i18n() {
				return this.$t("charity");
			},
			DonatePopupDisabled() {
				if (this.coinInfo.amount && this.coinInfo.coinCode && this.coinInfo.payPassword) {
					return false
				} else {
					return true
				}
			}
		},
		onLoad(res) {
			this.baseURL = constant.BASE_URL
			this.id=res.id
			this.getDetail(this.id)
			// console.log(this.$t('login.emailInputMessage'));
		},
		onShow() {},
		methods: {
			// 捐赠
			donate() {
				if(this.coinInfo.amount>this.detail.userCapital){
					uni.$u.toast(this.$t("login").Insufficient)
					return;
				}
					let coinInfo = {
					charityId:this.detail.charityDetails.id,
					amount:this.coinInfo.amount,
					coinCode:this.coinInfo.coinCode2,
					payPassword:md5(this.coinInfo.payPassword),
					}
					api.charitySubmit(coinInfo).then(res => {
					      uni.$u.toast(this.$t("login").Donationsucceeded)
						  setTimeout(()=>{
							  this.getDetail(this.id)
							  this.DonatePopupShow = false
						  },600)
						 
					})
				
			},
			radioChange(e) {
				this.coinInfo.coinCode=e.enname
				this.coinInfo.coinCode2=e.code
			},
			getDetail(id) {
				api.showCharityDetails({
					charityId:id
				}).then(res => {
                    this.detail=res;
					this.coinInfo.coinCode=this.detail.coins[0].enname
					this.coinInfo.coinCode2=this.detail.coins[0].code
				})
			},
		},
		components: {
			UButton
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-input{
		background: #323045 !important;
	}
	.main {

		.body {
			overflow: hidden;

			.titleBody {
				position: relative;
				height: 762rpx;

				.title {
					position: absolute;
					bottom: 48rpx;
					font-size: 40rpx;
					font-weight: 800;
					z-index: 20;
					margin: 0 48rpx;
				}
			}

			.contentBody {
				padding: 0 48rpx;

				.about {
					margin: 32rpx 0;
					font-size: 32rpx;
					color: #A2A0A8;
				}

				.content {
					font-size: 24rpx;
					color: #A1A0A8;
					margin-bottom: 48rpx;
				}

				.Participants {
					background: #211F32;
					border-radius: 32rpx;
					padding: 32rpx;

					.title {
						font-size: 28rpx;
						height: 40rpx;
						line-height: 40rpx;
						margin-bottom: 20rpx;
						color: #A1A0A8;
					}

					// .progressBody{
					.progressbar {
						vertical-align: top;
						display: inline-block;
						width: 426rpx;
						margin: 8rpx 0;
					}

					.progress {
						margin-left: 20rpx;
						display: inline-block;
						width: 144rpx;
						height: 48rpx;
						line-height: 48rpx;
						font-size: 32rpx;
					}


					.userIconList {
						height: 104rpx;

						.userIcon {
							overflow: hidden;
							border-radius: 64rpx;
							display: inline-block;
							margin-left: -20rpx;
							margin-top: 34rpx;

							&:first-child {
								margin-left: 0;
							}

						}
					}


				}

				.button {
					margin-top: 64rpx;
					margin-bottom: 120rpx;
					height: 112rpx;
					line-height: 112rpx;
					border-radius: 32rpx;
					font-size: 32rpx;
					color: #15141F !important;
				}

				.DonatePopup {
					.content {
						height: 844rpx;

						/deep/.u-button--disabled {
							background-color: #A1A0A8 !important;
							border-color: #A1A0A8 !important;
						}

						.close {
							margin: 48rpx 346rpx;
							width: 58rpx;
							height: 20rpx;
							background-image: url(../../static/charity/Turn.png);
							background-repeat: no-repeat;
							background-size: 58rpx 20rpx;
						}

						.form {
							font-size: 32rpx;
							margin: 0 32rpx;

							.Available {
								height: 44rpx;
								margin: 32rpx 0;
								font-size: 28rpx;
							}

							.input-item {
								overflow: hidden;
								height: 124rpx;
								line-height: 124rpx;
								background: #323045;
								margin-bottom: 48rpx;
								border-radius: 32rpx;
								padding: 0 40rpx;

								/deep/.u-form-item__body {
									padding: 0;
								}

								.input {
									height: 124rpx;
								}

								.selectCoinBtn {
									position: relative;
									width: 150rpx;
									height: 54rpx;
									right: 0rpx;
									line-height: 56rpx;
									font-size: 36rpx;
									padding: 0;
									color: #fff;

									&::after {
										display: block;
										position: absolute;
										content: '';
										background-image: url(../../static/charity/ic_ma_arrow_down.png);
										background-repeat: no-repeat;
										background-size: 32rpx;
										width: 32rpx;
										height: 32rpx;
										top: 12rpx;
										right: 10rpx;
									}
								}
							}
						}

						.button {
							width: 654rpx;
							margin: 0 48rpx;
						}

					}

				}

				.USDTPopup {
					.content {
						height: 844rpx;

						.close {
							margin: 48rpx 346rpx;
							width: 58rpx;
							height: 20rpx;
							background-image: url(../../static/charity/Turn.png);
							background-repeat: no-repeat;
							background-size: 58rpx 20rpx;
						}

						.radioGroup {
							height: 580rpx;

							.checkBox {
								height: 84rpx;
								width: 670rpx;
								display: flex;
								align-items: center;
								margin: 0 40rpx 32rpx;

								.icon {
									width: 84rpx;
									height: 84rpx;
									border-radius: 20rpx;
									overflow: hidden;
									display: inline-block;
									box-sizing: border-box;
									background: #323045;
									padding: 16rpx;
									margin-right: 20rpx;
								}

								.iconName {
									width: 520rpx;

									.top {
										font-size: 32rpx;
										color: #fff;
									}


									.bottom {
										font-size: 24rpx;
										color: #A1A0A8;
									}


								}

								/deep/.uni-radio-input {
									width: 48rpx;
									height: 48rpx;
									border-radius: 16rpx;
									background: #323045;
								}

								/deep/.uni-radio-input-checked::before {
									font-size: 36rpx;
								}
							}

						}

						.button {
							width: 654rpx;
							margin: 40rpx 48rpx;
						}

					}

				}
			}




		}

	}
</style>
