<template>
	<div v-loading="loading">
		<el-form label-width="180px" style="border: 1px solid #e9e9e9; border-radius: 5px;margin-top: 8px;">
			<el-row style="padding: 20px;margin:10px ;" v-if="loginUserinfo.group==5">
				<el-col :span="16">
					站点信息
				</el-col>
			</el-row>
			<el-row style="padding: 20px;margin:10px ;" v-if="loginUserinfo.group==5">
				<el-col :span="16">
					<el-form-item label="Logo">
						<el-upload style="margin-left: 20px;" class="avatar-uploader" :action="upfileurl"
							:headers="headerObj" :show-file-list="false" :on-success="upLoadSuccess">
							<img v-if="logo" :src="logo" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
					</el-form-item>
					<el-form-item label="站点名称">
						<el-input size="large" v-model="configInfo.站点名称" placeholder="名称"
							style="  margin: auto 20px;" />
					</el-form-item>
				</el-col>
				<el-col :span="8" style="display:flex;align-items:center;"><el-button type="primary" size="large"
						@click="saveInfo({
			'站点名称': configInfo.站点名称,
			'站点图片': configInfo.站点图片
		})">保 存</el-button></el-col>
			</el-row>
			<el-row style="padding: 20px;margin:10px ;">
				<el-col :span="16">
					缴费截止时间设置
				</el-col>
			</el-row>
			<el-row style="padding: 20px;margin:10px ;">
				<el-col :span="16">
					<el-form-item label="缴费截止时间(单位:小时)">
						<el-input size="large" v-model="configInfo.门诊缴费超时时间" placeholder="名称"
							style="  margin: auto 20px;" />
						<span class="tishi">*门诊患者医嘱对应检查项目预约成功后超过设置时间未缴费将被取消预约</span>
					</el-form-item>
					<el-form-item label="缴费截止时间(单位:小时)">
						<el-input size="large" v-model="configInfo.门诊缴费轮询间隔" placeholder="名称"
							style="  margin: auto 20px;" />
						<span class="tishi">*设置多少分钟进行一次门诊预约是否缴费检查</span>
					</el-form-item>
				</el-col>
				<el-col :span="8" style="display:flex;align-items:center;"><el-button type="primary" size="large"
						@click="saveInfo({
			'门诊缴费超时时间': configInfo.门诊缴费超时时间,
			'门诊缴费轮询间隔': configInfo.门诊缴费轮询间隔
		})">保 存</el-button></el-col>
			</el-row>
			<el-row style="padding: 20px;margin:10px ;">
				<el-col :span="16">
					黑名单设置
				</el-col>
			</el-row>
			<el-row style="padding: 20px;margin:10px ;">
				<el-col :span="16">
					<el-form-item label="爽约次数限制">
						<el-input size="large" v-model="configInfo.爽约次数限制" placeholder="名称"
							style="  margin: auto 20px;" />
						<span class="tishi">*患者到预约日期，未及时检查是为爽约，超过规定次数拉入黑名单，禁止预约</span>
					</el-form-item>
					 
				</el-col>
				<el-col :span="8" style="display:flex;align-items:center;"><el-button type="primary" size="large"
						@click="saveInfo({
			'爽约次数限制': configInfo.爽约次数限制,
		})">保 存</el-button></el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		UpFileUrl,
		SaveConfigInfo,
		GetConfigInfo
	} from '@/api/api.js'
	let loading = ref(false)
	let upfileurl = UpFileUrl()
	let headerObj = {
		Authorization: 'Bearer ' + sessionStorage.getItem("token")
	}
	let logo = ref('');
	//上传成功钩子
	const upLoadSuccess = (res) => {
		logo.value = import.meta.env.VITE_APP_FILE + res.data
		configInfo.value.站点图片 = res.data
	}
	//获取配置信息
	const GetConfig = () => {
		loading.value = true
		GetConfigInfo().then(res => {
			loading.value = false
			if (res.status) {
				configInfo.value.站点名称 = res.data.站点名称
				configInfo.value.站点图片 = res.data.站点图片
				logo.value = import.meta.env.VITE_APP_FILE + configInfo.value.站点图片
				configInfo.value.门诊缴费超时时间 = res.data.门诊缴费超时时间
				configInfo.value.门诊缴费轮询间隔 = res.data.门诊缴费轮询间隔
				configInfo.value.爽约次数限制 = res.data.爽约次数限制
			}
		})
	}
	//修改信息
	let configInfo = ref({
		站点名称: '',
		站点图片: ''
	});
	const saveInfo = (data) => {
		loading.value = true
		SaveConfigInfo({
			info: data
		}).then(res => {
			loading.value = false
			if (res.status) {
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
				setTimeout(() => {
					location.reload();
				}, 500)
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	let loginUserinfo = ref(null);
	if (sessionStorage.getItem("LoginUserInfo")) {
		loginUserinfo.value = JSON.parse(sessionStorage.getItem("LoginUserInfo"))
	}
	onMounted(() => {
		GetConfig()
	})
</script>

<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.tishi {
		color: #aaa;
	}
</style>
<style>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 50px;
		height: 50px;
		text-align: center;
	}
</style>