<template>
	<view class="content">
		<su-navbar color="var(--ui-BG-Main)" :title="title" statusBar></su-navbar>
		
		<view :style="{paddingTop: paddingTop + 'px', paddingBottom: paddingBottom + 'rpx'}">
			<view class="game-card">
				<view class="title">
					<u-icon name="tags" color="#f5736a" size="34"></u-icon>
					<view class="name">达人性别</view>
				</view>
				
				<view class="sex-option">
					<view class="sex-tab" @click="sexChange(1)">
						<view class="img-span">
							<img v-if="form.sex == 1" class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/16d050d0b229f12a8997a8118ca815c936bdb9b580db48ab8b2737181ca8518a.png"></img>
							<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/15c4eb12397fb3374be6e8bf38854b708abb09f61fb076eaa0c23d5f92cc9583.png"></img>
							<view class="sex-ok" v-if="form.sex == 1">
								<u-icon name="checkmark-circle-fill" color="#fe8497" size="34"></u-icon>
							</view>
						</view>
						<view class="name">小姐姐</view>
					</view>
					
					<view class="sex-tab" @click="sexChange(0)">
						<view class="img-span">
							<img v-if="form.sex == 0" class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/74e49dd19affb2c8016df4805d3947bab3a93af83236e4f875b5ea18bf57d8b3.png"></img>
							<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d0757757a5b4c0559f1bc1d373ab983902bd056bda7ca4be6c2fa04553b4665d.png"></img>
							<view class="sex-ok" v-if="form.sex == 0">
								<u-icon name="checkmark-circle-fill" color="#6497f8" size="34"></u-icon>
							</view>
						</view>
						<view class="name">小哥哥</view>
					</view>
					
				</view>
				
				<view class="title">
					<u-icon name="tags" color="#e475e5" size="34"></u-icon>
					<view class="name">达人等级</view>
				</view>
				
				<view class="level-option">
					<view @click="levelChange(option)" class="tab" :class="option.id == form.workerClerkLevelId ? 'active' : ''" v-for="(option,t) in levelList">{{option.name}}</view>
				</view>
				
				<game-box v-model="game" :optionList="goodsList"></game-box>
				
				<view class="input-box">
					<view class="title">
						<u-icon name="tags" color="#e475e5" size="34"></u-icon>
						<view class="name">购买数量</view>
					</view>
					<view class="step-span">
						<tui-numberbox iconBgColor="var(--ui-BG-Main)" iconColor="#fff" backgroundColor="#fff" :min="1" :value="form.num" @change="change"></tui-numberbox>
					</view>
				</view>
				
				<view class="input-box">
					<view class="title">
						<u-icon name="tags" color="#e475e5" size="34"></u-icon>
						<view class="name">排除下单过的达人</view>
					</view>
					<view class="step-span">
						<u-switch active-color="var(--ui-BG-Main)" size="40" v-model="form.blind"></u-switch>
					</view>
				</view>
				
			</view>
			
			
			<view class="bottom-box">
				<view class="price-box">
					<text>总价：</text>
					<text class="price">{{ fen2yuan(game.price*form.num) }}</text>
					<text>钻石</text>
				</view>
				<view class="btn-box">
					<view class="pay-btn" @click="confirm">立即下单</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import gameBox from '@/pages/worker/blind/components/gameBox.vue';
	import tuiNumberbox from "@/components/thorui/tui-numberbox/tui-numberbox.vue"
	import ClerkApi from '@/sheep/api/worker/clerk'; 
	import sheep from '@/sheep';
	export default {
		components: {
			gameBox,
			tuiNumberbox,
		},
		props: {
			title: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				paddingTop: 0,
				paddingBottom: 200,
				height: 0,
				
				form: {
					num: 1,
					goodsId: -1,
					price: 0,
					sex: 2,
					workerClerkLevelId: 0,
					blind: false,
				},
				
				game: {
					goodsId: -1,
					price: 0,
				},
				
				goodsList: [],
				
				levelList: [
					{
						id: 0,
						name: '金牌',
					},
					{
						id: 1,
						name: '银牌',
					},
					{
						id: 2,
						name: '铜牌',
					},
				],
			}
		},
		created() {
			this.initData();
		},
		methods: {
			initData() {
				ClerkApi.getClerkBlind().then(res => {
					this.goodsList = res.data.goodsList;
					this.levelList = res.data.clerkLevelList;
				});
			},
			sexChange(e) {
				this.form.sex = e;
			},
			levelChange(e) {
				this.form.workerClerkLevelId = e.id;
			},
			change(e) {
				this.form.num = e.value
			},
			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)
			},
			confirm() {
				this.form.goodsId = this.game.goodsId,
				this.form.price = this.game.price*this.form.num
				if(this.form.sex > 1) {
					sheep.$helper.toast('请选择店员性别');
					return;
				}
				if(this.form.workerClerkLevelId < 1) {
					sheep.$helper.toast('请选择店员等级');
					return;
				}
				if(this.form.goodsId < 0) {
					sheep.$helper.toast('请选择服务类型');
					return;
				}
				if(this.form.price < 1) {
					sheep.$helper.toast('价格不能为0');
					return;
				}
				var data = {
					workerClerkLevelId: this.form.workerClerkLevelId,
					sex: this.form.sex,
					blind: this.form.blind,
					items : [
						{
							skuId: this.form.goodsId, 
							count: this.form.num,
						},
					]
				}
				
				sheep.$router.go('/pages/order/blind/confirm',{data: JSON.stringify(data)});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.game-card {
		background-color: #fff;
		padding: 15px;
		
		.title {
			display: flex;
			align-items: center;
			
			.name {
				font-size: 28rpx;
				font-weight: 700;
				color: #1a1a1a;
				padding-left: 3px;
			}
		}
		
		.sex-option {
			display: flex;
			align-items: center;
			margin: 15px 0px;
			
			.sex-tab {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				margin-right: 30px;
				
				.img-span {
					width: 130rpx;
					height: 130rpx;
					position: relative;
					display: flex;
					justify-content: center;
					
					.img {
						height: 100%;
						width: 100%;
					}
					
					.sex-ok {
						background-color: #fff;
						width: 34rpx;
						height: 34rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						bottom: 0;
						border-radius: 100%;
					}
				}
			}
			
			.name {
				font-size: 28rpx;
				font-weight: 400;
				padding-top: 10px;
				color: #333;
			}
			
		}
		
		.level-option {
			display: flex;
			padding: 15px 0;
			flex-wrap: wrap;
			
			.tab {
				padding: 10rpx 30rpx;
				font-size: 28rpx;
				background-color: #f5f5f5;
				min-width: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 40px;
				margin-right: 7px;
				margin-bottom: 8px;
			}
			
			.active {
				color: #fff;
				background: var(--ui-BG-Main);
			}
		}
		
		.input-box {
			display: flex;
			margin-bottom: 20px;
			
			.step-span {
				display: flex;
				justify-content: flex-end;
				flex: 1;
				align-items: center;
			}
		}
		
	}
	
	
	.bottom-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 15px;
		height: 100rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: -1px;
		background-color: #fff;
		z-index: 9;
		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: 64rpx;
			}
		}
		
	}
</style>
