<template>
	<el-container>
		<el-main>
			<el-card shadow="never" class="setting">
				<x-page-header title="系统设置" description="可以配置和修改网站的各种设置" icon="el-icon-setting"></x-page-header>
				<el-tabs tab-position="left" v-model="activename"  v-loading="loading">
					<el-tab-pane v-for="item in settingList" :key="item.key" :label="item.name" :name="item.key">
						<x-form ref="formref" :config="formList[item.key]" v-model="info" :loading="loading"> </x-form>
					</el-tab-pane>
					<el-tab-pane label="扩展配置">
						<el-alert title="扩展配置为系统业务所有的配置" type="warning" style="margin-bottom: 15px;"></el-alert>
						<x-form-table v-model="extend" :hideAdd="true" drag-sort placeholder="暂无数据">
							<el-table-column label="KEY" prop="key" width="150">
								<template #default="scope">
									<el-input  v-model="scope.row.key" placeholder="请输入内容"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="VALUE" prop="value" width="350">
								<template #default="scope">
									<el-input v-model="scope.row.value" placeholder="请输入内容"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="备注" prop="title">
								<template #default="scope">
									<el-input  v-model="scope.row.title" placeholder="请输入内容"></el-input>
								</template>
							</el-table-column>
						</x-form-table>
						<el-button type="primary" icon="el-icon-plus" @click="table_add" style="margin-top: 20px;"></el-button>
					</el-tab-pane>
				</el-tabs>
			</el-card>
		</el-main>
		<el-footer>
			<el-button type="primary" @click="submit" style="max-width: 500px; width: 100%;" :loading="submitloading">保存</el-button>
		</el-footer>
	</el-container>
</template>

<style scoped>
	.setting{
		height: 100%;
	}

	.setting /deep/ .el-card__body{
		height: 100%;
		padding: 0;
	}

	.x-page-header{
		padding: 10px 25px;
	}

	.setting /deep/ .el-tabs__item.is-active{
		background-color: #f6f8fa;
	}

	.setting /deep/ .el-tabs--left{
		height: 100%;
	}
	
	.setting /deep/ .el-tabs__content{
		padding: 20px;
		overflow-y: scroll;
		height: 100%;
	}

	.setting /deep/ .el-tabs {
	    --el-tabs-header-height: 50px;
	}

	.setting /deep/ .el-tabs--left .el-tabs__header.is-left{
		margin: 0;
		min-width: 120px;
	}

	.el-footer{
		padding: 10px;
	    height: 51px;
	    margin: 0;
	    text-align: center;	
	}
	

</style>


<script>
	export default {
		name: 'setting',
		data() {
			return {
				info: {},
				activename:'init',
				settingList:[],
				extend:[],
				formList:{},
				loading:false,
				submitloading:false,
			}
		},
		mounted() {
			this.render()
		},
		methods: {
			render(){
				this.loading = true;
				setTimeout(async ()=>{
					var res =  await this.$http.get('setting/get');
					if (res.code!=200) {
						this.$message.warning(res.message)
						return false;
					}
					this.settingList = res.data.settingList;
					this.info = res.data.info;
					this.formList = res.data.formList;
					this.extend = res.data.extend || [];
					this.loading = false;

					if (res.data.activename) {
						this.activename = res.data.activename;
					}

				},100)
			},
			async submit(){
				this.submitloading = true;
				var  res = this.$http.post('setting/submit', {info:this.info,extend:this.extend});
				this.submitloading = false;
				this.$message.success(res.message || "操作成功")

			},
			table_add(){
				var newRow = {
					key: "",
					value: "",
					title: ""
				}
				this.extend.push(newRow)
			},
		}
	}
</script>

<style>
</style>
