<template>
	<div v-loading="loading">
		<el-form label-width="120px" style="border: 1px solid #e9e9e9; border-radius: 5px;margin-top: 8px;">
			<el-row style="padding: 20px;margin:10px ;">
				<el-col :span="16">
					站点信息
				</el-col>
			</el-row>
			<el-row style="padding:auto 20px;margin:auto 10px ;">
				<el-col :span="8">
					<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-col>
				<el-col :span="8" style="display:flex;align-items:center;"><el-button type="primary" size="large"
						@click="saveInfo('站点图片')">保 存</el-button></el-col>
			</el-row>
			<el-row  style="padding:auto 20px;margin: auto 10px ;">
							 <el-col :span="8">
								 <el-form-item label="站点名称">
								 	<el-input size="large" v-model="configInfo.站点名称" placeholder="名称"
								 		style="  margin: auto 20px;" />
								 </el-form-item>
							 </el-col>
							 <el-col :span="4">
								 <el-button type="primary" size="large"
								 		@click="saveInfo('站点名称')">保 存</el-button>
							 </el-col>
			</el-row>
			 <el-row  style="padding:auto 20px;margin: auto 10px ;">
				 <el-col :span="8">
					 <el-form-item label="客服电话">
					 	<el-input size="large" v-model="configInfo.客服电话" placeholder="客服电话"
					 		style="  margin: auto 20px;" />
					 </el-form-item>
				 </el-col>
				 <el-col :span="4">
					 <el-button type="primary" size="large"
					 		@click="saveInfo('客服电话')">保 存</el-button>
				 </el-col>
			 </el-row>
			 <el-row  style="padding:auto 20px;margin: auto 10px ;">
			 				 <el-col :span="8">
			 					 <el-form-item label="积分抵扣比例">
			 					 	<el-input size="large" v-model="configInfo.积分抵扣比例" placeholder="积分抵扣比例"
			 					 		style="  margin: auto 20px;" />
			 					 </el-form-item>
			 				 </el-col>
			 				 <el-col :span="4">
			 					 <el-button type="primary" size="large"
			 					 		@click="saveInfo('积分抵扣比例')">保 存</el-button>
			 				 </el-col>
			 </el-row>
			 <el-row  style="padding:auto 20px;margin: auto 10px ;">
			 				 <el-col :span="8">
			 					 <el-form-item label="H5首页欢迎词">
			 					 	<el-input size="large" v-model="configInfo.首页欢迎词" placeholder="H5首页欢迎词"
			 					 		style="  margin: auto 20px;" />
			 					 </el-form-item>
			 				 </el-col>
			 				 <el-col :span="4">
			 					 <el-button type="primary" size="large"
			 					 		@click="saveInfo('首页欢迎词')">保 存</el-button>
			 				 </el-col>
			 </el-row>
			 <el-row style="padding:auto 20px;margin:auto 10px ;">
			 	<el-col :span="8">
			 		<el-form-item label="首页banner">
			 			<el-upload style="margin-left: 20px;" class="avatar-uploader"  :action="upfileurl"
			 				:headers="headerObj" :show-file-list="false" :on-success="BannerUpLoadSuccess">
			 				<img v-if="banner" :src="banner" class="avatar" style="height: 100px;" />
			 				<el-icon v-else class="avatar-uploader-icon">
			 					<Plus />
			 				</el-icon>
			 			</el-upload>
			 		</el-form-item> 
			 	</el-col>
			 	<el-col :span="8" style="display:flex;align-items:center;"><el-button type="primary" size="large"
			 			@click="saveInfo('首页banner')">保 存</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
	}
	let banner=ref('');
	const BannerUpLoadSuccess = (res) => {
		banner.value = import.meta.env.VITE_APP_FILE + res.data
		configInfo.value.首页banner = res.data
	}
	//获取配置信息
	const GetConfig=()=>{
		loading.value=true
		GetConfigInfo().then(res => {
			loading.value=false
		 if(res.status){
			 configInfo.value=res.data
			
			 logo.value=import.meta.env.VITE_APP_FILE+configInfo.value.站点图片
			 banner.value=import.meta.env.VITE_APP_FILE+configInfo.value.首页banner
		 }
		})
	}
	//修改信息
	let configInfo=ref({
		 
	});
	const saveInfo = (name) => {
		let data={[name]:configInfo.value[name]}
		loading.value=true
		SaveConfigInfo({data:data}).then(res => {
			loading.value=false
			if (res.status) {
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
				setTimeout(()=>{
					//location.reload();
				},500)
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	onMounted(()=>{
		GetConfig()
	})
</script>

<style scoped>
 .avatar-uploader .avatar {
   width: 178px;
   height: 178px;
   display: block;
 }
</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>