<template>
	<div class="container">
		<el-card class="box-card extract">
			<div slot="header" class="clearfix">
		    	<span class="extract-header-name">主名称</span>
		  	</div>
		  	<div class="extract-container">
		  		<Control class="control" :sceneId="sceneId" :folderId="folderId"></Control>
		  		<div class="extract-main">
		  			<div class="extract-main-left">
			  			<div :class="[!isShowPDF?'retract':'','fl']" ref="pdfparent">
			  				<PDF :PDFH="PDFH" :pageNum="pageNum" :pageTotal="pageTotal" :fileInfo="fileInfo"></PDF>
			  				<div class="telescopic" @click="togglePdf">
			  					<span>{{isShowPDF? '收起' : '展开'}}</span>
					  			<i :class="[isShowPDF? 'el-icon-arrow-left': 'el-icon-arrow-right']"></i>
					  		</div>
			  			</div>
			  			<div :class="[!isShowOCR?'retract':'','fl']" ref="ocrparent">
			  				<OCR :pageNum="pageNum" :pageTotal="pageTotal" :fileInfo="fileInfo"></OCR>
			  				<div class="telescopic" @click="toggleOCR">
				  				<span>{{isShowOCR? '收起' : '展开'}}</span>
					  			<i :class="[isShowOCR? 'el-icon-arrow-left': 'el-icon-arrow-right']"></i>
					  		</div>
			  			</div>
			  			<div :class="[!isShowKeyWord?'retract':'','fl']" ref="keywordparent">
			  				<KeyWord :pageNum="pageNum" :keyWordList="keyWordList" :fileId="currentFileId"></KeyWord>
			  				<div class="telescopic" @click="toggleKeyWord">
				  				<span>{{isShowKeyWord? '收起' : '展开'}}</span>
					  			<i :class="[isShowKeyWord? 'el-icon-arrow-left': 'el-icon-arrow-right']"></i>
					  		</div>
			  			</div>
			  		</div>
			  		<div class="paginationbox">
			  			<!-- <div :style="{'width':pagination1Width+'px'}" class="pagination">
			  				<ToggleFile :fileList="fileList" v-if="isShowPDF || isShowOCR"></ToggleFile>
			  			</div>
			  			<div :style="{'width':pagination2Width+'px'}" class="pagination">
			  				<Pagination :numPages="Math.ceil(keyWordList.length/keyWordPageSize)" v-if="isShowKeyWord"></Pagination>
			  			</div> -->
			  			<div style="width: 100%" class="pagination">
			  				<ToggleFile :fileId="currentFileId" :fileList="fileList" v-if="isShowPDF || isShowOCR"></ToggleFile>
			  			</div>
			  		</div>
		  		</div>
		  	</div>
		</el-card>
		<el-dialog title="上传文件" :visible.sync="dialogTableVisible" :close-on-click-modal="false" :close-on-press-escape="false"  width="550px" :before-close="closeUploadFile">
			<UploadeFolder ref="upload" :sceneId="sceneId" v-if="dialogTableVisible"></UploadeFolder>
		</el-dialog>
	</div>
</template>
<script type="text/javascript">
	import Control from '../common/discern/control'
	import Pagination from '../common/discern/pagination'
	import ToggleFile from '../common/discern/toggleFile'
	import PDF from '../common/discern/pdf'
	import OCR from '../common/discern/ocr'
	import UploadeFolder from '../common/uploadFolder/uploadFolder.vue'
	import KeyWord from './comp/keyWord'
	export default{
		name: 'Extract',
		components: {
			Control,
			PDF,
			OCR,
			KeyWord,
			Pagination,
			ToggleFile,
			UploadeFolder
		},
		data(){
			return {
				sceneId: '',
				folderId: '',
				fileList: [],
				currentFileId: '',
				pageNum: 1,
				pageTotal: '',
				// pdfInfo:{},
				fileInfo: {},
				keyWordList: [],
				keyWordPageSize: 50,

				PDFH: '',
				dialogTableVisible: false,
				isShowKeyWord: true,
				isShowPDF: true,
				isShowOCR: true,
				pagination1Width: '',
				pagination2Width: '',
			}
		},
		created(){
			this.sceneId = this.$route.query.sceneId;
			this.folderId = this.$route.query.folderId;
		},
		mounted(){
			this.PDFH = this.$refs['pdfparent'].offsetHeight;

			// 更换文件夹
			this.$bus.on('updateFolderId',folderId => {
				this.pageNum = 1;
				this.folderId = folderId;
			});

			// 切换文件
			// let _this = this;
			// this.$bus.on('toggleFile',params => {
			// 	console.log(fileId)
			// 	if(fileId !== this.currentFileId){
			// 		this.currentFileId = fileId;
			// 		this.pageNum = 1;
			// 		_this.del_highLight();
			// 	}
			// });
			
			// 切换文件
			this.$bus.on('toggleFile',params => {
				let fileId = '';
				let pageNum = '';
				this.del_highLight();
				if(params instanceof Object){
					fileId = params.fileId;
					pageNum = params.pageNum;
				}else{
					fileId = params;
				}
				if(fileId !== this.currentFileId){
					this.currentFileId = fileId;
				}
				this.pageNum = pageNum || 1;
			});

			// 切换文件页码
			this.$bus.on('updatePageNum',pageNum => {
				if(pageNum !== this.pageNum){
					this.pageNum = pageNum;
					this.getFileInfo();
					this.getkeywword();
				}
            });

			//打开文件上传
			this.$bus.on('openFileUpload',() => {
				this.dialogTableVisible = true;
			});

			// 关闭文件上传
			this.$bus.on('closeFileUploadDialog',() => {
				this.dialogTableVisible = false;
			});

			this.$nextTick( () => {
				this.setPaginationWidth();
			});
		},
		methods: {
            del_highLight(){
                let floatmasks = document.querySelectorAll('div[id^=floatmask]');
                for(let i = 0,l = floatmasks.length;i < l;i ++){
                    document.getElementById("masks").removeChild(floatmasks[i]);
                }
            },
			getFolderFileList(){
                this.$ocrhttp({
                    url: '/folder/findFileList',
                    type: 'POST',
                    data:{
                        parentId:  this.folderId,
                        page: 1,
                        pageSize: 10000000
                    },
                    success: (res) => {
                        if(res.code == 200 && res.rows instanceof Array){
                        	if(res.rows[0] instanceof Object){
                        		this.currentFileId = res.rows[0].id; // 默认第一个的id
                        	}
							this.fileList = res.rows;
                        }
                    },
                    error: (err) => {

                    }
                });
            },
            getFileInfo(){
                this.$ocrhttp({
                    url: '/folder/findFileByfileId',
                    type: 'POST',
                    data: {
                        fileId: this.currentFileId,
                        pageNum: this.pageNum
                    },
                    success: (res) => {
                        if(res.code == 200){
                        	if(res.data.length > 0){
                        		this.fileInfo = res.data[0];
                        		this.getFilePageNums();
                        	}
                        	// this.getPdfDoc(res.data[0].singlePagePdf);
                        }
                    },
                    error: (err) => {

                    }
                });
            },
            getkeywword(){
                this.$ocrhttp({
                    url: '/folder/findByPdfId',
					type: 'POST',
					data:{
                        fileId: this.currentFileId,
                        pageNum: this.pageNum-1
					},
                    success: (res)=> {
                        if(res.code == 200){
							let data = res.data;
                            for(let i = 0,l = data.length;i < l ;i ++){
                            	let item = data[i];
                            	let tips = [];
                            	if(!!data[i].coordinate){
                            		tips = JSON.parse(data[i].coordinate);
                            	}

                            	if(tips instanceof Array){
                            		item.keyPosition = [];
                            		for(let j = 0,m = tips.length;j < m;j ++){
                            			item.keyPosition.push([tips[j].left,tips[j].top,tips[j].width, tips[j].height]);
                            		}
                            	}
                            }
                            this.keyWordList = data;
                        }
                    },
                    error: (err) => {

                    }
                });
            },
            getFilePageNums(){
            	this.fileList.forEach( (item,index) => {
            		if(item.id == this.currentFileId){
            			this.pageTotal = item.sumPageNum;
            		}
            	})
            },
			//设置分页的容器宽度
			setPaginationWidth(){
				this.pagination1Width = this.$refs['pdfparent'].offsetWidth + this.$refs['ocrparent'].offsetWidth - 1;
				this.pagination2Width = this.$refs['keywordparent'].offsetWidth - 5;
			},
			togglePdf(){
				if(this.isShowKeyWord || this.isShowOCR){
					this.isShowPDF = !this.isShowPDF;
					this.$nextTick( () => {
						this.setPaginationWidth();
					});
				}
			},
			toggleOCR(){
				if(this.isShowKeyWord || this.isShowPDF){
					this.isShowOCR = !this.isShowOCR;
					this.$nextTick( () => {
						this.setPaginationWidth();
					});
				}
			},
			toggleKeyWord(){
				if(this.isShowPDF || this.isShowOCR){
					this.isShowKeyWord = !this.isShowKeyWord;
					this.$nextTick( () => {
						this.setPaginationWidth();
					});
				}
			},
			closeUploadFile(done){
				if(this.$refs['upload'].fileList.length > 0){
					this.$refs['upload'].abort();
				}else{
					done();
				}
			}
		},
		watch: {
            folderId(newval,oldval){
                if(newval != oldval){
					this.getFolderFileList();
                }
			},
            currentFileId(newval,oldval){
                if(newval != oldval){
                	this.$nextTick( () => {
						this.getFileInfo();
                    	this.getkeywword();						
                	})
                }
            },
        }
	}

</script>
<style type="text/css" scoped>
	.container{
		padding: 5px;
		width: 100%;
		height: 100%;
	}
	.extract{
		position: relative;
		width: 100%;
		height: 100%;
		border: 1px solid #ccc;
	}

	.extract-header-name:before{
		content: '';
		display: inline-block;
		margin-right: 5px;
		width: 5px;
		height: 16px;
		vertical-align: -2px;
		border-left: 3px solid #467EFA;
	}

	.extract-container{
		position: absolute;
		top: 50px;
		left: 0px;
		right: 0px;
		bottom: 0px;
	}

	.extract-main{
		padding: 0px 20px;
		width: 100%;
		height: calc(100% - 50px);
	}

	.extract-main-left{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		flex-grow: 1;
		flex-shrink: 1;
		width: 100%;
		height: calc(100% - 42px);
		border: 1px solid #dbdcdc;
		border-right: none;
	}
	.extract-main-left > div{
		position: relative;
		flex-grow: 1;
		flex-shrink: 1;
		width: 33.333%;
		height: 100%;
		border-right: 1px solid #dbdcdc;
	}
	.extract-main-left > div.retract{
		width: 26px;
		flex-grow: 0;
	}
	.extract-main-left > div.retract > :not(.telescopic){
		opacity: 0;
	}
	.extract-main-left .telescopic{
		position: absolute;
		top: 50%;
		right: 0px;
		margin-top: -30px;
		width: 26px;
		height: 60px;
		text-align: center;
		line-height: 20px;
		background: #409eff;
		border-radius: 2px;
		cursor: pointer;
		color: #fff;
		opacity: 0;
		transition: opacity 0.5s;
	}
	.extract-main-left > div:hover .telescopic,
	.extract-main-left > div.retract .telescopic{
		opacity: 1;
	}

	.retractPDF i,
	.retractKeyword i{
		font-size: 18px;
		color: #fff;
	}

	.paginationbox{
		width: 100%;
		height: 42px;
		border: 1px solid #dbdcdc;
	}

	.paginationbox .pagination{
		float: left;
		height: 42px;
	}
	.paginationbox .pagination:nth-of-type(2){
		border-left: 1px solid #dbdcdc;
	}

</style>
<style>
	.extract .el-card__header {
	    padding: 0px 20px ;
	    height: 50px;
		line-height: 50px;
	    border-bottom: 1px solid #ccc;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    font-weight: 900;
	}

</style>
