<template>
	<ContainerQuery>
		<el-form slot="more" size="small" :inline="true">
			<el-form-item>
				<SelectCustomer v-model="userNameString" :clearable="false" @change="customerSel" />
			</el-form-item>
			<el-form-item>
				<el-input v-model="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>
				<el-select v-model="is_show" filterable placeholder="上下架" @change="(page = 1,getSubscribeList())">
					<el-option label="全部" value=""></el-option>
					<el-option label="待支付" :value="1"></el-option>
					<el-option label="已支付" :value="2"></el-option>
					<el-option label="已完成" :value="3"></el-option>
				</el-select>
			</el-form-item>
			<!-- <el-form-item>
				<DepartmentSel v-model="departmentPidPath" width="150" clearable @change="departmentChange" />
			</el-form-item> -->
			<!-- <el-form-item>
				<RoleSelect v-model="rolePidPath" width="150" clearable @change="roleChange" />
			</el-form-item> -->
		</el-form>
		<el-button slot="left" size="small" type="primary" @click="openModel">
			新增预约
		</el-button>

		<el-table size="small" :data="tableData">
			<el-table-column prop="id" label="ID" min-width="100"></el-table-column>
			<el-table-column prop="order_id" label="订单号" min-width="200"></el-table-column>
			<el-table-column prop="project" label="项目" min-width="200">
				<template slot-scope="scope">
					<span v-for="(list,ind) in scope.row.project" :key='ind'>
						{{list.name}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="to_price" label="总价" min-width="100"></el-table-column>
			<el-table-column prop="discount_price" label="优惠" min-width="100"></el-table-column>
			<el-table-column prop="pay_price" label="实际支付" min-width="100"></el-table-column>
			<el-table-column prop="duration" label="时长" min-width="80">
				<template slot-scope="scope">
					<span v-if='scope.row.duration'>{{scope.row.duration+'分'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="time" label="预约时间" min-width="150">
				<template slot-scope="scope">
					{{$_common.formatDate(scope.row.time,'yyyy/MM/dd hh:mm')}}
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="150">
				<template slot-scope="scope">
					{{$_common.formatDate(scope.row.createTime)}}
				</template>
			</el-table-column>
			<el-table-column prop="staff" label="服务员工" min-width="100"></el-table-column>
			<el-table-column prop="customer" label="客户" min-width="100"></el-table-column>
			<el-table-column prop="completeTime" label="服务完成时间" min-width="150">
				<template slot-scope="scope">
					{{$_common.formatDate(scope.row.completeTime)}}
				</template>
			</el-table-column>
			<el-table-column prop="paid" label="支付状态" min-width="100">
				<template slot-scope="scope">
					<div>
						<span v-if="scope.row.paid === 0" class="warning-status">
							待支付
						</span>
						<span v-if="scope.row.paid === 1" class="success-status">
							已支付
						</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="服务状态" min-width="100">
				<template slot-scope="scope">
					<div>
						<span v-if="scope.row.status === -1" class="info-status">
							已取消
						</span>
						<span v-if="scope.row.status === 0" class="primary-status">
							正常
						</span>
						<span v-if="scope.row.status === 1" class="success-status">
							服务完成
						</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" min-width="150" fixed="right" header->
				<template slot-scope="scope">
					<el-button v-if="scope.row.status === 0&&scope.row.paid === 0" type="text"
						@click="pay(scope.row.id)">
						支付
					</el-button>
					<el-button type="text" @click="openEditModel(scope.row.id)">
						编辑
					</el-button>
					<el-button type="text" @click="del(scope.row.id)">
						取消
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<FooterPage :page-size="page_size" :total-page="total_count" :current-page="page" @pageChange="pageChange"
			@sizeChange="sizeChange" />
		<StaffList v-if="staff_show" :is-show="staff_show" :is-check="false" :isserch="true"
			@cancel="staff_show = false" @confirm="staffSel" />
	</ContainerQuery>
</template>

<script>
	import {
		getSubscribeList,
		setShopProject,
		cancelSubscribe,
		paymentSubscribe
	} from "@/api/OrderSubscribe";
	import StaffList from "@/component/common/staffListModal";
	import SelectCustomer from "@/component/common/SelectCustomer.vue";
	export default {
		name: "OrderSubscribe",
		components: {
			StaffList,
			SelectCustomer,
		},
		data() {
			return {
				// 当前选中的用户id
				userId: '',
				// 用户名称
				userNameString: '',
				// 当前选中的员工id
				staffId: '',
				// 员工名称
				staffName: '',
				// 显示员工弹窗
				staff_show: false,
				// 上下架
				is_show: '',
				//1下架2上架
				// 搜索项目名称
				search_key: "",
				// 列表数据
				tableData: [],
				page: 1,
				page_size: 10,
				// 数据总条数
				total_count: 0,
				// 保存选中的itemid
				item_id: '',
				form: {

				}
			};
		},
		created() {
			// console.log(sessionStorage.getItem("nodes"), '权限');
			this.getSubscribeList();
		},
		activated() {
			if (this.$_isInit()) return;
			this.getSubscribeList();
		},
		methods: {
			// 选择员工
			staffSel(row) {
				this.staffName = row[0].staffName;
				this.staffId = row[0].id;
				this.pageChange(1);
			},
			// 选择客户
			customerSel(val, list) {
				const row = list[0];
				console.log(row, 'ss');
				this.userId = row.id;
				this.pageChange(1);
			},
			// 上架下架
			async changeGoodsStatus(val, row) {
				try {
					const data = await setShopProject({
						id: row.id,
						is_shop: val,
					});
					this.$message({
						type: "success",
						message: "操作成功!",
					});
				} catch (e) {
					this.getSubscribeList();
				}
			},
			//  获取列表
			async getSubscribeList() {
				const data = await getSubscribeList({
					uid: this.staffId,
					customer_id: this.userId,
					start_time: this.search_key,
					end_time: this.search_key,
					type: this.is_show,
					page: this.page,
					pageSize: this.page_size,
				});
				this.tableData = data.data;
				console.log(data, 'fanhui');
				console.log(this.tableData, 'fanhui');
				this.total_count = data.pageTotal;
			},
			// 取消预约
			del(id) {
				this.$confirm("你确定取消此预约吗?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await cancelSubscribe({
						id: id
					});
					this.getSubscribeList();
					this.$message({
						type: "success",
						message: "取消成功!",
					});
				});
			},
			// 支付预约
			pay(id) {
				this.$confirm("你确定此预约支付完成吗?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await paymentSubscribe({
						id: id
					});

					this.getSubscribeList();
					this.$message({
						type: "success",
						message: "支付成功!",
					});
				});
			},
			pageChange(page) {
				this.page = page;
				this.getSubscribeList();
			},
			sizeChange(size) {
				this.page_size = size;
				this.pageChange(1);
			},
			//  编辑员工
			openEditModel(id) {
				this.$router.push(`/SingleStore/order/AddOrderSubscribe?id=${id}&setDetail=1`);
			},
			// 打开添加预约页面
			openModel() {
				this.$router.push(`/SingleStore/order/AddOrderSubscribe?setDetail=0`);
			},
		},
	};
</script>

<style scoped></style>
