<!--
 * @Date: 2021-07-08 11:02:40
 * @LastEditTime: 2022-07-27 10:48:43
 * @Description: 广告位
-->
<template>
    <div class="app-container">    
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
                    <!-- <el-form-item label="图片" prop="image">
                        <uploadFile :url.sync="ruleForm.image" type="image" />
                    </el-form-item> -->
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="ruleForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="remark">
                        <el-input v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="链接" prop="link">
                        <el-input v-model="ruleForm.link"></el-input>
                    </el-form-item>
                    <el-form-item label="链接标题" prop="linkTitle">
                        <el-input v-model="ruleForm.linkTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="是否新开页面打开">
                        <el-radio-group v-model="ruleForm.newOpen">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    </el-form-item>
                </el-form>
    </div>
</template>
<script>
import { shuzirenremark } from '@/api/aigc'
import { saveGuangGao } from '@/api/homePage'
// import uploadFile from '@/components/uploadFile'

export default {
    // components: {
    //     uploadFile
    // },
    data() {
        return {
            ruleForm: {
                id: '',
                image: '',
                link: '',
                newOpen: '1',
                remark: '',
                linkTitle: ''
            },
            rules: {
                image: [
                    { required: true, message: '请上传图片', trigger: 'blur' }
                ],
                link: [
                    { required: true, message: '请输入链接', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            shuzirenremark().then(res => {
                this.ruleForm.id = res.id
                this.ruleForm.image = res.image
                this.ruleForm.link = res.link
                this.ruleForm.newOpen = res.newOpen
                this.ruleForm.linkTitle = res.linkTitle
                this.ruleForm.remark = res.remark
                this.ruleForm.title = res.title
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    saveGuangGao(this.ruleForm).then(res => {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        })
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>
