<template>
	<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" addable @tab-add="addConfig" style="margin: 10px;">
		<el-tab-pane :label="group.title" :name="group.values" v-for="group in configGroup" :key="group.values">
			<sc-form :ref="'form'+group.values" :config="formConfig" v-model="form" :loading="loading">
				<el-button type="primary" @click="handleSubmit">保 存</el-button>
			</sc-form>
		</el-tab-pane>
		<template #add-icon>
			<el-icon-select />
		</template>
	</el-tabs>
	<save v-if="dialog.save" ref="saveDialog" @success="getConfigField" @closed="dialog.save = false"></save>
</template>

<script>
import save from './save'

export default {
	name: 'system.setting',
	components: {
		save
	},
	data() {
		return {
			dialog: {save: false},
			activeName: 'system',
			loading: false,
			form: {},
			formLabelWidth: '120px',
			configGroup: this.$TOOL.data.get('cache_setting_group'),
			formConfig: {
				labelWidth: '130px',
				labelPosition: 'right',
				size: 'medium',
				formItems: []
			}
		}
	},
	watch: {
		configGroup: {
			handler(val) {
				if(val && val.length > 0){
					this.activeName = val[0].values
				}
			},
			deep: true,
			immediate: true
		},
		activeName: {
			handler(val) {
				this.getConfigField()
				this.$nextTick(() => {
					this.getConfigList()
				})
			},
			deep: true,
			immediate: true
		}
	},
	mounted(){
	},
	methods: {
		async getConfigList(){
			let res = await this.$API.system.setting.list.get()
			if(res.code == 1){
				this.form = res.data;
				this.$TOOL.data.set('cache_config', res.data)
			}
		},
		async getConfigField(){
			this.dialog.save = false
			this.loading = true
			let res = await this.$API.system.setting.fields.get({group_name: this.activeName});
			if(res.code == 1){
				this.formConfig.formItems = res.data;
				this.loading = false
			}
		},
		async handleSubmit(){
			let res = await this.$API.system.setting.save.post(this.form)
			if(res.code == 1){
				this.$message.success(res.message);
				this.getConfigList()
			}else{
				this.$message.error(res.message);
			}
		},
		handleClick(e){
		},
		addConfig(){
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open().setData({group: this.activeName})
			})
		},
		table_edit(row){
			if(row.isSet){
				row.isSet = false
			}else{
				row.isSet = true
			}
		},
		table_del(row, index){
			this.setting.splice(index, 1)
		},
	}
}
</script>

<style>
</style>
