<template>
    <div>
        <div class="coentent">
            <div class="contents-area">
                <div v-loading="loading">
                    <div class="inputs" v-for="(item, index) in configList" :key="item.name || index">
                        <div class="input-left">
                            {{ item.title || item.name }}
                        </div>
                        <div class="input-right">
                            <!-- text 类型显示输入框 -->
                            <el-input 
                                v-if="item.type === 'text'"
                                v-model="item.value" 
                                class="inpus" 
                                :placeholder="item.desc || '请输入内容'">
                            </el-input>
                            <!-- select 类型显示下拉框 -->
                            <el-select 
                                v-else-if="item.type === 'select'"
                                v-model="item.value" 
                                class="inpus" 
                                :placeholder="item.desc || '请选择'">
                                <el-option
                                    v-for="option in getSelectOptions(item)"
                                    :key="option.value"
                                    :label="option.label"
                                    :value="option.value">
                                </el-option>
                            </el-select>
                            <!-- 其他类型可以在这里扩展 -->
                            <el-input 
                                v-else
                                v-model="item.value" 
                                class="inpus" 
                                :placeholder="item.desc || '请输入内容'">
                            </el-input>
                        </div>
                    </div>
                </div>
                <div class="footers">
                    <el-button type="primary" style="background-color: #5165f7;" size="small">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {configList} from '@/api/system/Configuration/index'
export default {
    data() {
        return {
            loading: false,
            configList: [] // 存储配置列表数据
        }
    },
    mounted() {
        this.getConfigList()
    },
    methods: {
        // 获取系统配置列表
        getConfigList() {
            this.loading = true
            const params = {}
            configList(params).then((res) => {
                if (res && res.code === 1 && res.data) {
                    const list = res.data
                    // 更新配置列表数据
                    if (Array.isArray(list)) {
                        // 按照 order 排序
                        this.configList = list
                            .map(item => ({
                                ...item,
                                value: item.value || '' // 确保有默认值
                            }))
                            .sort((a, b) => (a.order || 0) - (b.order || 0))
                    } else {
                        this.configList = []
                    }
                } else {
                    this.configList = []
                }
            }).catch(error => {
                console.error('获取系统配置列表失败:', error)
                this.configList = []
                // 错误信息已经在 request.js 的拦截器中处理并显示
            }).finally(() => {
                this.loading = false
            })
        },
        // 获取下拉框的选项（如果 item 有 options 属性，直接使用；否则可以根据需要扩展）
        getSelectOptions(item) {
            // 如果配置项有 options 属性，直接使用
            if (item.options && Array.isArray(item.options)) {
                return item.options
            }
            // 如果配置项有 optionsStr 字符串，可以解析为数组
            if (item.optionsStr && typeof item.optionsStr === 'string') {
                try {
                    return JSON.parse(item.optionsStr)
                } catch (e) {
                    // 如果不是 JSON，可以按逗号分割
                    return item.optionsStr.split(',').map(opt => {
                        const parts = opt.trim().split(':')
                        return {
                            label: parts[1] || parts[0],
                            value: parts[0]
                        }
                    })
                }
            }
            // 默认返回空数组
            return []
        }
    }
}
</script>

<style scoped>
.footers{
    text-align: center;
    margin-top: 30px;
}
.input-right{
    border: 1px solid #6A6E8C;
}
.input-left{
    padding-left: 15px;
    padding-top: 12px;
    min-width: 120px;
    font-size: 14px;
    color: #363636;
}
.inpus{
    width: 600px;
    margin-left: 12px;
}
.inputs{
    margin-top: 12px;
    display: flex;
    align-items: center;
}
.coentent {
    width: 100%;
    height: 100%;
    background: white;
}

.contents-area {
    width: 100%;
    margin-top: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.areas {
    width: 97%;
    margin: 0 auto;
}

.headers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 18px;
}

.headers-left {
    display: flex;
    align-items: center;
}

.headers-name {
    font-size: 15px;
    color: #17192C;
}

.headers-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-label {
    font-size: 14px;
    color: #6A6E8C;
}

.filter-select {
    width: 140px;
}

.content-table {
    background: #fff;
    border-radius: 8px;
}

.footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.link-btn {
    color: #5165F7;
}

::v-deep .config-row td {
    color: #363636;
}

::v-deep .el-table__body tr:hover > td {
    background-color: #F7F8FF !important;
}
</style>