<template>
    <el-container>
        <!-- 这里加载的是格式化渲染组件，此组件是为了加载格式化显示的内容 -->
        <!--此处为了兼容老事件规则数据数据-->
        <component v-if="isNewData=='0'&& useComp
                   && formatObj['resource'] == 'event'
                   &&FORM_PLUGIN['listColumnFormatters'][formatObj.chooseFunc]
                   &&FORM_PLUGIN['listColumnFormatters'][formatObj.chooseFunc]['render']"
                   :is="FORM_PLUGIN['listColumnFormatters'][formatObj.chooseFunc]['render']"
                   :showField="showField" :row-data="rowData" :column="column" :rowIndex="rowIndex"
                   :columnFormatDialogObj="columnFormatDialogObj" :pRefs="pRefs" :pVm="pVm"
                   :sysDataObj="sysDataObj"
                   :config-data="formatObj.configData" :value="value" :paramObj="formatObj.paramObj"
                   :before-render-comp="beforeRenderComp" :after-render-comp="afterRenderComp"
                   :formatObj="formatObj" :existEvent="existEvent"
                   @runEvent="bindRunEvent" style="width: 100%"
        >
        </component>

        <!--新事件规则数据-->
        <component v-else-if="isNewData=='1'
                   && useComp
                   && formatObj['resource'] == 'event'
                   && EVENT_PLUGIN['installEventObj'][formatObj.chooseFunc]
                   && EVENT_PLUGIN['installEventObj'][formatObj.chooseFunc]['render']"
                   :is="EVENT_PLUGIN['installEventObj'][formatObj.chooseFunc]['render']"
                   :showField="showField" :row-data="rowData" :column="column" :rowIndex="rowIndex"
                   :columnFormatDialogObj="columnFormatDialogObj" :pRefs="pRefs" :pVm="pVm"
                   :sysDataObj="sysDataObj"
                   :config-data="formatObj.configData" :value="value" :paramObj="formatObj.paramObj"
                   :formatObj="formatObj" :existEvent="existEvent"
                   :before-render-comp="beforeRenderComp" :after-render-comp="afterRenderComp"
                   @runEvent="bindRunEvent" style="width: 100%"
        >
        </component>

        <list-upload-render v-else-if="showField.specialField === 'upload'"
                            :row-data="rowData" :value="result" :showField="showField">

        </list-upload-render>

        <!-- end -->
        <div v-else @click="bindRunEvent()" @dblclick="bindRunEvent()" style="width: 100%">
            <marquee v-if="showField.textShowType == 'light'" direction="left">{{result}}</marquee>
            <div style="width: 100%" :class="showField.textShowType == 'overflow' ? 'cell el-tooltip' : 'cell'" v-else>{{result}}</div>
        </div>

        <!-- 这里加载的是事件的渲染组件，其实此组件仅仅是为了加载其中的事件 -->
        <component v-if="FORM_PLUGIN['listColumnEvents'][formatObj.chooseEvent]
                   && FORM_PLUGIN['listColumnEvents'][formatObj.chooseEvent]['render']"
                   :is="FORM_PLUGIN['listColumnEvents'][formatObj.chooseEvent]['render']"
                   :formatObj="formatObj" :paramObj="formatObj.paramObj" :row-data="rowData" :value="value"
                   :rowFieldIdData="rowFieldIdData" :dialogTitleText="dialogTitleText"
                   ref="eventRenderRef" style="width: 100%"
        >
        </component>
        <!-- end -->
    </el-container>
</template>

<script>
    import listUploadRender from "./render/listUploadRender.vue";

    export default {
        name: "format-render",
        components: {listUploadRender},
        props:{
            columnFormatObj:{type:Object},
            showField:{type:Object},
            rowData:{type:Object},
            column:{type:Object},
            sysDataObj:{type:Object},
            showFieldType:{type:Object},
            beforeRenderComp:{type:Object},
            afterRenderComp:{type:Object},
            formFieldObj:{type:Object}, // 字段信息
            rowFieldIdData:{type:Object},//行字段结果
            loadAfterCompSuccess:{type:Boolean},// 请求后加载组件
            isNewData:{type:String,default:'0'}, //是否是新事件数据，默认0
            rowIndex:{type:String,default:'0'},//行号
            columnFormatDialogObj:{type:Object},
            pRefs:{type:String,default:''},//行号
            pVm:{type:Object},
            loadSysDataSuccess:{type:Boolean},
        },
        data(){
            return {
                fieldId:"",
                value:"", // 实际列的值，可能是元数据也可能是一些code码
                result:"", // 展示在页面上的显示结果，包括转换后的
                useComp:false,
                formatObj:{}, // 列格式化数据
                existEvent:false,
                dialogTitleText: "查看"
            }
        },
        created(){
            this.initData();
            this.initColumnFormat();
            this.initDialogTitleText();
        },
        watch:{
            rowData(){
                this.initData();
                this.initColumnFormat();
                this.initDialogTitleText();
            },
            loadAfterCompSuccess(){
                this.initData();
                this.initColumnFormat();
                this.initDialogTitleText();
            },
            loadSysDataSuccess:{
                handler(){
                    this.initData();
                    this.initColumnFormat();
                    this.initDialogTitleText();
                },
                immediate:true
            }
        },
        methods:{
            initDialogTitleText() {
                if(!this.formatObj.eventSetData){
                    return;
                }
              if (this.formatObj.eventSetData['tableViewId']) {
                this.FORM_GLOBAL.getTableViews(this.formatObj.eventSetData['tableViewId']).then(tableviewsData => {
                  if (tableviewsData.dialogTitleText) {
                    this.dialogTitleText = "查看" + tableviewsData.dialogTitleText;
                  }
                });
              } else if (this.formatObj.eventSetData['listViewId']) {
                this.FORM_GLOBAL.getListViews(this.formatObj.eventSetData['listViewId']).then(tableviewsData => {
                  if (tableviewsData.viewName) {
                    this.dialogTitleText = "查看" + tableviewsData.viewName;
                  }
                });
              }
            },
            initData(){
                this.fieldId = this.showField["fieldId"];
                let eventSet = this.FORM_PLUGIN['listColumnEvents'][this.formatObj.chooseEvent] || {};
                let eventName = eventSet["runEvent"] || "runEvent";
                this.$nextTick(() => {
                  if(this.$refs.eventRenderRef && this.$refs.eventRenderRef[eventName]){
                    this.existEvent = true;
                  }
                })

            },
            initColumnFormat(){
                let showField = this.showField;
                let rowData = this.rowData;
                this.value =  (rowData[showField.fieldName + "_" + showField.formDefineKey]) || "";
                let allFieldIdArr = showField.allFieldIdArr || [];
                if(allFieldIdArr.length > 0){
                    let valArr = [];
                    allFieldIdArr.forEach(fieldId =>{
                        if(this.rowFieldIdData[fieldId]){
                            valArr.push(this.rowFieldIdData[fieldId]);
                        }
                    });
                    if(showField.linkSign){
                        this.value = valArr.join(showField.linkSign);
                    }else{
                        this.value = valArr.join("-");
                    }
                }
                this.result = this.value;
                this.useComp = false;
                if(Number(showField.dataCode)){ // 是元数据，开始转换
                    let templateValue = this.value;
                    let templateArr = [];
                    let valueArr = [];
                    let cascadeSelectArr = [];
                    if(templateValue){
                      if(templateValue.indexOf(";") > -1){
                        cascadeSelectArr = templateValue.split(";");
                      }else if(templateValue.indexOf("-")>-1){
                        templateArr = templateValue.split("-");
                      }else if(templateValue instanceof Array){
                        templateArr = templateValue;
                      }else{
                        templateArr = templateValue.split(",");
                      }
                    }
                    if(cascadeSelectArr.length > 0){
                      cascadeSelectArr.forEach(item => {
                        let tempValueArr = [];
                        item.split(",").forEach(key => {
                            if(!key){
                                return;
                            }
                          if(!this.sysDataObj[key]){
                            // console.log("列表配置的元数据列并未匹配到元数据！");
                            tempValueArr.push(key);
                          }else{
                            tempValueArr.push((this.sysDataObj[key] || {}).dataName);
                          }
                        })
                        valueArr.push(tempValueArr.join("/"));
                      })
                      this.result = valueArr.join(";");
                    }else{
                      templateArr.forEach(value => {
                          if(!value){
                              return;
                          }
                        if(!this.sysDataObj[value]){
                          // console.log("列表配置的元数据列并未匹配到元数据！");
                          valueArr.push(value);
                        }else{
                          valueArr.push((this.sysDataObj[value] || {}).dataName);
                        }
                      });
                      if(this.showFieldType[showField.fieldId] === 'checkbox'){
                          this.result = valueArr.join(",");
                      }else{
                          this.result = valueArr.join("-");
                      }
                    }
                }
                if(this.columnFormatObj[showField.fieldId]){
                    this.formatObj = JSON.parse(JSON.stringify(this.columnFormatObj[showField.fieldId]));
                    if(this.formatObj){
                        let paramObj = this.formatObj.paramObj || {};
                        (this.formatObj.paramData || []).forEach(item => {
                            if(item.paramType == "rowData"){
                                let fieldInfo = this.formFieldObj[item.paramVal];
                                if(fieldInfo){
                                    paramObj[item.paramKey] = rowData[fieldInfo.phyfieldName + "_" + fieldInfo.formDefineKey];
                                }else if((item.paramVal || "").indexOf(",") > -1){ // 这是系统字段，id、created等
                                    let arr = item.paramVal.split(",");
                                    paramObj[item.paramKey] = rowData[arr[0].toUpperCase() + "_" + arr[1]];
                                }
                            }
                        });
                        this.$nextTick(() => {
                            this.useComp = true;
                        })
                    }
                    this.formatObj = this.formatObj || {};
                }
            },
            runEvent(){
                let eventSet = this.FORM_PLUGIN['listColumnEvents'][this.formatObj.chooseEvent] || {};
                let eventName = eventSet["runEvent"] || "runEvent";
                this.$refs.eventRenderRef && this.$refs.eventRenderRef[eventName] &&
                this.$refs.eventRenderRef[eventName](this.rowData,this.value,this.formatObj.eventSetData,this.column);
            },
            /**
             * 绑定单击或双击事件，根据配置设置，如果是自定义组件则在渲染组件中直接调用this.$emit('runEvent')即可。
             */
            bindRunEvent(eventType){
                if(this.formatObj["triggerType"] === eventType){ // 事件类型匹配时生效
                    this.runEvent();
                }
            }
        }
    }
</script>

<style scoped>

</style>
