<template>
	<div class="other_box">
		<div class="btns">
			<el-button class="btn" type="primary" @click.stop="openModalUpload(1)" size="mini">OCR识别(上传)</el-button>
			<el-button class="btn" type="primary" @click.stop="gotoOcrView" size="mini">OCR查看</el-button>
		</div>
		<el-dialog title="上传文件" :visible.sync="dialogTableVisible" :close-on-click-modal="false" :close-on-press-escape="false"  width="550px" height="400px" :before-close="closeUploadFile">
			<UploadeFolder ref="upload" :sceneId="sceneId" v-if="dialogTableVisible"></UploadeFolder>
		</el-dialog>
	</div>
</template>
<script type="text/javascript">
	import UploadeFolder from '../common/uploadFolder/uploadFolder.vue';
	export default {
		name: 'Other',
		components:{
			UploadeFolder,
		},
		data(){
			return {
				dialogTableVisible: false,
				sceneId: '',
			}
		},
		mounted(){
			this.$bus.on('closeFileUploadDialog',() => {
				this.dialogTableVisible = false;
			});
		},
		computed:{
			getFileNameUrl(){
				return '/demo/show?fileName=' + this.fileNameUrl;
			}
		},
		methods:{
			openModalUpload(id){
				this.sceneId = id;
				this.$nextTick( () => {
					this.dialogTableVisible = true;
				});
			},
			gotoOcrView(){
				this.$router.push({path: '/viewOCR'});
			},
			closeUploadFile(done){
				if(this.$refs['upload'].fileList.length > 0){
					this.$refs['upload'].abort();
				}else{
					done();
				}
			},
		}
	}
</script>
<style type="text/css" scoped>
	.other_box{
		width: 100%;
		height: 100%;
		padding-top: 20px;
		padding-left: 20px;
	}

	.btns{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn{
		margin: 0px 30px;
		width: 200px;
		height: 70px;
		border-radius: 6px;
		font-size: 18px;
	}

</style>
