<template>
    <el-form ref="form" :model="data">
        <el-form-item label="页面名称：">
            <el-input v-model="data.name" class="title-input" placeholder="请输入页面名称"></el-input>
        </el-form-item>
        <el-form-item label="分享标题：">
            <el-input v-model="data.title" class="title-input" placeholder="请输入分享标题" maxlength="24" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="分享图片：">
            <su-upload v-model="image" :sideLength="140" type="SingleImage">
                <div slot="tip" class="el-upload__tip" style="text-align: center">建议尺寸：660px × 528px</div>
            </su-upload>
        </el-form-item>
    </el-form>
</template>

<script>
import suUpload from "../../../form/su-upload/index";

export default {
    name: "component-page",
    components: {
        suUpload
    },
    data(){
        return {
            /* 组件json数据 */
            data:{
                name:"",
                title:"",
                img:"",
            },
            image:null,
        }
    },
    methods:{
        /**
         * 初始化数据
         * @param data
         */
        async initData(data){
            Object.assign(this.data,{
                name:data.name,
                title:data.title,
                img:data.img,
            })
            this.image = {serverUrl:data.img};
        },
        /**
         * 校验数据是否完成
         */
        async verify(){
            return true;
        },
        /**
         * 获取组件数据
         * @returns {any}
         */
        async getData(){
            this.data.img = (this.image||{}).serverUrl;
            return this.data;
        },
    }
}
</script>

<style scoped>

</style>
