<template>
  <div class="knwldir">
    <van-search v-model="value" placeholder="请输入文件内容关键词" @allSearch="getDimensionCardList"/>
	  <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 //是否展示借阅按钮
      }
    },
	  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";
			  });
		  }
	  },
	  watch:{
    	value:function () {
    		this.curPage=0;
			this.getDimensionCardList(this.currentParentId);
		}
	  },
    mounted() {
		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);
		}
    }
  }
</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>
