<template>
	<!-- 报价/客户支付模态框 -->
	<view class="cu-modal" :class="show?'show':''">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end solid-bottom">
				<view class="content">催单/发起约单</view>
				<view class="action" data-modal="sendUrgentMsgModal" @click="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="padding padding-lr-xl bg-white text-left">
				<view class="custom-radio" style="margin-bottom: 20rpx;">
					<uni-data-checkbox v-model="radio1" selectedColor="#0081ff" :localdata="sex"></uni-data-checkbox>
				</view>
				<template v-if="radio1 === 2">
					<view style="font-size: 32rpx;padding: 20upx 0;border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);">
						<text>我想约的时间是：</text>
					</view>
					<view style="display: flex;flex-direction: row;padding-top: 20upx;">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="dateStr"/>
						<picker class="margin-left-xs" mode="selector" :value="timeRangeIndex" :range="timeRangeList"
							@change="timeRangeChange">
							<input class="radius-input time-picker" v-model="timeRange" disabled></input>
						</picker>
					</view>
				</template>
				
				<view class="margin-top-sm">
					<textarea style="width: 100%;" class="solid radius text-left padding-sm" v-model="detailDesc" maxlength="-1"
						placeholder="具体情况(选填)"></textarea>
				</view>
			</view>
			<view class="cu-bar solid-top">
				<view class="action margin-0 flex-sub text-black" data-modal="sendUrgeOrderModal" @tap="hideModal">取消</view>
				<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="sendUrgeOrderModal" @click="apply">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		nama: 'urge-order',
		emits: ['hideModal', 'confirm'],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				radio1: 0,
				dateStr: '',
				detailDesc: '',
				sex: [{
					text: '【催单】师傅已约单，催促快上门！',
					value: 0
				}, {
					text: '【催单】师傅未约单，催促快预约！',
					value: 1
				}, {
					text: '【约单】分次上门单，本次请约我！',
					value: 2
				}],
				timeRangeIndex: 0,
				timeRange: '',
				timeRangeList: []
			}
		},
		watch: {
			show() {
				this.resetData()
				if(this.show) {
					this.timeRangeList = this.$globalData.timeRangeList;
					this.timeRange = this.timeRangeList[0];
				}
			}
		},
		methods: {
			hideModal(e) {
				this.$emit('hideModal', e);
				this.resetData()
			},
			resetData() {
				this.radio1 = 0
				this.dateStr = ''
				this.detailDesc = ''
				this.timeRangeIndex = 0
				this.timeRange = this.timeRangeList[0]
			},
			timeRangeChange(e) {
				this.timeRangeIndex = e.detail.value;
				this.timeRange = this.timeRangeList[this.timeRangeIndex];
			},
			async apply(e) {
				if(this.radio1 == 2) {
					if(!this.dateStr) {
						uni.showToast({
							title: '请选择预约日期',
							icon: 'none'
						})
						return false;
					}
				}
				this.$emit('confirm', {
					type:  this.radio1,
					content: this.radio1 == 2 ? `约单: 时间${this.dateStr} ${this.timeRange}` : '催单',
					remark: this.detailDesc
				});
				
			}
		}
	}
</script>

<style>
</style>
