<template>
    <div class="default-main">
        <el-card style="display: flex;justify-content: center">
            <div style="max-width: 1500px">
                <div style="display: flex;justify-content: right;margin-bottom: 30px">
                    <el-button type="primary" @click="save()" :disabled="!auth('edit')">保存</el-button>
                </div>
                <el-form :model="formData" ref="formRef" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="企业名称" prop="companyName">
                                <el-input v-model="formData.companyName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="售前电话" prop="preTelephone">
                                <el-input v-model="formData.preTelephone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="售后电话" prop="afterTelephone">
                                <el-input v-model="formData.afterTelephone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="企业邮箱" prop="email">
                                <el-input v-model="formData.email"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="详情描述" prop="description">
                        <editor v-model:modelValue="formData.description"></editor>
                    </el-form-item>
                </el-form>
            </div>


        </el-card>
    </div>
</template>

<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";
import editor from '/@/components/editor/index.vue'
import request from '/@/api/request'
import {sysConfig} from '/@/api/controllerUrls'
import {validatorMobile} from '/@/utils/validate'
import {ElNotification} from "element-plus";
import {auth} from '/@/utils/common'
import { useConfig } from "/@/stores/config";
const config = useConfig()

onMounted(() => {
    getData()
})

let formData = ref({
    companyName: '1',
    preTelephone: '2',
    afterTelephone: '3',
    email: '4',
    description: '5',
})

let rules = reactive({
    companyName: [{required: true, message: '请输入', trigger: 'blur',}],
    preTelephone: [{required: true, message: '请正确输入电话号码', trigger: 'blur',}],
    afterTelephone: [{required: true, message: '请正确输入电话号码', trigger: 'blur',}],
    email: [{required: true, message: '请输入', trigger: 'blur',}],
})

const formRef = ref()

function save() {
    if (!formRef) return
    formRef.value.validate((valid: any) => {
        if (valid) {
            request.edit(sysConfig, {configName: 'about', configValue: formData.value}).then((res:any) => {
                ElNotification({type:'success',message:res.msg,})
            })
        } else {
            return false
        }
    })
}

function getData() {
    request.index(sysConfig, {configName: 'about'}, 'edit').then((res:any) => {
        formData.value = res.data.configValue
    })
}
</script>

<style scoped>

</style>
