<template>
	<div class="container">
		<el-card class="box-card viewOCR">
			<div slot="header" class="clearfix">
		    	<span class="viewOCR-header-name">ocr查看</span>
		  	</div>
		  	<div class="viewOCR-container">
		  		<div class="corFileList">
	  				<el-table
					    v-if="currentTableList" 
						ref="fileListTable" 
						:data="currentTableList" 
						row-key="id" 
						lazy :tree-props= "{children: 'childList', haschildren: 'haschildList'}" 
						@expand-change="expandRow"
						v-loading="loading">
	  					<el-table-column property="name" label="名称" min-width="200">
				    		<template slot-scope="scope">
						    	<i
						    		v-if="scope.row.childList"
						    		:class="{
						    			'folder_icon':true,'folder_icon_open':(scope.treeNode && scope.treeNode.expanded)
						    		}">
						    	</i>
						       	<span class="folderName" :title="scope.row.fileName">{{ scope.row.fileName }}</span>
						    </template>
				    	</el-table-column>
				    	<el-table-column property="sceneName" label="场景"  min-width="100"></el-table-column>
				    	<el-table-column property="careatTime" label="上传时间" min-width="120"></el-table-column>
				    	<el-table-column property="size" label="文件大小" min-width="120"></el-table-column>
				    	<el-table-column label="状态">
				    		<template slot-scope="scope">
				    			<span v-if="scope.row.status==0">未识别</span>
				    			<span v-if="scope.row.status==1">已完成</span>
				    			<span v-if="scope.row.status==2">识别中</span>
				    			<span v-if="scope.row.status==3">识别失败</span>
				    			<span v-if="scope.row.status==4">上传中</span>
				    		</template>
				    	</el-table-column>
				    	<el-table-column label="操作" min-width="70">
				    		<template slot-scope="scope">
				    			<el-button v-if="scope.row.childList" type="text" :disabled="scope.row.status!=1" @click="viewFile(scope.row)">
				    				查看
				    			</el-button>
				    		</template>
				    	</el-table-column>
				  	</el-table>
		  		</div>
		  		<div class="pagination">
		  				<el-pagination
							background
					      	@size-change="handleSizeChange"
					      	@current-change="handleCurrentChange"
					      	:current-page="pageNum"
					      	:page-sizes="[10, 15, 20, 30, 50, 100]"
					      	:page-size="pageSize"
					      	layout="total, sizes, prev, pager, next, jumper"
					      	:total="total"
					    >
						    <span class="current-tatal">第{{pageNum}}页/共{{total}}页</span>
					    	<span class="setPageSize">每页:</span>
			    		</el-pagination>
		  			</div>
		  	</div>
		</el-card>
	</div>
</template>
<script type="text/javascript">
	export default{
		name: 'ViewOCR',
		data(){
			return {
				sceneId: 1,
				isAllChecked: false,
				fileStatusType: '',
				pageNum: 1,
				pageSize: 10,
				total: 0,
				tabelData: [],
				currentTableList: [],
				slectedFolderIds: [],
				dialogTableVisible: false,
				OCRLoading: false,
                loading:false,
			}
		},
		mounted(){
			this.sceneId = this.$route.params.sceneId || '1';
			this.$nextTick( () => {
				this.getOCRFileList();
			});
		},
		methods: {
			getOCRFileList(){
                this.loading=true;
                let that = this;
				this.$ocrhttp({
					url: '/folder/findFolderBySceneId',
					type:'POST',
					data:{
						// sceneId: this.sceneId,
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						status: this.fileStatusType
					},
					success: (res) => {
						if(res.code == 200){
							that.currentTableList = res.rows;
							// this.total = Math.ceil(res.recirds/this.pageSize);
							that.total = res.recirds;
                    		that.loading=false;
						}
					},
					error: (err) => {
						that.loading=false;
						that.$message({
							message: err,
							type: 'error'
						});
					}
				});
			},
			expandRow(row,type){
				// console.log(row);
				// console.log(type);
			},
			setTabelData(){  // 计算当前页数据
				let size = this.pageSize;
				let page = this.pageNum;
				this.currentTableList = [];
				this.tabelData.forEach( (item, index)=> {
					if(index < page * size && index >= (page-1) * size){
						this.currentTableList.push(item);
					}
				});
			},
			viewFile(row){
				let sceneId = row.sceneId;
				let folderId = row.id;
				// 跳转至pdf阅读  分是否主要关键字
				if(!row.id){
					this.$alert('当前文件夹缺少ID，请联系管理员');
				}else if(!!sceneId){
					if(sceneId == "003"){  // 单页关键字
						this.$router.push({path: '/extract',query:{sceneId: sceneId,folderId: folderId}});
						return false;
					}
					// 文件夹关键字
					this.$router.push({path: '/extract_folder',query:{sceneId: sceneId,folderId: folderId}});
				}
			},
			handleSizeChange(pageSize){
				this.pageSize = pageSize;
				// this.setTabelData();
				this.getOCRFileList();
			},
			handleCurrentChange(page){
				this.pageNum = page;
				// this.setTabelData();
				this.getOCRFileList();
			},
			dialogClose(){
				this.$refs['upload'].fileList = [];
				this.$refs['upload'].currentUploadFileIndex = 0;
			},
		},
		watch: {
			fileStatusType(newval,oldval){
				if(newval !== oldval){
					this.currentTableList = [];
					this.pageNum = 1;
					this.getOCRFileList();
				}
			}
		}
	}

</script>
<style type="text/css" scoped>
	.container{
		padding: 5px;
		width: 100%;
		height: 100%;
	}

	.viewOCR{
		position: relative;
		width: 100%;
		height: 100%;
		border: 1px solid #ccc;
	}

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

	.viewOCR-container{
		position: absolute;
		top: 50px;
		left: 20px;
		right: 20px;
		bottom: 10px;
	}

	.corFileList{
		margin-top: 15px;
		position: relative;
		width: 100%;
		height: calc(100% - 50px);
		overflow: auto;
	}

	.corFileList .folder_icon{
		vertical-align: -3px;
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url(/static/image/icon/folder_default.png) no-repeat center center;
	}

	.corFileList .folder_icon.folder_icon_open{
		background: url(/static/image/icon/folder_open.png) no-repeat center center;
	}

	.corFileList .folderName{
		display: inline-block;
		width: calc(100% - 85px);
		line-height: 22px;
		vertical-align: -5px;
		margin-left: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pagination{
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100%;
		height: 42px;
	}


	.pagination .current-tatal{
		float: left;
		font-weight: 400;
	}

	.pagination .setPageSize{
		float: left;
		margin-left: 10px;
		font-weight: 400;
	}

    .fixedbox{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
    }

    .message{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -90px;
        margin-left: -200px;
        width: 400px;
        height:180px;
        text-align: center;
        line-height: 180px;
        background: #fff;
        font-size: 20px;
        border-radius: 3px;
    }
</style>
<style>
	.viewOCR .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;
	}

	.viewOCR .el-table__header-wrapper{
		border: 1px solid #dbdcdc;
		font-size: 14px;
		font-weight: 900;
		color: rgba(60,68,85,0.7);
	}
	.viewOCR .el-table__header-wrapper th{
		height: 50px;
		background: #f3f4f6;
		border-bottom: none;
	}
	.viewOCR .el-table__body-wrapper{
		font-size: 14px;
		color: #3c4455;
	}
	.viewOCR .el-table__body-wrapper .el-table__row--level-1 td{
		height: 42px;
		padding: 0px;
		border: none;
	}
	.viewOCR .el-table__body-wrapper .el-table__row--level-0 td{
		height: 42px;
		padding: 0px;
		border-top : 1px solid #EBEEF5;
	}
	.viewOCR .el-table__body-wrapper .el-table__row--level-0 .el-checkbox {
	    color: #606266;
	    font-weight: 500;
	    font-size: 14px;
	    cursor: pointer;
	    -moz-user-select: none;
	    -webkit-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    margin-right: 10px;
	}

	.viewOCR .el-dialog__header{
		border-bottom: 1px solid #dbdcdc;
	}
	.viewOCR .el-dialog__body{
		padding: 10px 20px;
	    color: #606266;
	    font-size: 14px;
	    word-break: break-all;
	}
	.viewOCR .el-dialog__header .el-dialog__title{
		font-size: 16px;
		font-weight: 900px;
	}

	.viewOCR .el-pagination {
		margin-top: 10px;
	    white-space: nowrap;
	    padding: 2px 5px;
	    color: #303133;
	    font-weight: 700;
	    text-align: right;
	}

	.viewOCR .el-pagination__sizes {
		float: left;
	    margin: 0 10px 0 5px;
	    font-weight: 400;
	    color: #606266;
	}
</style>
