<template>
	<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="hiddenPopup">
		<view class="order-box">
			<view class="avatar-box">
				<u-image width="140" height="140" border-radius="20" :src="clerk.avatar"></u-image>
				<view class="close-span" @click="hiddenPopup">
					<u-icon name="close-circle" color="#98a2a1" size="50"></u-icon>
				</view>
			</view>
			<scroll-view style="height: 700rpx;" scroll-y>
				<view class="page-box">
					
					<view class="form-box">
						
						<view class="input-box">
							<view class="tag-box">
								<view class="name">服务类型</view>
							</view>
							<view class="tab-span">
								<!-- <view @click="changeTab(0)" class="btn" :class="form.rewardType == 0 ? 'active' : ''">赠送</view> -->
								<view @click="changeTab(1)" class="btn" :class="form.rewardType == 1 ? 'active' : ''">赠礼</view>
							</view>
						</view>
						
						
						<view class="input-box" v-if="form.rewardType == 0">
							<view class="tag-box">
								<view class="name">打赏金额</view>
							</view>
							<view class="input-span">
								<u-input v-model="payMoney" type="number" :placeholder-style="`fontSize: 24rpx; color: #cbced5;`" placeholder="请输入赠送金额"></u-input>
							</view>
						</view>
						
						<view class="input-box" v-if="form.rewardType == 1">
							<view class="tag-box">
								<view class="name">赠送礼物</view>
							</view>
							<view class="select-span" @click="openGift">
								<view v-if="gift.id > 0">已选【{{gift.name}}】</view>
								<view v-else>点击选择礼物</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						
						<view class="input-box" v-if="gift.id > 0">
							<view class="tag-box">
								<view class="name">礼物数量</view>
							</view>
							<view class="step-span">
								<img class="img" :src="gift.img"></img>
								<tui-numberbox iconBgColor="var(--ui-BG-Main)" iconColor="#fff" backgroundColor="#fff" :min="1" :value="form.count" @change="change"></tui-numberbox>
							</view>
						</view>
						
						<view class="input-box">
							<view class="textarea-box">
								<view class="name">心动留言</view>
							</view>
							<view class="textarea-span">
								<u-input v-model="form.msg" type="textarea" :placeholder-style="`fontSize: 24rpx; color: #cbced5;`" placeholder="请输入心动留言"></u-input>
							</view>
						</view>
						
						<view class="input-box" v-if="isPass">
							<view class="tag-box">
								<view class="name">您的微信号</view>
							</view>
							<view class="input-span">
								<u-input v-model="form.weixin" :placeholder-style="`fontSize: 24rpx; color: #cbced5;`" placeholder="请输入正确的微信号"></u-input>
							</view>
						</view>
						
					</view>
					
				</view>
			</scroll-view>
			<view class="bottom-box2" v-if="form.rewardType == 0">
				<view class="btn-box">
					<view class="pay-btn" @click="confirm">立即赠送</view>
				</view>
			</view>
			
			<view class="bottom-box" v-if="form.rewardType == 1">
				<view class="price-box">
					<text>总价：</text>
					<text class="price">{{ fen2yuan(gift.money*form.count) }}</text>
					<text>钻石</text>
				</view>
				<view class="btn-box">
					<view class="pay-btn" @click="confirm">立即赠送</view>
				</view>
			</view>
		</view>
	</tui-bottom-popup>
	
	<gift-list :showPop="giftFlag" :dataList="giftList" v-model="gift" @close="closeGift"></gift-list>
</template>

<script>
	import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
	import tuiNumberbox from "@/components/thorui/tui-numberbox/tui-numberbox.vue"
	import GiftList from '@/pages/clerk/detail/components/giftList.vue';
	import RewardApi from '@/sheep/api/worker/reward'; 
	import sheep from '@/sheep';
	export default {
		components: {
			tuiBottomPopup,
			tuiNumberbox,
			GiftList,
		},
		props: {
			
		},
		data() {
			return { 
				popupShow: false,
				
				gift: {
					id: -1,
					money: 0,
				},
				
				giftFlag: false,
				
				giftList: [],
				
				payMoney: '',
				
				form: {
					rewardType: 1,
					count: 1,
					giftId: -1,
					money: '',
					weixin: '',
					msg: '',
					payMoney: '',
				},
				
	
			}
		},
		computed: {
			clerk() {
				return sheep.$store('sys').clerk;
			},
			userInfo() {
				return sheep.$store('user').userInfo;
			},
			isPass() {
				return sheep.$store('user').tradeConfig.weixinEnabled;
			},
		},
		methods: {
			//调用此方法显示弹层
			showPopup() {
				this.form.weixin = this.userInfo.weixin;
				RewardApi.getGiftList().then(res => {
					this.giftList = res.data;
					this.popupShow = true
				});
			},
			showGiftPopup(e) {
				this.gift = e;
				this.form.rewardType = 1;
				this.form.weixin = this.userInfo.weixin;
				RewardApi.getGiftList().then(res => {
					this.giftList = res.data;
					this.popupShow = true
				});
			},
			hiddenPopup() {
				this.popupShow = false
			},
			change(e) {
				this.form.count = e.value
			},
			changeTab(e) {
				this.form.rewardType = e;
				this.gift = {
					id: -1,
					money: 0,
				};
			},
			fen2yuan(price) {
			  var f = 0;
			  var p = (price / 100.0).toFixed(0);
			  var p1 = (price / 100.0).toFixed(1);
			  var p2 = (price / 100.0).toFixed(2);
			  if(p*100 == price){
				f = 0;  
			  }else if(p1*100 == price){
				  f = 1;
			  }else if(p2*100 == price){
				  f = 2;
			  }
			  return (price / 100.0).toFixed(f)
			},
			yuan2fen(price) {
			  return (price * 100.0).toFixed(0)
			},
			openGift() {
				this.giftFlag = true;
			},
			closeGift() {
				this.form.count = 1;
				this.giftFlag = false;
			},
			confirm() {
				if(this.isPass && !this.form.weixin){
					sheep.$helper.toast('请输入正确的微信');
					return;
				}
				if(this.form.rewardType == 0){
					this.form.payMoney = this.yuan2fen(this.payMoney);
					if(this.form.payMoney < 1){
						sheep.$helper.toast('请输入打赏金额');
						return; 
					}
				}else{
					this.form.giftId = this.gift.id;
					if(this.form.giftId < 1){
						sheep.$helper.toast('请选择打赏礼物');
						return;
					}
				}
				this.form.workerClerkId = this.clerk.id;
				RewardApi.createRewardOrder(this.form).then(res => {
					// 跳转到支付页面
					this.$u.route({
						url: 'pages/pay/reward/index',
						params: {
							id: res.data.payOrderId,
						}
					});
				});
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-box {
		padding: 10px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.close-span {
			position: absolute;
			right: 5px;
			top: 5px;
			width: 70rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.page-box {
		padding: 15px;
		padding-bottom: 10px;
		
		.form-box {
			margin-bottom: 10px;
			
			.tag-box {
				display: flex;
				align-items: center;
				width: 180rpx;
				
				.name {
					font-size: 24rpx;
					color: #333;
					margin-left: 5px;
				}
			}
			
			.textarea-box {
				height: 20px;
				display: flex;
				width: 180rpx;
				
				.name {
					font-size: 24rpx;
					color: #333;
					margin-left: 5px;
				}
			}
			
			.input-box {
				display: flex;
				margin-bottom: 20px;
				align-items: center;
				
				.input-span {
					background-color: #f6f6f6;
					margin-left: 15px;
					display: flex;
					flex: 1;
					padding: 0 12px;
					border-radius: 10rpx;
				}
				
				.select-span {
					font-size: 24rpx;
					background-color: #f6f6f6;
					margin-left: 15px;
					display: flex;
					flex: 1;
					padding: 12px 12px;
					border-radius: 10rpx;
					color: #aaaaaa;
					justify-content: space-between;
				}
				
				.tab-span {
					display: flex;
					flex: 1;
					padding: 0 12px;
					align-items: center;
					
					.btn {
						background-color: #f6f6f6;
						font-size: 24rpx;
						padding: 7px 0;
						border-radius: 40px;
						min-width: 120rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 15px;
					}
					
					.active {
						color: #fff;
						background-color: var(--ui-BG-Main);
					}
				}
				
				.textarea-span {
					background-color: #f6f6f6;
					margin-left: 15px;
					flex: 1;
					padding: 2px 12px;
					border-radius: 10px;
				}
				
				.step-span {
					display: flex;
					justify-content: space-between;
					flex: 1;
					padding-left: 12px;
					align-items: center;
					
					.img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 100%;
						box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
					}
				}
			}
		}
	}

	.bottom-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		box-shadow: 0 0 6px 0 #ccc;
		
		.price-box {
			color: #fb932c;
			font-size: 28rpx;
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.price {
				margin-right: 5px;
			}
		}
		
		.btn-box {
			width: 50%;
			padding-left: 15px;
			
			.pay-btn {
				background-color: var(--ui-BG-Main);
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 40px;
				font-size: 28rpx;
				height: 70rpx;
			}
		}
		
	}
	
	.bottom-box2 {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 15px;
		box-shadow: 0 0 6px 0 #ccc;
		
		.price-box {
			color: #fb932c;
			font-size: 28rpx;
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.price {
				margin-right: 5px;
			}
		}
		
		.btn-box {
			width: 50%;
			
			.pay-btn {
				background-color: var(--ui-BG-Main);
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 40px;
				font-size: 28rpx;
				height: 70rpx;
			}
		}
		
	}
	
</style>