<template>
	<view class="reward">
		<view class="head">
			<view class="back" @tap="$navigateBack()">
				<text class="iconfont icon">&#xe771;</text>
			</view>
			<view class="title">
				商家打赏
			</view>
			<view class="history" @tap="toHistory">
				打赏记录
			</view>
		</view>
		<view class="head-placeholder"></view>
		<view class="list">
			<view class="cell">
				<view class="label">
					购买人ID
				</view>
				<view class="item">
					<input v-model="model.purchaserUsername" type="text" class="" :class="userOkClass"
						placeholder-class="input-placeholder" placeholder="请输入购买人id">
					<view class="extend">
						<view class="check-id" @tap="checkBuyerId">
							校验
						</view>
					</view>
				</view>
			</view>
			<view class="cell">
				<view class="label">
					昵称
				</view>
				<view class="item">
					<input v-model="user.nickname" type="text" class="input" placeholder-class="input-placeholder"
						placeholder="请输入昵称">
				</view>
			</view>
			<view class="cell">
				<view class="label">
					消费金额
				</view>
				<view class="item">
					<input v-model="model.money" type="number" class="input" placeholder-class="input-placeholder"
						placeholder="请输入消费金额">
					<view class="extend border-left">
						<view class="unit">
							元
						</view>
					</view>
				</view>
			</view>
			<view class="cell">
				<view class="label">
					打赏比例
				</view>
				<view class="item">
					<input v-model="model.rewardRatio" type="digit" class="input" @blur="rewardRatioCheck"
						placeholder-class="input-placeholder" placeholder="请输入打赏比例">
					<view class="extend border-left">
						<view class="unit">
							{{rewardRatioText}}%
						</view>
					</view>
				</view>
			</view>
		<!-- 	<view class="cell">
				<view class="label">
					短信验证码
				</view>
				<view class="item">
					<input v-model="model.code" type="text" class="input" placeholder-class="input-placeholder"
						placeholder="验证码">
					<view class="extend border-left">
						<sms :username="userInfo.username" :phone="userInfo.mobile" type-code="6" />
					</view>
				</view>
			</view> -->
		</view>
		<view class="reward-value">
			<view class="row">
				<view class="label">
					打赏金额：
				</view>
				<view class="value">
					{{rewardMoneyText}}
				</view>
			</view>
			<view class="row">
				<view class="label">
					打赏绿色积分：
				</view>
				<view class="value">
					{{greenPriceText}}
				</view>
			</view>
		</view>
		<view class="submit" @tap="beforeSubmit">
			确认打赏
		</view>
		<pay-password ref="payPassword" />

	</view>
</template>

<script>
	import url from "@/common/http/url.js"
	import PayPassword from "./components/pay-password.vue";
	import sms from "@/components/sms.vue"
	import { calcFn } from '@/utils/calc.js';
	import {
		mapMutations,
		mapState
	} from "vuex"
	export default {
		components: {
			PayPassword,
			sms
		},
		data() {
			return {
				greenPriceRate: null,
				userOk: null,
				user: {},
				model: {
					purchaserUsername: null,
					money: null,
					rewardRatio: null,
					mobile: null,
					code: null,
					payPassword: null
				},
			}
		},
		computed: {
			...mapState(["userInfo"]),
			rewardRatioText() {
				const rewardRatio = this.model.rewardRatio || 0;
				let value = parseFloat(parseFloat(rewardRatio * 100).toFixed(2));
				return value;
			},
			userOkClass() {
				const userOk = this.userOk;
				let okClass = "";
				if (userOk === null) {
					okClass = ""
				}
				if (userOk === true) {
					okClass = "input-ok"
				}
				if (userOk === false) {
					okClass = "input-unok"
				}
				return `input ${okClass}`
			},
			rewardMoneyValue() {
				const money = this.model.money || 0;
				const rate = this.model.rewardRatio || 0;
				return parseFloat(parseFloat(money * rate).toFixed(2))
			},
			rewardMoneyText() {
				const rewardMoneyValue = this.rewardMoneyValue || 0;
				return rewardMoneyValue;
			},
			greenPriceText() {
				const greenPriceRate = this.greenPriceRate || 0;
				return calcFn.divide(this.rewardMoneyValue, greenPriceRate).toFixed(6) <= 0 ? 0:calcFn.divide(this.rewardMoneyValue, greenPriceRate).toFixed(6)
				// return parseFloat(parseFloat(this.rewardMoneyValue / greenPriceRate).toFixed(4))
			}
		},
		onLoad() {
			this.loadGreenPrice()
		},
		mounted() {

		},
		methods: {
			// 查询绿色积分比例
			loadGreenPrice() {
				this.$http("get", url.store.getGreenPriceConfig).then(({
					code,
					data,
					msg
				}) => {
					if (code !== 200) return this.$msg(msg);
					console.log(data)
					this.greenPriceRate = parseFloat(data)
				})
			},
			// 校验打赏比例
			rewardRatioCheck() {
				const val = this.model.rewardRatio || 0;
				if (parseFloat(val) >= 1) {
					this.model.rewardRatio = 1;
				}
				if (parseFloat(val) <= 0) {
					this.model.rewardRatio = 0;
				}
			},
			// 打赏记录
			toHistory() {
				uni.navigateTo({
					url: "/pages/merchants/reward/history"
				})
			},
			// 校验购买人id
			checkBuyerId() {
				if (!this.model.purchaserUsername) return this.$msg("请输入购买人 id")
				this.$http("get", url.store.checkBuyerId, {
					username: this.model.purchaserUsername
				}).then(({
					code,
					data,
					msg
				}) => {
					console.log(data)
					if (code !== 200) return this.$msg(msg);
					this.user = data || {};
					if (data) {
						this.userOk = true;
					} else {
						this.userOk = false;
						this.$msg("未找到用户");
					}
				})
			},
			beforeSubmit() {
				const model = this.model;
				if (!this.user || !this.user.username) return this.$msg("请输入并校验购买人 ID");
				if (!model.money) return this.$msg("请输入消费金额");
				if (!model.rewardRatio) return this.$msg("请输入打赏比例");
				// if (!model.code) return this.$msg("请输入短信验证码");
				
				this.$refs.payPassword.show((password) => {
					this.model.payPassword = password;
					this.submit()
					
				})
				
			},
			submit() {
				uni.showLoading({
					title:'请等待...'
				})
				this.model.mobile = this.userInfo.mobile;
				console.log("进行打赏：", this.model)
				this.$httpJson("post", url.store.setReward, {...this.model}).then(({code, data, msg}) => {
					if (code !== 200) return this.$msg(msg);
					uni.hideLoading()
					this.$msg(msg)
					setTimeout(()=> {
						uni.navigateBack()
					},500)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.reward {
		.head {
			position: fixed;
			z-index: 10;
			left: 0;
			top: 0;
			right: 0;
			height: 88upx;
			background: #fff;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			color: #555;

			.back {
				width: 160upx;
				box-sizing: border-box;
				padding: 20upx;

				.icon {
					font-size: 50upx;
				}

				&:active {
					opacity: 0.8;
				}
			}

			.title {
				font-size: 32upx;
				color: #333;
			}

			.history {
				width: 160upx;
				font-size: 28upx;
				box-sizing: border-box;
				padding: 20upx;
				text-align: right;

				&:active {
					opacity: 0.8;
				}
			}
		}

		.head-placeholder {
			width: 100%;
			height: 88upx;
		}

		.list {
			padding: 20upx;

			.cell {
				padding: 20upx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 12upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20upx;

				.label {
					width: 140upx;
					font-size: 28upx;
					color: #333;
				}

				.item {
					width: calc(100% - 200upx);
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;

					.input {
						text-align: right;
						padding-right: 20upx;
						font-size: 28upx;
					}

					.input-ok {
						color: $uni-color-success;
					}

					.input-unok {
						color: $uni-color-error;
					}

					.input-placeholder {
						font-size: 28upx;
						color: #999;
					}

					.extend {
						box-sizing: border-box;
						padding-left: 20upx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						font-size: 28upx;
						color: #333;

						.check-id {
							box-sizing: border-box;
							width: 120upx;
							padding: 6upx 30upx;
							color: rgb(201, 55, 54);
							background-color: rgba(201, 55, 54, 0.2);
							border-radius: 40upx;

							&:active {
								opacity: 0.8;
							}
						}

						.unit {
							min-width: 40upx;
						}
					}

					.border-left {
						border-left: 2upx solid #d8d8d8;
					}
				}
			}
		}

		.reward-value {
			padding: 20upx;
			border: 4upx solid rgba(201, 55, 54, 0.2);
			background-color: rgba(201, 55, 54, 0.1);
			border-radius: 12upx;
			margin: 0 20upx;
			color: rgba(201, 55, 54, 1);

			.row {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 28upx;
				padding: 20upx 0;
			}
		}

		.submit {
			width: calc(100% - 40upx);
			height: 80upx;
			color: #fff;
			font-size: 28upx;
			border-radius: 100upx;
			background: linear-gradient(to right, rgb(235, 108, 78), rgb(250, 0, 17));
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 40upx 20upx 20upx 20upx;

			&:active {
				opacity: 0.8;
			}
		}
	}
</style>