<!--表单事件规则 修改标题-->
<template>
        <el-form
                 ref="eventForm"
                 :model="eventData" label-width="80px"
                 :validate-on-rule-change="false" size="small"
                 style="width: 100%;height: 100%;padding:5px;box-sizing: border-box;">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否显示" prop="isShow" >
                        <el-switch
                                style="margin-left: 15px;margin-right: 15px"
                                v-model="eventData.isShow"
                                active-text="是"
                                active-value="1"
                                inactive-text="否"
                                inactive-value="0">
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="条件切换" prop="changeView" >
                        <el-switch
                                style="margin-left: 15px;margin-right: 15px"
                                v-model="eventData.changeView"
                                active-text="是"
                                active-value="1"
                                inactive-text="否"
                                inactive-value="0">
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
</template>

<script>
    import EventParentConfig from "../../eventParentConfig";
    export default {
        name: "is-show-config",
        eventType: 'tableView',
        eventSource:'1',
        eventName:'隐藏/显示',
        extends: EventParentConfig,
        data(){
            return {

            }
        },
        created() {
            this.initData();
        },
        methods:{
            initData(){
                if(!this.eventData.isView){
                    this.$set(this.eventData,'isView','0');
                }
                if(!this.eventData.isShow){
                    this.$set(this.eventData,'isShow','1'); //隐藏/显示
                }
                if(!this.eventData.changeView){
                    this.$set(this.eventData,'changeView','0'); //条件切换
                }
            },


            //-------------- 模板返回方法 (为事件渲染提供 ) start--------------------------
            /**
             * 如果是表单规则（eventType: 'tableView'）走此渲染方法
             * @vm 当前整个表单对象
             * @CTX 后台url前缀 如 http://localhost:8080
             * @axios axios 请求对象
             * @formData 响应字段配置
             * @affectContent 响应配置（表单规则配置好数据）
             *
             */
            renderTableViewConfig(vm,CTX,axios,formData,affectContent){
              let field = affectContent.field; //当前响应字段
              let visible = (affectContent.isShow == "1") + "";
              vm.$set(formData[field] || {},"visible",visible);
            },

            /**
             * 校验规则，不写默认通过
             * @returns {boolean}
             */
            validateMethod(){
                let result = false;
                this.$refs.eventForm.validate(valid => {
                    result = valid;
                })
                return result;
            },
        }
    }
</script>

<style scoped lang="scss">
    .el-select {
        width:100%;
    }
    .el-card /deep/ .el-card__body {
        padding-bottom: 10px;
    }

    .drag-class {
        .el-card {
            background-color: #F5F6F7;
        }
    }

    .color-set-css {
        display: inline-block;
        height: 17px;
        border-bottom-width:2px;
        border-bottom-style:solid;
    }

    .el-color-picker {
        position: absolute;left: 116px;opacity: 0;
    }

    .form-title-style{
        display: inline-block;
        height: 30px;
        line-height: 22px;
        padding: 0 4px;
        box-sizing: border-box;
        background-color: #ecf5ff;
        box-shadow: -1px -1px 3px lightgray;
        border: 4px outset rgba(236,245,255,0.4);
        border-radius: 4px;
        margin-right: 6px;
        i{
            font-size: 16px;
            cursor: pointer;
            color: #409EFF;
        }
    }

    .form-title-style-active{
        box-shadow: -2px -2px 4px lightgrey;
        border: 4px solid #409EFF;
        background-color: #409EFF;
        i{
            color: #ecf5ff;
        }
    }
</style>
