<template>
	<view>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title ">预约项目</view>
				<view @tap="showModal" data-target="RadioModal">
					<view @click="radioText='项目',inputText=null">
						{{reseForm.projectName}}<text v-show="reseForm.projectName==''" @click="radioText='项目'"
							class=" text-blue">选择</text><text class="cuIcon-right"></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group margin-top" v-show="reseForm.priceMember!=0&&reseForm.priceMember!=undefined">
				<view class="title ">项目价格</view>
				<text class="text-price text-red">{{reseForm.priceMember }}</text>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title ">会员信息</view>
				<text>{{reseForm.memberName }} - {{ reseForm.sex==1?'男':'女'}} </text>
			</view>
			<view class="cu-form-group">
				<view class="title ">预约日期</view>
				<picker mode="date" :value="reseForm.dateDay" :start="startDate" @change="TimeChange">
					<view class="picker">
						{{reseForm.dateDay}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title ">预约时间</view>
				<picker mode="time" :value="reseForm.dateTime" @change="DateChange">
					<view class="picker">
						{{reseForm.dateTime}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title ">服务人员</view>
				<view class="picker" @tap="showModal" data-target="RadioModal">
					<view @click="radioText='服务人员',inputText=null">
						{{reseForm.staffName }} <text v-show="reseForm.staffName==''" @click="radioText='服务人员'"
							class=" text-blue">选择</text><text class="cuIcon-right"></text>
					</view>
				</view>
			</view>
			<!-- 	<view class="cu-form-group margin-top">
				<view class="title ">备注</view>
			</view>
			<view class="cu-form-group ">
				<textarea maxlength="-1" :disabled="reseForm.remark!=null" @input="textareaAInput" placeholder="在这里填写你的备注"></textarea>
			</view> -->
			<button class="cu-btn bg-green shadow-blur round lg" style="width: 90%;margin: 50upx 5%;" type="warn"
				@click="subit">提交预约</button>

		</form>
		<view class="cu-modal " :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog " @tap.stop="">
				<view class="cu-bar solid-bottom padding-xs" style="margin: 15upx ;border-radius: 5px;">
					请选择 {{radioText}}
					<view class="search-form round bg-white">
						<text class="cuIcon-search"></text>
						<input class="bg-white radius" :adjust-position="false" type="text"
							:placeholder="'搜索'+radioText" v-model="inputText" confirm-type="search"></input>
						<button class="cu-btn round bg-red" @click="InputBlur">搜索</button>
					</view>
				</view>
				<scroll-view scroll-x class=" nav" v-show="radioText=='项目'">
					<view class="flex text-center">
						<view class="cu-item light flex-sub " :class="[TabCur==0?'bg-red text-white':'']"
							@tap="tabSelect" :data-id="0">
							卡内项目
						</view>
						<view class="cu-item light flex-sub" :class="[TabCur==1?'bg-red text-white':'']"
							@tap="tabSelect" :data-id="1">
							门店项目
						</view>
					</view>
				</scroll-view>
				<radio-group class="block" @change="RadioChange" style="max-height: 60vh;overflow-y: auto;">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in list" :key="index">
							<label class="flex justify-between align-center flex-sub" @click="setRadio(item,index)">
								<view class="flex-sub" v-show="radioText=='项目'">{{item.projectName}}</view>
								<view class="flex-sub" v-show="radioText=='项目'">{{item.priceMember}}</view>
								<view class="flex-sub" v-show="radioText=='服务人员'">{{item.brandNumber }} - </view>
								<view class="flex-sub" v-show="radioText=='服务人员'">{{ item.staffName}}</view>
								<radio class="round" :class="radio=='radio' + index?'checked':''"
									:checked="radio=='radio' + index?true:false" :value="'radio' + index"></radio>
							</label>
						</view>
					</view>
				</radio-group>

				<button :disabled="radio==null" style="width: 80%; margin: 20upx 10%;border-radius: 50upx; "
					@click="confirm" class="cu-btn bg-red margin-tb-sm lg">选择</button>
			</view>
		</view>
	</view>
</template>

<script>
	import newDate from '../../../../../utils/data.js'
	export default {
		data() {
			return {
				userInfo: null,
				inputText: null,
				TabCur: 0,
				reseForm: {
					projectName: '',
					priceMember: 0,
					memberName: '',
					sex: '',
					dateTime: "",
					dateDay: '',
					remark: null,
					staffName: '',
					editOrder: false,
				},
				radioText: null,
				list: [],
				radio: null,
				startTime: null,
				startDate: null,
				modalName: null,
				format: "YYYY-MM-DD hh:mm:ss",
				radioList: {},
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id * 1;
				this.showModal()
			},
			InputBlur(e) {
				if (this.radioText == '项目') {
					if (this.TabCur == 1) {
						var page = {
							storeId: this.userInfo.storeId,
							pageNum: 1,
							pageSize: 100,
							state: 1,
							projectName: this.inputText
						}
						this.$api.projectPage(page).then(res => {
							if (res.code == '000000') {
								this.list = res.pageInfo.list
							} else {
								uni.showModal({
									title: '提示',
									content: res.message,
									showCancel: false,
									success: function(res) {}
								})
							}
						})
					}

					if (this.TabCur == 0) {
						let page = {
							storeId: this.userInfo.storeId,
							courseProjectName: this.inputText,
							memberId: this.userInfo.id
						}
						this.$api.couAccountlist(page).then(res => {
							if (res.code == '000000') {
								res.rows.forEach(item => {
									item.id = item.courseProjectId
									item.projectName = item.courseProjectName
									item.priceMember = (item.courseStandardMoney / item
										.courseStandardCount).toFixed(2) * 1
								})
								this.list = res.rows
							}
						})
					}
				} else {
					var page = {
						storeId: this.userInfo.storeId,
						pageNum: 1,
						pageSize: 100,
						state: 1,
						staffName: this.inputText
					}
					this.$api.staffPage(page).then(res => {
						if (res.code == '000000') {
							this.list = res.pageInfo.list
							this.modalName = "RadioModal"
						} else {
							uni.showModal({
								title: '提示',
								content: res.message,
								showCancel: false,
								success: function(res) {}
							})
						}
					})

				}


			},
			setRadio(item) {
				console.log(item);
				this.radioList = item

			},
			showModal() {
				//打开model单选
				var page = {
					storeId: this.userInfo.storeId,
					pageNum: 1,
					pageSize: 100,
					state: 1
				}
				var form = {
					storeId: this.userInfo.storeId,
					memberId: this.userInfo.id
				}
				if (this.radioText == '项目') {
					this.modalName = "RadioModal"
					if (this.TabCur == 1) {

						this.$api.projectPage(page).then(res => {
							if (res.code == '000000') {
								this.list = res.pageInfo.list

							} else {
								uni.showModal({
									title: '提示',
									content: res.message,
									showCancel: false,
									success: function(res) {}
								})
							}
						})
					}
					if (this.TabCur == 0) {

						this.$api.couAccountlist(form).then(res => {
							if (res.code == '000000') {
								res.rows.forEach(item => {
									item.id = item.courseProjectId
									item.projectName = item.courseProjectName
									item.priceMember = (item.courseStandardMoney / item
										.courseStandardCount).toFixed(2) * 1
								})
								this.list = res.rows
							}
						})
					}
				} else {
					this.$api.staffPage(page).then(res => {
						if (res.code == '000000') {
							this.list = res.pageInfo.list
							this.modalName = "RadioModal"
						} else {
							uni.showModal({
								title: '提示',
								content: res.message,
								showCancel: false,
								success: function(res) {}
							})
						}
					})

				}

			},
			hideModal(e) {
				//关闭model单选
				this.modalName = null
			},
			confirm() {
				if (this.radioText == '项目') {
					this.reseForm.projectName = this.radioList.projectName
					this.reseForm.projectId = this.radioList.id
					this.reseForm.priceMember = this.radioList.priceMember

				} else {
					this.reseForm.staffName = this.radioList.staffName
					this.reseForm.staffId = this.radioList.id
				}
				this.radio = null
				this.radioList = {}
				this.modalName = null
			},
			RadioChange(e) {
				//点击选中model值
				this.radio = e.detail.value
			},
			subit() {
				this.reseForm.orderDate = this.reseForm.dateDay + ' ' + this.reseForm.dateTime
				this.reseForm.storeId = this.userInfo.storeId
				this.reseForm.storeName = this.userInfo.storeName
				this.reseForm.mobilePhone = this.userInfo.mobilePhone
				this.reseForm.memberIdentityCard = this.userInfo.identityCard
				console.log(this.reseForm.orderDate)
				var date = new Date();
				var obj = {
					YYYY: date.getFullYear(),
					MM: date.getMonth() + 1,
					DD: date.getDate(),
					hh: date.getHours(),
					mm: date.getMinutes(),
					ss: date.getSeconds()
				};

				// 定义改变后的格式
				for (var x in obj) {
					// 遍历对象 x为key
					if (obj[x] < 10) {
						// 当获取的值小于10 加一个0在前面
						obj[x] = "0" + obj[x];
					}
					this.format = this.format.replace([x], obj[x]);
					// x 为键 replace[x]值，replace[x]替换成obj[x]
				}
				if (this.reseForm.orderDate < this.format) {
					uni.showModal({
						title: '提示',
						content: "预约时间不能小于当前时间请修改预约时间",
						showCancel: false,
						success: function(res) {}
					})
				}else{
					if (this.reseForm.editOrder == true) {
						this.$api.editOrder(this.reseForm).then(res => {
							if (res.code == '000000') {
								uni.showModal({
									title: '修改成功',
									content: '已提交修改预约, 请在 我的预约 内修改',
									showCancel: false,
									success: function(res) {
										uni.navigateBack({
											delta: 1
										});
					
									}
								})
							} else {
								uni.showModal({
									title: '提示',
									content: res.message,
									showCancel: false,
									success: function(res) {}
								})
							}
						})
					} else {
						this.$api.addOrder(this.reseForm).then(res => {
							if (res.code == '000000') {
								uni.showModal({
									title: '预约成功',
									content: '已提交预约 , 如需修改预约信息请在 我的预约 内修改',
									showCancel: false,
									success: function(res) {
										uni.switchTab({
											url: '../../myHome'
										});
									}
								})
							} else {
								uni.showModal({
									title: '提示',
									content: res.message,
									showCancel: false,
									success: function(res) {}
								})
							}
						})
					
					}
				}
				


			},
			textareaAInput(e) {
				this.reseForm.remark = e.detail.value
			},
			TimeChange(e) {
				this.reseForm.dateDay = e.detail.value
			},
			DateChange(e) {
				this.reseForm.dateTime = e.detail.value
			},

		},

		onLoad: function(option) {
			console.log(JSON.parse(option.item));

			if (option.item != undefined) {
				const item = JSON.parse(option.item);
				if (item.courseProjectName != undefined) {
					this.reseForm.projectName = item.courseProjectName
					this.reseForm.projectId = item.courseProjectId
					this.reseForm.courseAccountId = item.id

					this.reseForm.priceMember = (item.courseStandardMoney / item.courseStandardCount).toFixed(2) * 1
					uni.setNavigationBarTitle({
						title: "卡包预约项目"
					})
				} else {
					this.reseForm.projectId = item.id
					this.reseForm.projectName = item.projectName
					this.reseForm.editOrder = item.editOrder
					this.reseForm.id = item.id
					this.reseForm.courseAccountId = item.courseAccountId
					this.reseForm.priceMember = item.priceMember
					uni.setNavigationBarTitle({
						title: "修改预约信息"
					})
				}
				if (item.staffId != undefined) {
					this.reseForm.staffId = item.staffId
					this.reseForm.staffName = item.staffName
				}
				if (item.editOrder == true) {
					let list = item.orderDate.split(" ")
					this.reseForm.dateDay = list[0]
					this.reseForm.dateTime = list[1]
				}
			}
			console.log(this.reseForm);
		},
		onShow: function() {
			this.TabCur = 0
			console.log(this.reseForm);
			this.startTime = new Date().getHours() + 1 + ':00'
			if (this.reseForm.dateDay == '') {
				let date = new Date()
				console.log(date.getFullYear());
				this.reseForm.dateTime = new Date().getHours() + 1 + ':00'
				this.reseForm.dateDay = date.getFullYear() + '-' + ((date.getMonth() + 1) > 10 ? (date.getMonth() +
					1) : '0' + (date.getMonth() + 1)) + '-' + ((date.getDate()) > 10 ? (date.getDate()) : '0' + (
					date.getDate()))
				// new Date().toLocaleDateString().replace('/', '-').replace('/', '-');
			}
			// this.startDate = newDate.newDate
			this.userInfo = uni.getStorageSync('userInfo')
			this.reseForm.memberId = this.userInfo.id
			this.reseForm.memberName = this.userInfo.memberName
			this.reseForm.sex = this.userInfo.sex
			console.log(this.reseForm);
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.redirectTo({
					url: '../reservation'
				})
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style>

</style>
