<template>
    <div style="width: 100%;text-align: center">
        <el-popover
                placement="left"
                width="400"
                trigger="hover"  v-if="Number(value) > 0">
            <el-table :data="gridData">
                <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
                <el-table-column prop="name" label="文件名称" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <a @click="clickUrl(scope.row)" href='javascript:void(0);' ><span>{{scope.row["name"]}}</span></a>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="上传时间">
                </el-table-column>
            </el-table>
            <a href='javascript:void(0);' slot="reference"> {{value + "个"}}</a>
        </el-popover>
        <span v-else>暂无附件</span>
    </div>
</template>
<script>
export default { // 请求后加载组件示例
    name: "list-upload-render",
    props:{
        value:{
            type:String,
            default:""
        },
        showField:{type:Object},
        rowData:{type:Object},
    },
    data(){
        return {
            gridData:[],
        }
    },
    created() {
        this.init();
    },
    watch: {
        rowData() {
            this.init();
        },
    },
    methods:{
        init(){
            let dataId = this.rowData["ID_" + this.showField.formDefineKey];
            let fieldId = this.showField.fieldId;
            this.axios.post(this.api.upload.find,{fkId:dataId + "_" + fieldId}).then(res => {
                this.gridData = res.data;
            })
        },
        clickUrl(row){
            let url = this.api.upload.downloadFile + "?id=" + row.id;
            let link = document.createElement('a');
            url = encodeURI(url);
            link.setAttribute('href', url);
            link.click();
            link = null;
        }
    }
}
</script>

<style scoped>

</style>