<template>
	<view class="page">
		<u-navbar title="客服设置" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='44' id="navbar"></u-navbar>

		<view class="container">
			<!-- 添加客服按钮 -->
			<view class="add-btn" @click="showAddDialog = true">
				<text>添加客服</text>
			</view>

			<!-- 客服列表 -->
			<view class="service-list">
				<view class="service-card" v-for="(item, index) in serviceList" :key="index">
					<view class="card-header">
						<text class="name">{{item.name}}</text>
						<text class="phone">{{item.contact}}</text>
					</view>
					<view class="card-body">
						<view class="time-item">
							<text class="label">上班时间:</text>
							<text class="value">{{item.startTime}}</text>
						</view>
						<view class="time-item">
							<text class="label">下班时间:</text>
							<text class="value">{{item.endTime}}</text>
						</view>
					</view>
					<view class="card-footer">
						<view class="btn edit-btn" @click="editService(index)">
							<text>编辑</text>
						</view>
						<view class="btn delete-btn" @click="deleteService(index)">
							<text>删除</text>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view class="empty" v-if="serviceList.length === 0">
					<image src="/static/empty-service.png" mode="aspectFit"></image>
					<text>暂无客服人员</text>
				</view>
			</view>
		</view>

		<!-- 添加/编辑客服弹窗 -->
		<u-popup v-model="showAddDialog" mode="center" border-radius="16">
			<view class="dialog-content">
				<view class="dialog-header">
					<text>{{isEdit ? '编辑客服' : '添加客服'}}</text>
					<u-icon name="close" @click="showAddDialog = false"></u-icon>
				</view>
				<view class="form-item">
					<text class="label">客服姓名</text>
					<u-input v-model="form.name" placeholder="请输入客服姓名" border="none"></u-input>
				</view>
				<view class="form-item">
					<text class="label">手机号码</text>
					<u-input v-model="form.contact" placeholder="请输入手机号码" border="none" type="number"></u-input>
				</view>
				<view class="form-item">
					<text class="label">上班时间</text>
					<u-input v-model="form.startTime" disabled placeholder="如: 09:00" border="none"
						@click="showTimePicker('work')"></u-input>
				</view>
				<view class="form-item">
					<text class="label">下班时间</text>
					<u-input v-model="form.endTime" disabled placeholder="如: 18:00" border="none"
						@click="showTimePicker('off')"></u-input>
				</view>
				<view class="dialog-footer">
					<button class="cancel-btn" @click="showAddDialog = false">取消</button>
					<button class="confirm-btn" @click="confirmService">{{isEdit ? '保存' : '添加'}}</button>
				</view>
			</view>
		</u-popup>

		<!-- 时间选择器 -->
		<u-picker v-model="showTimeSelect" mode="time" @confirm="timeConfirm" :params="params"
			:default-time='00'></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				serviceList: [],
				showAddDialog: false,
				isEdit: false,
				currentIndex: -1,
				form: {
					name: "",
					contact: "",
					startTime: "",
					endTime: "",
				},
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: true
				},
				showTimeSelect: false,
				timeType: "work", // work or off
				id: ''
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		onShow() {
			this.getlist()
		},
		methods: {
			// 请求客服列表
			getlist() {
				this.$u.get(`/bst/customerService/list?pageNum=1&pageSize=999&areaId=${this.id}`).then(res => {
					if (res.code == 200) {
						this.serviceList = res.rows
					}
				})
			},
			// 添加客服
			addService() {
				if (!this.form.name || !this.form.contact || !this.form.startTime || !this.form.endTime) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				let data = {
					...this.form,
					areaId: this.id
				}
				console.log(data, 111);
				this.$u.post(`/bst/customerService`, data).then(res => {
					if (res.code == 200) {
						this.getlist()
						this.resetForm()
						this.showAddDialog = false
						uni.showToast({
							title: '添加成功',
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},

			// 编辑客服
			editService(index) {
				this.isEdit = true
				this.currentIndex = index
				this.form = {
					...this.serviceList[index]
				}
				this.showAddDialog = true
			},

			// 删除客服
			deleteService(index) {
				uni.showModal({
					title: '提示',
					content: '确定删除该客服吗？',
					success: (res) => {
						if (res.confirm) {
							this.$u.delete(`/bst/customerService/${this.serviceList[index].id}`).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 2000
									})
									this.getlist()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						}
					}
				})
			},

			// 确认添加/编辑
			confirmService() {
				if (this.isEdit) {
					let data = {
						...this.form,
						areaId: this.id
					}
					this.$u.put(`/bst/customerService`, data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'success',
								duration: 2000
							})
							this.getlist()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else {
					this.addService()
				}
				this.resetForm()
				this.showAddDialog = false
			},

			// 重置表单
			resetForm() {
				this.form = {
					name: "",
					contact: "",
					startTime: "",
					endTime: ""
				}
				this.isEdit = false
				this.currentIndex = -1
			},

			// 显示时间选择器
			showTimePicker(type) {
				this.timeType = type
				this.showTimeSelect = true
			},

			// 时间选择确认
			timeConfirm(e) {
				const time = `${e.hour}:${e.minute}:${e.second}`
				if (this.timeType === 'work') {
					this.form.startTime = time
				} else {
					this.form.endTime = time
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-iconfont,
	/deep/ .u-title {
		padding-bottom: 16rpx;
	}

	.page {
		min-height: 100vh;
		background-color: #F7F8FA;
	}

	.container {
		padding: 24rpx;
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		background: linear-gradient(90deg, #409EFF, #64B5FF);
		border-radius: 12rpx;
		color: #fff;
		font-size: 30rpx;
		margin-bottom: 24rpx;
		width: 680rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;

		text {
			margin-left: 10rpx;
		}
	}

	.service-list {
		padding-bottom: 200rpx;
		box-sizing: border-box;

		.service-card {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-bottom: 24rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.card-header {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #262B37;
				}

				.phone {
					font-size: 26rpx;
					color: #909399;
					margin-left: 20rpx;
				}
			}

			.card-body {
				.time-item {
					display: flex;
					margin-bottom: 16rpx;

					.label {
						font-size: 26rpx;
						color: #909399;
						width: 140rpx;
					}

					.value {
						font-size: 26rpx;
						color: #262B37;
					}
				}
			}

			.card-footer {
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 1rpx solid #f5f5f5;

				.btn {
					display: flex;
					align-items: center;
					margin-left: 30rpx;
					font-size: 26rpx;

					text {
						margin-left: 8rpx;
					}
				}

				.edit-btn {
					color: #409EFF;
				}

				.delete-btn {
					color: #F56C6C;
				}
			}
		}

		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 80rpx 0;

			image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 30rpx;
			}

			text {
				font-size: 28rpx;
				color: #909399;
			}
		}
	}

	.dialog-content {
		width: 600rpx;
		padding: 40rpx;

		.dialog-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #262B37;
		}

		.form-item {
			margin-bottom: 30rpx;

			.label {
				display: block;
				margin-bottom: 16rpx;
				font-size: 28rpx;
				color: #606266;
			}

			/deep/ .u-input {
				background-color: #f5f5f5;
				border-radius: 8rpx;
				padding: 0 20rpx;
			}
		}

		.dialog-footer {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			button {
				width: 48%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
			}

			.cancel-btn {
				background-color: #f5f5f5;
				color: #606266;
			}

			.confirm-btn {
				background-color: #409EFF;
				color: #fff;
			}
		}
	}
</style>