<template>
	<view class="page1">
		<view class="hero">
			<view class="hero-title">经营管理</view>
			<view class="hero-subtitle">同步后台商家管理字段，可直接维护营业规则</view>
		</view>
		
		<view class="form-wrap">
			<view class="content">
				<view class="section-title">营业设置</view>
				<view class="value">
					<view class="name">营业开始时间</view>
					<view class="text">
						<picker mode="time" :value="shop.businessHourBegin" start="00:00" end="23:59"
							@change="bindTimeChange($event,'businessHourBegin')">
							<view class="picker-text" :class="{ placeholder: !shop.businessHourBegin }">
								{{shop.businessHourBegin || '请选择开始时间'}}
								<uni-icons type="bottom" size="14" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				<view class="value">
					<view class="name">营业结束时间</view>
					<view class="text">
						<picker mode="time" :value="shop.businessHourEnd" start="00:00" end="23:59"
							@change="bindTimeChange($event,'businessHourEnd')">
							<view class="picker-text" :class="{ placeholder: !shop.businessHourEnd }">
								{{shop.businessHourEnd || '请选择结束时间'}}
								<uni-icons type="bottom" size="14" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				<view class="value">
					<view class="name">营业状态</view>
					<view class="text">
						<picker :range="statusList" range-key="text" @change="statusChange">
							<view class="picker-text">
								{{statusText}}
								<uni-icons type="bottom" size="14" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
			</view>
		
			<button :loading="submitLoading" @tap="submit">保存</button>
		
			<view class="content">
				<view class="section-title">经营信息</view>
				<view class="value">
					<view class="name">拼团佣金</view>
					<view class="text">{{shop.commissionRateMore || 0}}%</view>
				</view>
				<view class="value">
					<view class="name">单独购买佣金</view>
					<view class="text">{{shop.commissionRateOne || 0}}%</view>
				</view>
				<view class="value">
					<view class="name">经营品类</view>
					<view class="text">{{shop.type || '暂无'}}</view>
				</view>
				<view class="value">
					<view class="name">出餐时间</view>
					<view class="text">{{shop.cookingTime || 0}}分钟</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop: {
					shopId: '',
					shopName: '',
					businessHourBegin: '',
					businessHourEnd: '',
					status: 0,
					commissionRateMore: '',
					commissionRateOne: '',
					type: '',
					isDelivery: 0,
					cookingTime: ''
				},
				submitLoading: false,
				statusList: [{
					value: 0,
					text: '正常营业'
				}, {
					value: 1,
					text: '暂停营业'
				}]
			}
		},
		computed: {
			statusText() {
				const item = this.statusList.find(item => item.value == this.shop.status)
				return item ? item.text : '正常营业'
			}
		},
		onLoad() {
			this.getShopMsg()
			
		},
		methods: {
			getShopMsg(){
				this.NB.sendRequest('/app/shoptakeaway/getByShopId', {
					shopId: uni.getStorageSync('shopId')
				}, false, 'get', 'application/x-www-form-urlencoded').then(res => {
					if (res.code == 200) {
						this.shop = res.result
						for (let key in this.shop) {
						  if (this.shop[key] === null) {
						    delete this.shop[key];
						  }
						}
					} else {
						uni.showToast(res.message)
					}
				})
				
			},
			bindTimeChange(e, key) {
				this.shop[key] = e.detail.value
			},
			statusChange(e) {
				const item = this.statusList[e.detail.value]
				if (item) this.shop.status = item.value
			},
			validateForm() {
				if (!this.shop.businessHourBegin) return '请选择营业开始时间'
				if (!this.shop.businessHourEnd) return '请选择营业结束时间'
				return ''
			},
			submit(){
				const error = this.validateForm()
				if (error) {
					uni.showToast({
						title: error,
						icon: 'none'
					})
					return
				}
				const payload = {
					id: this.shop.id,
					shopId: this.shop.shopId || uni.getStorageSync('shopId'),
					businessHourBegin: this.shop.businessHourBegin,
					businessHourEnd: this.shop.businessHourEnd,
					status: Number(this.shop.status)
				}
				this.submitLoading = true
				this.NB.sendRequest('/app/shoptakeaway/update', payload, false, 'POST', 'application/x-www-form-urlencoded').then(res => {
					if (res.code == 200) {
						uni.showModal({
							title: '提示',
							content: '经营信息已更新',
							showCancel: false,
							success: (modalRes) => {
								if (modalRes.confirm) uni.navigateBack()
							}
						})
					} else {
						uni.showToast(res.message)
					}
				})
			}
		}
	}
</script>

<style>
	page,
	.page1 {
		width: 100%;
		min-height: 100%;
		font-size: 24rpx;
		color: #12342d;
		background:
			radial-gradient(circle at 92% 120rpx, rgba(166, 255, 234, 0.45) 0, rgba(166, 255, 234, 0) 240rpx),
			linear-gradient(180deg, #f3fff6 0%, #f5f8f5 36%, #eef4f1 100%);
		overflow: scroll;
	}
	
	.hero {
		position: relative;
		width: 100%;
		height: 260rpx;
		padding: 58rpx 42rpx 0;
		box-sizing: border-box;
		overflow: hidden;
		background:
			linear-gradient(135deg, rgba(227, 255, 150, 0.95) 0%, rgba(166, 255, 234, 0.86) 58%, rgba(255, 255, 255, 0.72) 100%),
			url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') center/cover no-repeat;
	}
	
	.hero::after {
		content: "";
		position: absolute;
		right: -34rpx;
		top: -44rpx;
		width: 290rpx;
		height: 290rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.32);
	}
	
	.hero-title {
		position: relative;
		z-index: 1;
		font-size: 46rpx;
		line-height: 64rpx;
		font-weight: 900;
		letter-spacing: 2rpx;
		color: #07362d;
	}
	
	.hero-subtitle {
		position: relative;
		z-index: 1;
		margin-top: 12rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: rgba(0, 35, 28, 0.62);
	}
	
	.form-wrap {
		position: relative;
		z-index: 2;
		width: 92%;
		margin: -54rpx auto 0;
		padding-bottom: 40rpx;
	}
	
	.content {
		width: 100%;
		margin-bottom: 24rpx;
		overflow: hidden;
		border: 1rpx solid rgba(255, 255, 255, 0.86);
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 16rpx 36rpx rgba(0, 35, 28, 0.08);
	}
	
	.section-title {
		height: 92rpx;
		line-height: 92rpx;
		padding: 0 28rpx;
		border-bottom: 1rpx solid #edf3f0;
		font-size: 30rpx;
		font-weight: 900;
		color: #102f28;
	}
	
	.value {
		width: 100%;
		min-height: 96rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #edf3f0;
		padding: 0 28rpx;
		box-sizing: border-box;
	}
	
	.section-title + .value {
		border-top: none;
	}
	
	.name {
		width: 210rpx;
		font-size: 28rpx;
		font-weight: 800;
		color: #153c34;
	}
	
	.text {
		flex: 1;
		min-width: 0;
		text-align: right;
		color: #263f39;
		font-size: 28rpx;
	}
	
	.text input {
		height: 96rpx;
		line-height: 96rpx;
		text-align: right;
		font-size: 28rpx;
		color: #263f39;
	}
	
	.picker-text {
		min-height: 96rpx;
		line-height: 96rpx;
		font-size: 28rpx;
		color: #263f39;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.picker-text.placeholder {
		color: #9aa7a3;
	}
	
	button {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		margin: 44rpx auto 12rpx;
		border-radius: 999rpx;
		background: linear-gradient(90deg, #e3ff96 0%, #a6ffea 100%);
		color: #00231c;
		font-size: 34rpx;
		font-weight: 900;
		box-shadow: 0 18rpx 36rpx rgba(0, 35, 28, 0.14);
	}
	
	button::after {
		border: none;
	}
</style>