<template>
	<div v-loading="loading">
		<div v-if="configs_list.length>0">
			<el-row v-for="(item,index) in configs_list" :key="index">
				<el-form-item   :label="item.label">
					<div class="row">
						<el-input placeholder="字段内容" v-model="configs_list[index].value" />
						<el-button type="primary"  style="margin-left: 10px;" @click="SaveConfigFunc(item.label,item.value)" >保存</el-button>
					</div>
				</el-form-item>
			</el-row>
		</div>
		
		
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted 
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		GetConfigs,SaveConfig
	} from '@/api/api.js'
	
	let configs_list=ref([]);
	let loading=ref(false);
	const GetInfo=()=>{
		loading.value=true
		GetConfigs().then(res => {
			loading.value=false
			if(res.status){
				configs_list.value=res.data	 
			}else{
				ElMessage.error(res.msg)
			}
		})
	}
	const SaveConfigFunc=(label,value)=>{
		loading.value=true
		SaveConfig({label:label,value:value}).then(res => {
			loading.value=false
			if(res.status){
				 GetInfo()
			}else{
				ElMessage.error(res.msg)
			}
		})
	}
	onMounted(()=>{
		GetInfo()
	})
	
</script>

<style scoped>
	.row{
		display: flex;
	}
</style>