<!--修改内容-->
<template>
    <!--事件定义的实际都是 在el-form下，ref 都是 eventForm  -->
    <el-form
            ref="eventForm"
            :model="eventData" label-width="120px"
            :validate-on-rule-change="false" size="small"
            style="width: 100%;height: 100%;padding:5px;box-sizing: border-box;">
        <el-row>
            <el-col :span="8">
                <el-form-item label="链接页面" prop="linkPageType" :rules="plValidate('required')">
                    <el-select v-model="eventData.linkPageType" style="width: 100%">
                        <el-option v-for="(item,index) in pageTypeArr"
                                   :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="16">
                <el-form-item label="列表资源" v-if="eventData.linkPageType == 'listView'" prop="listViewId"
                              :rules="plValidate('required')">
                    <el-select v-model="eventData.listViewId" style="width: 100%" filterable>
                        <el-option v-for="item in listViewArr" :label="item.label" :value="item.value" :key="item.value">

                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="表单资源" v-if="eventData.linkPageType == 'tableView'" prop="tableViewId"
                              :rules="plValidate('required')">
                    <el-select v-model="eventData.tableViewId" style="width: 100%" filterable>
                        <el-option v-for="item in tableviewArr" :label="item.label" :value="item.value" :key="item.value">

                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="页面地址" v-if="eventData.linkPageType == 'newPage'" prop="pageUrl"
                              :rules="plValidate('required')">
                    <el-input v-model="eventData.pageUrl" placeholder="外部链接请加上https://或http://">
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row v-if="'tableView,listView'.indexOf(eventData.linkPageType) > -1">
            <el-col :span="8">
                <el-form-item label="对话框宽度" prop="dialogWidth" :rules="plValidate('required')"
                              style="padding-right: 80px;box-sizing: border-box">
                    <el-input v-model="eventData.dialogWidth">
                    </el-input>
                    <el-select v-model="eventData.dialogWidthUnit" style="position: absolute;width: 75px;right: -80px">
                        <el-option label="%" value="%">%</el-option>
                        <el-option label="px" value="px">px</el-option>
                        <el-option label="vh" value="vh">vh</el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="对话框高度" prop="dialogHeight" :rules="plValidate('required')"
                              style="padding-right: 80px;box-sizing: border-box">
                    <el-input v-model="eventData.dialogHeight">
                    </el-input>
                    <el-select v-model="eventData.dialogHeightUnit" style="position: absolute;width: 75px;right: -80px">
                        <el-option label="%" value="%">%</el-option>
                        <el-option label="px" value="px">px</el-option>
                        <el-option label="vh" value="vh">vh</el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="顶部间距" prop="topSpace" :rules="plValidate('required')"
                              style="padding-right: 80px;box-sizing: border-box">
                    <el-input v-model="eventData.topSpace">
                    </el-input>
                    <el-select v-model="eventData.topSpaceUnit" style="position: absolute;width: 75px;right: -80px">
                        <el-option label="%" value="%">%</el-option>
                        <el-option label="px" value="px">px</el-option>
                        <el-option label="vh" value="vh">vh</el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="参数绑定">
                    <param-common :param-data="eventData.paramData" :dataTreeArr="dataTreeArr"
                                  :useFieldObjArr="fieldAllArr" ref="paramRef"></param-common>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
    import EventParentConfig from "../../eventParentConfig";
    import ParamCommon from "./paramCommon";
    export default {
        name: "open-content-config",
        components: {ParamCommon},
        extends: EventParentConfig,
        eventType: 'tableView',
        eventName:'新建页面链接',
        props:{
            dataTypeArr:{type:Array,default:() => {return [];}},
            dataTreeObj:{type:Object,default:() => {return {};}},
            dataTreeArr:{type:Array,default:() => {return [];}},
            formBaseObj:{type:Object,default:() => {return {};}},
            formAndFieldObj:{type:Object,default:() => {return {};}},
            fieldAllArr:{type:Array,default:() => {return [];}}
        },
        data(){
            return{
                pageTypeArr:[
                    {label:"表单视图",value:"tableView"},
                    {label:"列表视图",value:"listView"},
                    {label:"自定义地址",value:"newPage"}
                ],
                transToFormId:{},
                listViewArr:[],
                tableviewArr:[]
            }
        },
        created(){
            this.initData();
        },
        methods:{
            initData(){
                if(!this.eventData.linkPageType){
                    this.$set(this.eventData,'linkPageType','tableView');//默认值
                }
                if(!this.eventData.dialogWidth){
                    this.$set(this.eventData,'dialogWidth','90');//默认值
                }
                if(!this.eventData.dialogWidthUnit){
                    this.$set(this.eventData,'dialogWidthUnit','%');//默认值
                }
                if(!this.eventData.dialogHeight){
                    this.$set(this.eventData,'dialogHeight','90');//默认值
                }
                if(!this.eventData.dialogHeightUnit){
                    this.$set(this.eventData,'dialogHeightUnit','%');//默认值
                }
                if(!this.eventData.topSpace){
                    this.$set(this.eventData,'topSpace','5');//默认值
                }
                if(!this.eventData.topSpaceUnit){
                    this.$set(this.eventData,'topSpaceUnit','vh');//默认值
                }
                if(!this.eventData.paramData){
                    this.$set(this.eventData,'paramData',[]);//默认值
                }
                this.initTableViewData();
                this.initListViewData();
            },
            /**
             * 校验规则，不写默认通过
             * @returns {boolean}
             */
            validateMethod(){
                let result = false;
                this.$refs.eventForm.validate(valid => {
                    result = valid;
                })
                if(result){
                    this.eventData.paramData = this.$refs.paramRef.getParam();
                }
                return result;
            },
            /**
             * 初始化数据
             */
            initListViewData(){
                let arr = [];
                this.listViewArr = [];
                this.spcpFormAxios.post(this.api.resources.find,{rSource:"form"}).then(res => {
                    (res.data||[]).forEach(item => {
                        if(arr.indexOf(item.rkey) == -1){
                            this.listViewArr.push({
                                label:item.rname,
                                value:item.rkey,
                            });
                            arr.push(item.rkey);
                            this.transToFormId[item.rkey + "-listView"] = item.rclassId;
                        }
                    })
                })
            },
            /**
             * 初始化数据
             */
            initTableViewData(){
                let arr = [];
                this.tableviewArr = [];
                this.spcpFormAxios.post(this.api.resources.find,{rSource:"singleForm"}).then(res => {
                    (res.data||[]).forEach(item => {
                        if(arr.indexOf(item.rkey) == -1){
                            this.tableviewArr.push({
                                label:item.rname,
                                value:item.rkey,
                            });
                            arr.push(item.rkey);
                            this.transToFormId[item.rkey + "-tableView"] = item.rclassId;
                        }
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>
