<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: 20px;margin:10px ;">
				<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.name" 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">保 存</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.logo = res.data
	}
	//获取配置信息
	const GetConfig=()=>{
		loading.value=true
		GetConfigInfo().then(res => {
			loading.value=false
		 if(res.status){
			 configInfo.value.name=res.data.站点名称
			 configInfo.value.logo=res.data.站点图片
			 logo.value=import.meta.env.VITE_APP_FILE+configInfo.value.logo
		 }
		})
	}
	//修改信息
	let configInfo=ref({
		name:'',
		logo:''
	});
	const saveInfo = () => {
		loading.value=true
		SaveConfigInfo({
			'name': configInfo.value.name,
			'logo': configInfo.value.logo
		}).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>