<template>
	<div>
		<el-form ref="form" :rules="rules" size="small" :model="form" label-width="120px">
			<el-form-item label="服务店员" prop="uid" style="width: 300px">
				<el-input v-model="form.staffName" placeholder="请选择服务员工" readonly>
					<i slot="suffix" class="el-input__icon el-icon-search" @click="staff_show = true"></i>
				</el-input>
			</el-form-item>
			<el-form-item label="预约用户" prop="customer_id" style="width: 300px">
				<SelectCustomer v-model="form.userName" :clearable="false" @change="customerSel" />
			</el-form-item>
			<el-form-item label="预约项目" prop="project" style="min-width: 400px">
				{{actionItem.name}}
				<el-button type="danger" @click="show_Item=true">选择项目</el-button>

			</el-form-item>
			<el-form-item label="优惠价格" prop="discount_price">
				<el-input v-model="form.discount_price" type="number" placeholder="请输入优惠价格"></el-input>
			</el-form-item>
			<el-form-item label="费用" prop="pay_price">
				{{form.pay_price}}
			</el-form-item>
			<el-form-item label="实际支付" prop="pay_price">
				{{form.pay_price-form.discount_price}}
			</el-form-item>
			<el-form-item label="预约时间段" prop="age">
				<el-date-picker v-model="form.timeDay" type="date" placeholder="选择日期">
				</el-date-picker>
				<el-time-select v-model="form.timeHM" placeholder="预约时间段" :picker-options="{
				start: '08:00',
				step: '00:15',
				end: '24:00',
			}">
				</el-time-select>
			</el-form-item>
			<el-form-item label="备注" prop="remarks">
				<el-input v-model="form.remarks" placeholder="请输入备注说明"></el-input>
			</el-form-item>
			<el-form-item style="text-align: right; padding-right: 10px">
				<el-button type="primary" @click="confirm">确 定</el-button>
				<el-button @click="close">取 消</el-button>
			</el-form-item>
		</el-form>
		<ItemList v-if="show_Item" :dialog-visible="show_Item" :is-show-add="true" :modal="false"
			@close="show_Item = false" @confirm="itemConfirm"></ItemList>
		<StaffList v-if="staff_show" :is-show="staff_show" :is-check="false" :isserch="true"
			@cancel="staff_show = false" @confirm="staffSel" />
	</div>
</template>

<script>
	import {
		addSubscribe,
		updateSubscribe,
		detailsSubscribe,
		detailsShopProject
	} from "@/api/OrderSubscribe";
	import ItemList from "@/component/goods/itemList.vue";
	import StaffList from "@/component/common/staffListModal";
	import SelectCustomer from "@/component/common/SelectCustomer.vue";
	export default {
		name: "AddOrderSubscribe",
		components: {
			ItemList, // 新增角色
			StaffList,
			SelectCustomer
		},
		data() {
			return {
				form: {
					// 员工名称
					staffName: '',
					// 用户名称
					userName: '',
					timeDay: '', //预约日期
					timeHM: '', //时间段
					"uid": '', // 服务人员id
					"customer_id": '', //客户id
					"project": "", // 选择预约服务项目多选
					"discount_price": 0, //优惠价格
					// "to_price": 0, // 总价 不填默认计算项目价格
					"pay_price": 0, // 实际支付 不填默认计算项目价格
					"time": "", //预约时间段
					"remarks": "", //备注
				},
				// 判断是否为修改
				setDetail: false,
				// 修改的员工id
				setId: '',
				// 显示员工
				staff_show: false,
				// 选中的项目
				actionItem: {
					name: '' //项目名称
				},
				// 显示项目列表
				show_Item: false,
				rules: {
					uid: [{
						required: true,
						message: "请选择服务人员",
						trigger: "blur"
					}],
					customer_id: [{
						required: true,
						message: "请选择客户",
						trigger: "blur"
					}],
					project: [{
						required: true,
						message: "请选择服务项目",
						trigger: "blur"
					}],
				}
			};
		},
		created() {
			const type = this.$route.query.setDetail || 0;
			// 判断是否为修改项目
			if (+type == 1) {
				this.setId = this.$route.query.id;
				this.setDetail = true;
				this.detailsSubscribe();
			}
		},
		methods: {
			// 选择客户
			customerSel(val, list) {
				const row = list[0];
				this.form.userName = row.name;
				this.form.customer_id = row.id;
			},
			// 选择员工
			staffSel(row) {
				this.form.staffName = row[0].staffName;
				this.form.uid = row[0].id;
			},
			// 选择项目
			itemConfirm(e) {
				this.actionItem = e[0];
				this.form.pay_price = this.actionItem.price
				this.form.project = this.actionItem.id
			},
			close() {
				this.$closeCurrentGoEdit(`/SingleStore/order/OrderSubscribe`);
			},
			//  详情 detailsSubscribe
			async detailsSubscribe() {
				if (!this.setId) return;
				const {
					data
				} = await detailsSubscribe(this.setId);
				console.log(data,'fh');
				
				const time = data.time?this.$_common.formatDate(data.time).split(' '):this.$_common.formatDate(new Date().getTime()).split(' ')
				const project = data.project[0];
				
				this.form = {
					// 员工名称
					staffName: data.staff.staffName,
					// 用户名称
					userName: data.customer.name,
					timeDay:new Date(data.time), //预约日期
					timeHM: time[1], //时间段
					"uid": data.uid, // 服务人员id
					"customer_id": data.customer.userCenterId, //客户id
					"project": project.id, // 选择预约服务项目多选
					// "to_price": 0, // 总价 不填默认计算项目价格
					"pay_price": project.price, // 实际支付 不填默认计算项目价格
					"discount_price": data.discount_price, //优惠价格
					"remarks": data.remarks, //备注
				};
				this.actionItem = {
					name: project.name //项目名称
				}
			},
			async confirm() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '提交中',
							spinner: 'el-icon-loading',
						});
						if(!this.form.timeDay){
							loading.close();
							this.$message({
								message: '请选择预约日期',
								type: "danger",
							});
							return
						};
						if(!this.form.timeHM){
							loading.close();
							this.$message({
								message: '请选择预约时间段',
								type: "danger",
							});
							return
						};
						let upData = {
							'id':this.setId,
							"uid": this.form.uid, // 服务人员id
							"customer_id": this.form.customer_id, //客户id
							"project": this.form.project, // 选择预约服务项目多选
							"discount_price": this.form.discount_price, //优惠价格
							"time":this.$_common.formatDate( this.form.timeDay.getTime(),'yyyy-MM-dd')+' '+this.form.timeHM+':00', //预约时间段
							"remarks": this.form.remarks, //备注
						}
						console.log(this.form.timeDay);
						// 判断是否为详情
						let data;
						if (!this.setDetail) {
							data = await addSubscribe(upData);
						} else {
							data = await updateSubscribe(upData);
						}
						loading.close();
						this.$message({
							message: data.data,
							type: "success",
						});
						this.$closeCurrentGoEdit(`/SingleStore/order/OrderSubscribe`);
					}
				});
			},
		},
	};
</script>

<style scoped>
	.btn-up {
		position: relative;
	}

	.btn-department {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.btn-role-up {
		position: relative;
	}

	.add-role {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.creat-shop {
		color: #1890ff;
		font-size: 12px;
	}
</style>
