<template>
    <div v-if="!isError">
        <el-popover
                placement="left"
                width="400"
                trigger="hover">
            <el-table :data="gridData">
                <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
                <el-table-column v-for="(item,index) in fieldName" :key="index" :property="item" :label="paramObj[item]" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <a v-if="aShow && item==aShowField" :href="aParam?url+aHref+aParam:url+aHref+scope.row['id']"><span>{{scope.row[item]}}</span></a>
                        <span v-else> {{scope.row[item]}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <a href='javascript:void(0);' slot="reference">{{title}}</a>
        </el-popover>

    </div>
    <div v-else>{{this.showValue}}</div>
</template>

<script>
    import ColumnFormatParentRender from "./columnFormatParentRender";
    export default {
        /**
         *  列格式化 弹出一个povper 内置一个表格
         *  配置的是参数为表格的列名,title为列的A标签值不配置默认为n个,本行的value为表格的值，value是数组对象.属性名一定要对应配置的列名
         *  特殊参数说明:  title外部行显示的内容,aShow:是否需要开启a标签，aHref:a标签跳转路径,
         *  aParam:a标签拼接的参数值，不填则为vaule数组对象中的id,aShowField为a标签的字段名对应特殊参数
         *  value 不填则为默认的行数据的value,有值则是该条数据对应的字段
         *  errorShow 错误显示内容
         */
        name: "popver-comp-render",
        extends:ColumnFormatParentRender,
        data(){
            return {
                result:"",
                isError:false,
                title:"",
                gridData: [],
                fieldName:[],
                aShow:false,
                aShowField:"",
                aHref:"",
                aParam:"",
                url:this.api.baseUploadUrl,
                showValue:"",
                errorShow:"",
            }
        },
        created(){
            this.initData();
        },
        methods:{
            initData(){
                this.isError=false;
                let arr;
                try {
                    if(!this.paramObj["value"]){//value
                        arr=JSON.parse(this.value);
                    }else{//获得value参数对应的数据
                        if(Object.keys(this.rowData)){
                            let formId="";
                            Object.keys(this.rowData).forEach(item =>{//从行数据中获得formId, 取ID字段分割获得
                                if(item.includes("ID")&& item.split("_").length==2){
                                    formId=item.split("_")[1];
                                }
                            })
                            arr=this.rowData[this.paramObj["value"]+"_"+formId];//先赋值一次，再格式化
                            arr=JSON.parse(this.rowData[this.paramObj["value"]+"_"+formId]);
                            delete this.paramObj.value;
                        }
                    }
                    if(Array.isArray(arr)){//value 为数组对象格式
                        if(!this.paramObj["titile"]){//标题
                            this.title=arr.length+"个";
                        }else{
                            this.title=JSON.parse(JSON.stringify(this.paramObj["titile"]));
                            delete this.paramObj.title;
                        }
                        if(!this.paramObj["aShow"]){//是否开启a标签
                            this.aShow=false;
                        }else{
                            this.aShow=true;
                            delete this.paramObj.aShow;
                            if(this.paramObj["aShowField"]){
                                this.aShowField=this.paramObj["aShowField"];
                                delete this.paramObj.aShowField;
                            }
                            if(this.paramObj["aHref"]){
                                this.aHref=this.paramObj["aHref"];
                                if(this.paramObj["aParam"]){
                                    this.aParam=this.paramObj["aParam"];
                                    delete this.paramObj.aParam;
                                }
                                delete this.paramObj.aHref;
                            }else{
                                this.aHref="javascript:void(0);";
                                delete this.paramObj.aHref;
                            }
                        }
                        this.gridData=arr;
                        Object.keys(this.paramObj).forEach(item =>{
                            if(item !='errorShow'){
                                this.fieldName.push(item);
                            }
                        })
                    }else{
                        this.isError=true;
                        this.showValue=arr || this.value;
                        return;
                    }
                }catch (e) {
                    this.isError=true;//解析异常就直接popver显示value
                    if(this.paramObj["errorShow"]){
                        this.showValue=this.paramObj["errorShow"];
                    }else{
                        this.showValue=arr || this.value;
                    }

                }
            },
        }
    }
</script>

<style scoped>
    .text-shenglue{
        display:block;
        word-break:keep-all;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        -icab-text-overflow:ellipsis;
        -khtml-text-overflow:ellipsis;
        -moz-text-overflow: ellipsis;
        -webkit-text-overflow:ellipsis;
    }
</style>
