<template>
	<el-container class="mainHeaderNoPadding">
		<el-header class="docsHeaderMain">
			<el-row class="docsRow">
				<el-col :span="20">
					<div class="docsHeader">
						<div class="arrowBox">
							<div class="item leftArrow" :class="routerList.length>1?'leftShow':''" @click="prev"><el-icon><el-icon-ArrowLeftBold/></el-icon></div>
							<div class="item rightArrow leftShow" @click="upSearch"><el-icon><el-icon-RefreshLeft/></el-icon></div>
						</div>
						<div class="breadcrumb">
							<el-breadcrumb separator-icon="el-icon-ArrowRight">
								<template v-for="item in routerList" :key="item">
									<el-breadcrumb-item @click="linkRouter(item)">{{item.name}}</el-breadcrumb-item>
								</template>
							</el-breadcrumb>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<el-input type="text" :size="size" v-model="params.keyword" @input="upSearch" prefix-icon="el-icon-Search" placeholder="搜索"></el-input>
				</el-col>
			</el-row>
		</el-header>
		<el-header>
			<div class="left-panel">
				<el-dropdown placement="bottom-start">
					<el-button type="primary" :size="size" style="margin-right: 12px;">新建文档 <el-icon class="el-icon--right"><el-icon-ArrowDown/></el-icon></el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="addShare" icon="sc-icon-CreateShare">创建共享文件夹</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="right-panel">

			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="list.apiObj" :column="list.column" @selection-change="selectionChange" :size="size" border stripe :rowChild="false">
				<el-table-column type="selection" align="center" width="40"></el-table-column>
				<template #name="scope">
					<div class="nameBox" v-if="scope.row.type == 'folder'" @click="openFolder(scope.row)">
						<el-icon size="large"><sc-icon-Folder/></el-icon>
						<div class="text">{{scope.row.name}}</div>
					</div>
					<div class="nameBox" v-else>
						<fileType :fileType="scope.row.file_suffix" />
						<div class="text">{{scope.row.client_file_name}}</div>
					</div>
				</template>
				<template #size="scope">
					<span v-if="scope.row.type == 'folder'"></span>
					<span v-else>{{scope.row.file_size}}</span>
				</template>
				<template #type="scope">
					<span v-if="scope.row.type == 'folder'">文件夹</span>
					<span v-else>
						{{scope.row.file_suffix}}文件
					</span>
				</template>
				<template #is_share="scope">
					{{scope.row.is_share?'是':'否'}}
				</template>
			</scTable>
		</el-main>
	</el-container>

	<shareSave v-if="dialog.shareSave" ref="shareSave" @success="handleSaveSuccess" @closed="dialog.shareSave=false"></shareSave>
</template>

<script>
import shareSave from './shareSave'
import fileType from './fileType'
export default {
	name: 'share',
	components: {
		shareSave,
		fileType
	},
	data() {
		return {
			size:'small',
			routerList: this.$store.state.global.shareRouter,

			dialog: {
				save: false,
				shareSave: false
			},
			list:{
				apiObj: this.$API.docs.share.list,
				column:[]
			},
			selection: [],
			params: {
				keyword: null,
				folder_id:"",
				name:""
			},

		}
	},
	provide(){
		return{
			columnHeaderParams:false,
		}
	},
	methods: {
		linkRouter(item){
			let list = this.filterDataByItem(item,this.$TOOL.objCopy(this.routerList));
			this.routerList = list;
			this.$store.commit("SET_share_router", list);

			this.params.folder_id = item.id;
			this.$refs.table.upData(this.params);
		},
		filterDataByItem(item, arr) {
			const index = arr.findIndex((obj) => obj.id === item.id && obj.name === item.name);
			return arr.slice(0, index + 1);
		},
		//表格选择后回调事件
		selectionChange(selection){
			this.selection = selection;
		},
		addShare(){
			this.dialog.shareSave = true
			this.$nextTick(() => {
				this.$refs.shareSave.open('add').setData(this.params)
			})
		},
		//搜索
		upSearch(){
			this.$refs.table.upData(this.params);
		},
		//本地更新数据
		handleSaveSuccess(data, mode){
			if(mode=='add'){
				this.$refs.table.refresh()
			}else if(mode=='edit'){
				this.$refs.table.refresh()
			}
		},
		uploadFileSuccess(){
			this.$refs.table.refresh();
		},
		prev(){
			if(this.routerList.length < 2){
				return
			}

			this.routerList.splice(this.routerList.length-1,1);
			this.$store.commit("SET_share_router", this.routerList);

			this.params.folder_id = this.routerList[this.routerList.length-1].id;
			this.$refs.table.upData(this.params);
		},
		// 打开文件夹
		openFolder(row){
			let arrList = this.routerList;
			let params = {
				name:row.name,
				id:row.id
			}
			arrList.push(params);
			this.$store.commit("SET_share_router", arrList);

			this.params.folder_id = row.id;
			this.$refs.table.upData(this.params);
		},
	}
}
</script>

<style lang="scss" scoped>
.nameBox{
	display: flex;align-items: center;
	cursor: pointer;
	.el-icon{
		margin-right: 8px;
	}
	.text{
		overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
	}
}
</style>
