<template>
	<div class="knwldir">
		<van-search v-model="value" placeholder="请输入文件内容关键词" />
		<div class="top" ref="top">
		  <span v-for="(item,index) in tablist" :key="index" >
		  <span class="tabname" :style="(index<(tablist.length-1)?'color: #378DEC;':'color: #333;')" @click="(index<(tablist.length-1)?backtop(item.id,item.parentHasPerm):'')">{{item.name}}</span>
			  <span v-show="index<(tablist.length-1)"> <i style="font-size: 12px" class="awsui-iconfont">&#xe717;</i> </span>

		  </span>
		</div>
		<div class="content" :style="contentH">
			<div class="item">
				<van-cell
						is-link
						v-for="(item, index) in list"
						clickable
						:key="index"
						@click="onCell($event,item,index)"
				>
					<i class="awsui-iconfont" :style="item.hasPerm?'':'color:#c8c9cc;'" :class="{default:item.default}">&#58913;</i>{{item.name}}
				</van-cell>
			</div>
			<div v-show="hasPerm&&list.length>0&&cardlist.length>0" class="divide"></div>
			<div :style="heights" v-show="cardlist.length>0">
				<ul class="list" :style="heights">
					<van-list
							v-model="loading"
							:finished="finished"
							@load="downLoad"
							finished-text="没有更多了"
							loading-text="加载中..."
							:offset="offset"
					>
						<li v-for="(item,index) in cardlist" :key="index" @click="(isNeedBorrow&&item.createUser!=item.uid)?'':onDetail(item)">
							<div class="left">
								<div class="title">{{item.cardName}}</div>
								<div class="description">
									<label>
										{{item.publishUsername}}
									</label>
									<label v-if="item.cardContext!=''" class="line">|</label>
									<label>
										{{item.publishTime}}
									</label>
									<label class="line">|</label>
									<label>阅读(<font>{{item.readCount}}</font>）
									</label>
								</div>
							</div>
							<div v-show="isDimensionManager||isNeedBorrow" class="right" @click.stop="openDialog(item)">
								<i v-show="isNeedBorrow&&item.createUser!=item.uid" class="awsui-iconfont">&#xe878;</i>
								<i v-show="!isNeedBorrow" class="awsui-iconfont" >&#xe611;</i>
							</div>

						</li>
					</van-list>
				</ul>
			</div>
			<van-loading v-show="initLoad" size="24" style="line-height: 120px;height: 120px;text-align: center"/>
			<div v-show="!initLoad&&list.length==0&&cardlist.length==0">
				<div class="con">
					<div class="img">
						<img src="../assets/no_content.png" alt="" style="width: 110px;">
					</div>
					<div class="text">暂无数据</div>
				</div>
			</div>
		</div>
		<van-dialog v-model="showDialog" show-cancel-button @confirm="handleDialog">
			<span style="text-align: center;padding: 20px 0;display: inline-block;width: 100%;">{{dialogMsg}}</span>
		</van-dialog>
		<van-action-sheet v-model="showShare" :title="activeCardName">
			<div class="content" style="width: 100%;padding: 20px 0px">
				<div class="options_op" @click="editorFun">
					<div class="icon"><i class="awsui-iconfont">&#xe622;</i></div>
					<div class="label">编辑</div>
				</div>
				<div class="options_op" @click="publishFun">
					<div class="icon" ><i class="awsui-iconfont">&#xe745;</i></div>
					<div class="label">发布</div>
				</div>
				<div class="options_op" @click="unPublish">
					<div class="icon"><i class="awsui-iconfont" style="color: red;">&#59126;</i></div>
					<div class="label">取消发布</div>
				</div>
				<div class="options_op" @click="logData">
					<div class="icon"><i class="awsui-iconfont">&#xe6de;</i></div>
					<div class="label">日志</div>
				</div>
			</div>
		</van-action-sheet>
	</div>
</template>

<script>
	import awsuiAxios from "../awsuiAxios";
	export default {
		name: 'sub-knwldir',
		data() {
			return {
				contentH:"",
				offset:10,
				isLoadingData:false,
				loading:false,
				finished:false,
				initLoad:true,//初始化页面标志
				curPage:0,
				heights:"",
				hasPerm:true,
				value: '',
				id: 0,
				name: '',
				list: [],
				cardlist:[],
				showShare:false,
				tablist:[
					{
						name:"目录",
						id:""
					}
				],
				menuActiveId:"",
				tabicon:">",
				showDialog:false,
				dialogMsg:"确认启动知识借阅流程吗？",
				currentParentId:"",
				activePublishId:"",
				activeCardName:"",
				cardId:'',
				isDimensionManager:false,
				isNeedBorrow:false, //是否展示借阅按钮
				tmpList:[],
			}
		},
		methods:{
			downLoad(){
				setTimeout(()=>{
					this.getDimensionCardList(this.currentParentId);
				})
			},
			editorFun(){
				localStorage.setItem("dimensionhasPerm",this.hasPerm);
				localStorage.setItem("dimensionhasId",this.currentParentId);
				localStorage.setItem("dimensionhasPath",JSON.stringify(this.tablist));
				this.$router.push({
					name: 'new-knowledge',
					params: {
						cardId: this.cardId,
						dimensionId:this.currentParentId,
						type:"editor"
					}
				})
			},
			publishFun(){
				localStorage.setItem("dimensionhasPerm",this.hasPerm);
				localStorage.setItem("dimensionhasId",this.currentParentId);
				localStorage.setItem("dimensionhasPath",JSON.stringify(this.tablist));
				let that = this;
				that.publicCardId = this.cardId;
				// 获取知识列表数据
				awsuiAxios.post({
					url: "jd",
					data: {
						cmd: "com.actionsoft.apps.kms_knwl_center_check_card_has_file",
						cardIds:JSON.stringify([this.cardId])
					},
				}).then(function (r) {
					that.loading = false;
					if (r.result != "ok") {
						that.$toast({message: r.msg, overlay: true});
					} else {
						that.$router.push({
							name: 'release-knowledge',
							params: {
								id: that.publicCardId,
								type:"myknowledge"
							}
						})
					}
				});
			},
			unPublish(){
				let title = this.tablist[this.tablist.length-1]['name'];
				this.dialogMsg="确认取消发布知识目录["+title+"]下的知识["+this.activeCardName+"]吗？";
				this.showDialog =true;
				this.showShare = false;
			},
			logData(){
				localStorage.setItem("dimensionhasPerm",this.hasPerm);
				localStorage.setItem("dimensionhasId",this.currentParentId);
				localStorage.setItem("dimensionhasPath",JSON.stringify(this.tablist));
				this.showShare = false;
				this.$router.push({
					name: 'knwlborrow',
					params: {
						id: this.cardId,
						name:this.activeCardName,
					}
				})
			},
			onDetail(item){
				localStorage.setItem("dimensionhasPerm",item.hasPerm);
				localStorage.setItem("dimensionhasId",this.currentParentId);
				localStorage.setItem("dimensionhasPath",JSON.stringify(this.tablist));
				this.$router.push({
					name: 'know-detail',
					params: {
						id: item.cardId,
						dimensionId:this.currentParentId
					}
				})
			},
			onCell(event, item, index) {
				if(item.id!=""){
					this.currentParentId = item.id;
					this.refreshData(item);
				}
			},
			refreshData(item){
				this.curPage=0;
				this.getDimensionList(item.id);
				this.hasPerm = item.hasPerm;
				if(item.hasPerm){
					this.getDimensionCardList(item.id);
				}else{
					this.cardlist=[];
				}
			},
			backtop(parentId,parentHasPerm){
				if(parentId==''){
					localStorage.setItem("dimensionhasPerm",undefined);
					localStorage.setItem("dimensionhasId",undefined);
					localStorage.setItem("dimensionhasPath",undefined);
					this.$router.push({
						name: 'knwldir'
					})
				}else{
					this.currentParentId =parentId;
					this.hasPerm =parentHasPerm;
					this.curPage=0;
					this.getDimensionList(parentId);
					if(parentHasPerm){
						this.getDimensionCardList(parentId);
					}else{
						this.cardlist=[];
					}

				}
			},
			openDialog(item){
				if(this.isNeedBorrow){
					this.showDialog = true;
				}else{
					this.showShare = true;
				}
				this.cardId=item.cardId;
				this.activeCardName=item.cardName;
				this.activePublishId=item.publishId;
			},
			handleDialog(){
				localStorage.setItem("dimensionhasPerm",this.hasPerm);
				localStorage.setItem("dimensionhasId",this.currentParentId);
				localStorage.setItem("dimensionhasPath",JSON.stringify(this.tablist));
				//借阅申请
				let that = this;
				if(!this.isNeedBorrow){
					awsuiAxios.post({
						url: "jd",
						data: {
							cmd: "com.actionsoft.apps.kms_knwl_center_cancel_publish_card",
							publishId:this.activePublishId,

						},
					}).then(function (r) {
						if (r.result == "error") {
							that.$toast({message: r.msg, overlay: true})
						} else {
							that.$toast({message: "取消发布成功", overlay: true});
							let datas = that.cardlist;
							for(let i=0;i<datas.length;i++){
								if(datas[i]["publishId"]==that.activePublishId){
									that.cardlist.splice(i, 1);
									break;
								}
							}

						}
					})
				}else{
					awsuiAxios.post({
						url: "jd",
						data: {
							cmd: "com.actionsoft.apps.kms_knwl_center_borrow_card_process_start_mobile",
							cardId:this.cardId,
							dimensionId:this.currentParentId

						},
					}).then(function (r) {
						if (r.result == "error") {
							that.$toast({message: r.msg, overlay: true})
						} else {
							window.location.href=r.data.url;
						}
					})
				}
			},
			getDimensionList(parentId){

				let that = this;
				awsuiAxios.post({
					url: "jd",
					data: {
						cmd: "com.actionsoft.apps.kms_mobile_center_dimension_tree_json",
						parentId:parentId==''?this.$route.params.id:parentId,
						isDimensionKnwlPage:false

					},
				}).then(function (r) {
					that.loading = false;
					if (r.result == "error") {
						alert(r.msg);
					} else {
						that.list = r.data.dimensionJA;
						let parentid = r.data.parentId;
						that.currentParentId = parentid;
						let tmpd = that.tablist;
						let indx = 0;
						let has = false;
						for(let n=0;n<tmpd.length;n++){
							if( tmpd[n]['id']==parentid){
								indx =n;
								has = true;
								break;
							}
						}
						if(has){
							that.tablist=that.tablist.slice(0,indx+1);
						}else{
							that.tablist.push({
								name:r.data.parentLabel,
								id:parentid,
								parentHasPerm:that.hasPerm
							})
						}
						let size = that.list.length;
						if(size>0&&size<=4){
							let hh = window.innerHeight-43*size-54-12-36;
							that.heights = "height:"+hh+"px";
						}else if(size>4){
							let hh = window.innerHeight-43*4-54-12-36;
							that.heights = "height:"+hh+"px";
						}
					}
				});
			},
			getDimensionCardList(parentId){
				let that = this;
				if(this.curPage==0){
					this.finished=false;
				}
				if(this.isLoadingData){
					return;
				}
				this.isLoadingData = true;
				awsuiAxios.post({
					url: "jd",
					data: {
						cmd: "com.actionsoft.apps.kms_knwl_center_dimension_card_list_json",
						dimensionId: parentId==''?this.$route.params.id:parentId,
						curPage: this.curPage<=0?1:this.curPage+1,
						rowsPerPage:0,
						sortIndx: "publishTime",
						sortDir: "down",
						filter: encodeURIComponent(this.value)

					},
				}).then(function (r) {

					that.initLoad = false;
					that.loading = false;
					that.isLoadingData = false;
					if (r.result == "error") {
						that.$toast({message: r.data?r.data.desc:r.msg, overlay: true});
					} else {
						let rowsPerPage = r.data.rowsPerPage;
						if(that.curPage==0){
							that.cardlist = r.data.data;
						}else{
							that.cardlist =that.cardlist.concat(r.data.data) ;
						}
						that.isNeedBorrow = r.data.isNeedBorrow;
						that.isDimensionManager = r.data.isDimensionManager;
						if(that.curPage*rowsPerPage>=r.data.totalRecords){
							that.finished=true;
						}
						that.curPage = r.data.curPage;
					}
					that.contentH = "height:"+(window.innerHeight-54-that.$refs.top.clientHeight)+"px";
				});
			},
			//初始化方法
			initData(){
				let dimendionId='';
				this.contentH = "height:"+(window.innerHeight-90)+"px";
				let tmphasPerm = this.$route.params.hasPerm;
				if(tmphasPerm==undefined){
					tmphasPerm=  localStorage.getItem("dimensionhasPerm");
					dimendionId = localStorage.getItem("dimensionhasId");
					this.tablist = JSON.parse(localStorage.getItem("dimensionhasPath"));
				}
				this.getDimensionList(dimendionId);
				if(tmphasPerm!=undefined){
					this.hasPerm = tmphasPerm;
				}
				if(this.hasPerm ){
					this.getDimensionCardList(dimendionId);
				}
			},
			searchCardName(){
				let that = this;
				if(that.value===''){
					that.initData();
				}
				let resultdata = [];
				that.list.forEach((item) => {
					if (item.name.indexOf(that.value) > -1 ) {
						resultdata.push(item);
					}
				})
				let resultdatas = [];
				that.cardlist.forEach((item) => {
					if (item.cardName.indexOf(that.value) > -1 ) {
						resultdatas.push(item);
					}
				})

				that.list=resultdata;
				that.cardlist=resultdatas;
			},
		},
		watch:{
			value:function () {
				let that = this;
				this.curPage=0;
				//this.getDimensionCardList(this.currentParentId);
				that.searchCardName();

			}
		},

		mounted() {
			this.initData(); // 初始化时调用
		}


	}
</script>

<style scoped>
	.path_title{
		color:#378DEC;
	}
	.knwldir {
		height: 100%;
	}

	.knwldir .content {
		border-top: 0.33px solid #e9e9e9;
		height: calc(100% - 105px);
		overflow-y: auto;
	}

	.knwldir .content .item {
		padding: 0 12px;
		background: #fff;
	}

	.knwldir .content .divide {
		background: #e9e9e9;
		width: 100%;
		height: 12px;
	}

	.knwldir .content .van-cell {
		padding: 8px 0;
		/*border-bottom: 1px solid #efefef;*/
	}

	.knwldir .content .van-cell:last-child {
		border-bottom: 0;
	}

	.knwldir .content .van-cell .awsui-iconfont {
		color: #FABD01;
		margin-right: 8px;
	}

	.knwldir .content .van-cell .default {
		color: #CCCCCC;
	}

	.top {
		padding: 9px 12px 7px;
		line-height: 18px;
		/*border-bottom: 0.33px solid #e9e9e9;*/
		font-size: 12px;
	}
	.list li {
		float: left;
		padding: 11px 0;
		width: 100%;
		position: relative;
		/*border-bottom: 0.33px solid #e9e9e9;*/
	}

	.list li:not(:last-child) {
		border-top: 0.33px solid #e9e9e9;
	}

	.list li .left {
		width: calc(100% - 20px);
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		float: left;
	}

	.list li .left .title {
		font-size: 13px;
		color: #333;
		line-height: 18px;
		margin-bottom: 4px;
	}

	.list li .left .description {
		color: #999999;
		line-height: 15px;
		font-size: 12px;
	}

	.list li .left .description .line {
		display: inline-block;
		margin: 0 8px;
		color: #E8E8E8;
	}

	.list li .right {
		width: 20px;
		text-align: right;
		float: right;
		margin-top: 18px;
	}

	.list li .right .awsui-iconfont {
		color: #a4a4a4;
	}
	.list {
		padding: 0 12px;
		float: left;
		/*height: calc(100% - 86px);*/
		/*overflow: hidden;*/
		/*overflow-y: auto;*/
		width: calc(100% - 24px);
	}

	.list span, .list label {
		display: inline-block;
	}
	.top .tabname{
		font-size: 14px;
	}
	.top .tabname:last-child{
		color: #999 !important;
	}
	.con {
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
	}

	.con .img {
		width: 125px;
		height: 125px;
		margin: 0 auto;
	}

	.con .text {
		color: #999;
		line-height: 20px;
		font-size: 13px;
		width: 100%;
	}
	.options_op{
		width: 25%;
		display: inline-block;
		text-align: center;
	}
	.options_op .icon{
		font-size: 16px;
		margin-bottom: 10px;
	}
	.options_op .label{
		font-size: 12px;

	}
</style>
