<template>
	<!-- 修改时间模态框 -->
	<view class="cu-modal" :class="show?'show':''">
		<view class="cu-dialog">
			<view class="close-icon" data-modal="showEditTimeArrangeModal" @click="hideModal">
				<text class="cuIcon-close text-red"></text>
			</view>
			<view class="padding bg-white text-left">
				<view class="solid-bottom padding padding-bottom-sm">
					<view class="flex justify-between align-center margin-bottom-xs padding-top">
						<view>
							<text class="text-xxl text-main-color"><text class="cuIcon-phone"></text></text>
							<text class="text-bold text-lg margin-lr-xs">{{data.customerPhone}}</text>
						</view>
						<button class="cu-btn line-main-color">拨打</button>
					</view>
					<view class="text-sm">
						拨打电话，按与客户约定的时间填入，完成排单，未完成排单将导致排单超时！
					</view>
				</view>
				<view class="padding">
					<view class="margin-bottom-xs">
						<view class="margin-bottom-xs">选择日期：</view>
						<picker mode="date" :value="date" :start="curDate" @change="dateChange">
							<input class="radius-input" v-model="date"></input>
						</picker>
					</view>
					<view>
						<view class="margin-bottom-xs">选择时间：</view>
						<picker class="inline-input" mode="time" :value="'08:00'" :start="'08:00'" :end="'20:00'"
							@change="timeChange">
							<input class="radius-input" v-model="time"></input>
						</picker>
						<text class="margin-lr-xs">或</text>
						<picker class="inline-input" mode="selector" :value="timeRangeIndex" :range="timeRangeList"
							@change="timeRangeChange">
							<input class="radius-input" v-model="timeRange"></input>
						</picker>
					</view>
				</view>
				<view class="padding-top-sm padding">
					<view class="flex justify-start">
						<view class="margin-right">原因选择：</view>
						<radio-group @change="changeReasonRadio">
							<label class="radio margin-right-sm">
								<radio style="transform:scale(0.7)" class="main-color" value="customer"
									:checked="true" />
								<text>客户原因</text>
							</label>
							<label class="radio">
								<radio style="transform:scale(0.7)" class="main-color" value="master" />
								<text>师傅原因</text>
							</label>
						</radio-group>
					</view>
					<view class="margin-top uni-textarea">
						<textarea class="solid padding-sm" maxlength="-1" @input="inputSpecificReason"
							placeholder="具体情况(选填)" />
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action margin-0 flex-sub text-black" data-modal="showEditTimeArrangeModal" @click="submitFailReason">无法排单</view>
				<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="showEditTimeArrangeModal"
					@click="arrangeTime">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'edit-time-arrange',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				date: '',
				curDate: '',
				time: '',
				timeRangeList: [],
				timeRange: '',
				timeRangeIndex: 0
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.getCurDateAndTime();
				this.timeRangeList = await this.$api.data('timeRangeList');
			},
			getCurDateAndTime() {
				let date = new Date();
				this.curDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 00:00:00";
			},
			dateChange(e) {
				this.date = e.detail.value
			},
			timeChange(e) {
				this.time = e.detail.value;
			},
			timeRangeChange(e) {
				this.timeRangeIndex = e.detail.value;
				this.timeRange = this.timeRangeList[this.timeRangeIndex];
			},
			hideModal(e) {
				uni.$emit(this.$globalFun.HIDE_MODAL, e);
			},
			submitFailReason(e) {
				let reasonObj = {
					imgList: this.imgList,
					problemPerson: this.problemPerson,
					specificReason: this.specificReason
				}
				uni.$emit(this.$globalFun.SUBMIT_FAIL_REASON, e, reasonObj)
			},
			arrangeTime(e) {
				this.hideModal(e);
			},
			changeReasonRadio(e) {
				this.problemPerson = e.detail.value;
			},
			inputSpecificReason(e) {
				this.specificReason = e.detail.value;
			}
		}
	}
</script>

<style scoped>
	.inline-input {
		display: inline-block;
		width: calc((100% - 48rpx)/2);
		vertical-align: middle;
	}

	.close-icon {
		position: absolute;
		right: 35rpx;
		top: 35rpx;
		z-index: 1;
	}
</style>
