<!--
 * @template: singleImg
 * @Descripttion: 单图图片模板
-->
<template>
    <div class="singleImg-content">
        <el-divider>
            <su-update-input
                :init-style="initStyle"
                maxlength="15"
                v-model="title"
                :rows="1"
            />
        </el-divider>
        <div class="singleImg-img">
            <su-upload v-model="imgData"
                       :side-width="sideWidth"
                       :side-height="sideHeight"
                       type="SingleImage"></su-upload>
            <span class="img-tips">建议尺寸：{{ sideWidth * 2 }}px X {{ sideHeight * 2 }}px <br>(高度可扩展)</span>
        </div>
    </div>
</template>

<script>
import suUpload from "../../../form/su-upload";
import suUpdateInput from "../../../form/su-update-input";

export default {
    name: "SingleImg",
    components: {
        suUpload,
        suUpdateInput
    },
    data() {
        return {
            title: '单图图片',
            imgData: null,
            initStyle: {
                "width": "300px",
                "font-size": "18px",
                "font-weight": "bold",
            },
            sideWidth: 343,
            sideHeight: 120,
        };
    },
    methods: {
        // 初始化数据
        initData(data) {
            this.data = data;
            this.imgData = data.img;
        },
        // 获取数据
        getData() {
            return {
                title: this.title,
                img: this.imgData ? this.imgData.serverUrl : '',
            };
        },
        // 校验数据
        verify() {
            let bool = this.imgData && this.imgData.serverUrl;
            if(!bool) {
                alert("请上传图片！")
                return false;
            }
            return true;
        }
    }
};
</script>

<style scoped lang="less">
.singleImg-content {
    text-align: center;

    .singleImg-img {
        display: inline-block;
        width: 100%;

        .img-tips {
            //position: absolute;
            left: 10px;
            top: 55px;
            font-size: 14px;
            color: red;
        }
    }
}
</style>
