<template>
    <el-container style="height: 100%;width: 100%">
        <el-form :model="imgForm" label-width="80px" label-position="right" style="width: 100%" ref="form" size="small">
            <el-form-item label="图片标识" prop="imgCode" :rules="plValidate('required')">
                <el-input v-model="imgForm.imgCode"></el-input>
            </el-form-item>
            <el-form-item label="图片宽度" prop="width">
                <el-input v-model="imgForm.width" placeholder="默认80px，保持原始尺寸输入auto"></el-input>
            </el-form-item>
            <el-form-item label="图片高度" prop="height">
                <el-input v-model="imgForm.height" placeholder="默认80px，保持原始尺寸输入auto"></el-input>
            </el-form-item>
            <el-form-item label="图片下载" prop="download">
                <el-switch v-model="imgForm.download" active-value="1" inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
            </el-form-item>
            <el-form-item label="无图片时" prop="text">
                <el-input v-model="imgForm.text" placeholder="默认显示暂无图片"></el-input>
            </el-form-item>
        </el-form>
    </el-container>
</template>

<script>
    import eventParentConfig from "../../eventParentConfig";
    export default {
        name: "show-img-config",//eventKey事件唯一标识(保证唯一性)
        extends: eventParentConfig,
        eventType:'list', //规则类型 'tableView'表单事件  list:列表事件 flow 流程事件
        eventName:'查看图片', //事件显示名称
        version:"1.0",
        renderKey:'show-img-render', //渲染模版对应的唯一标识（渲染组件 name）
        data(){
            return {
                eventSource: 'list',
                eventShowName:'查看图片',
                imgForm:{
                    imgCode:""
                }
            }
        },

        created() {
            this.initData(); //配置数据初始化
        },
        methods:{
            /**
             * 执行配置数据初始化，对于传入参数 configData 初始值设置或者数据回填显示
             */
            initData(){
                this.eventSource = 'list';
                this.eventName = "查看图片";
                this.imgForm = JSON.parse(JSON.stringify(this.cloumnFormatterObj || {}));
            },

            //-------------- 模板返回方法 (为事件渲染提供 ) start--------------------------
            /**
             * 表单规则、流程规则渲染方法
             */
            renderConfig(){

            },
            validateMethod(){
                let result = false;
                this.$refs.form.validate(valid => {
                    result = valid;
                })
                return result;
            },
            /**
             * 列表规则返回
             */
            getConfigDatas(){
                return this.imgForm;
            },
            // ---------------------- 模板返回方法 end -----------------------------

        }
    }
</script>

<style scoped>
    .diy-class{
        position: relative;
    }
    .diy-class /deep/ .is-controls-right{
        width: 70px;
    }
    .diy-class /deep/ .el-input-number__decrease{
        width: 20px;
        left: 24px;
    }
    .diy-class /deep/ .el-input-number__increase{
        width: 20px;
        left: 24px;
    }
    .diy-class /deep/ .el-input__inner{
        padding: 0;
        width: 30px;
        position: relative;
        left: -25px;
    }

    .diy-class /deep/ .el-color-picker__trigger{
        width: 18px;
        height: 18px;
    }
</style>