<template>
    <el-config-provider :locale="zhCn">
        <el-container class="content">
            <fieldset class="input-area">
                <legend>系统配置</legend>
                <div v-for="config in configs">
                    <el-form :model="config" :label-position="'top'" label-width="100px" style="max-width: 544px"
                        :rules="rules" status-icon>
                        <el-row :gutter="16">
                            <el-col :span="12" :offset="1" v-if="config.configKey == 'MAIL_ADDRESS'">
                                <el-form-item label="邮箱账户（账户之间用；隔开）">
                                    <div>
                                        <el-input v-model="config.configValue" @change="updateCurrentConfig(config)" />
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :offset="1"
                                v-if="config.configType == '1' && config.configKey != 'MAIL_ADDRESS'">
                                <el-form-item :label="config.configName">
                                    <div>
                                        <el-input v-model="config.configValue" @change="updateCurrentConfig(config)" />
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :offset="1"
                                v-if="config.configType == '2' && config.configKey != 'MAIL_ADDRESS'">
                                <el-form-item :label="config.configName">
                                    <div v-if="config.configType == '2'">
                                        <el-select v-model="config.configValue" multiple collapse-tags collapse-tags-tooltip
                                            :placeholder="'请选择' + config.configName" @change="updateCurrentConfig(config)">
                                            <el-option v-for="(value, index) in mails" :key="index" :label="value"
                                                :value="value" />
                                        </el-select>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </fieldset>
        </el-container>
    </el-config-provider>
</template>

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { getConfigs, updateConfig } from '@/api/config.js'
import { ElMessage, ElLoading } from 'element-plus'
</script>
<script>
export default {
    name: 'config',
    data() {
        return {
            configs: [],
            mails: [],
            rules: {}
        }
    },
    mounted() {
        this.getAllConfigs()
    },
    methods: {
        getAllConfigs() {// 查询所有的系统配置
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            getConfigs().then(res => {
                loading.close()
                this.configs = res.data
                this.configs.forEach((config) => {
                    if (config.configType == '2') {
                        const tempArray = config.configValue.split(';')
                        config.configValue = tempArray
                    }
                    if (config.configKey == 'MAIL_ADDRESS') {
                        const tempArray = config.configValue.split(';')
                        this.mails = tempArray
                    }
                })
            }).catch(err => {
                console.log(err)
                loading.close()
                ElMessage.error('查询系统配置失败！')
            })
        },
        updateCurrentConfig(config) {// 更新系统配置
            // 复制一下config
            const param = Object.assign({}, config)
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            if (param.configType == '2') {
                param.configValue = param.configValue.join(';')
            }
            updateConfig(param).then(res => {
                loading.close()
                if (res.data.code == 0) {
                    ElMessage({
                        message: '更新系统配置成功！',
                        type: 'success',
                    })
                } else {
                    ElMessage.error(res.data.message)
                }
            }).catch(err => {
                loading.close()
                ElMessage.error('更新系统配置失败！')
            })
        }
    }
}
</script>

<style scoped>
.content {
    display: flex;
    width: 100%;
}

.input-area {
    margin: 10px;
    width: 100%;
    height: 85%;
    border: solid 1px;
    border-radius: 10px;
    box-shadow: 0px 15px 10px -15px #000;
}

.el-row .el-form-item .el-select {
    width: 512px;
}

.el-row .el-form-item .el-input {
    width: 512px;
}

.el-row .el-form-item .el-button {
    margin: auto;
}
</style>