<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-form-item label="分享标题" prop="title">
                        <el-input v-model="formData.title"></el-input>
                    </el-form-item>
                    <el-form-item label="分享简介" prop="description">
                        <el-input type="textarea" v-model="formData.description"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="shareUrl" label="分享图片">
                                <pictureUpload :size="1000000"
                                               v-model:fileUrl="formData.shareUrl"></pictureUpload>
                                <div class="mt-5" style="font-size: 10px;color: #92969a;line-height: initial;">
                                    图片控制在1MB以内，图片尺寸建议按照1：1比例设计
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="showedUrl" label="展示图片">
                                <pictureUpload :size="1000000"
                                               v-model:fileUrl="formData.showedUrl"></pictureUpload>
                                <div class="mt-5" style="font-size: 10px;color: #92969a;line-height: initial;">
                                    图片控制在1MB以内，图片尺寸建议按照1：1比例设计
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="详情描述" prop="ruleDescription">
                        <editor v-model:modelValue="formData.ruleDescription" ></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";
import pictureUpload from '/@/components/pictureUpload/index.vue'


const config = useConfig()

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

let formData = ref({
    title: '',
    description: '',
    shareUrl: '',
    showedUrl: '',
    ruleDescription: '',
})

let rules = reactive({
    title: [{required: true, message: '请输入分享标题', trigger: 'blur',}],
    description: [{required: true, message: '请输入分享简介', trigger: 'blur',}],
    shareUrl: [{required: true, message: '请上传分享图片', trigger: 'blur',}],
    showedUrl: [{required: true, message: '请上传展示图片', trigger: 'blur',}],
    ruleDescription: [{required: true, message: '请输入规则介绍', trigger: 'blur',}],
})

const formRef = ref()

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

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

<style scoped>

</style>
