<template>
	<div class="knwldir">
		<van-search v-model="keyvalue" placeholder="请输入文件内容关键词"/>
		<div class="content" :style="contentH">
			<div class="item">
				<van-cell v-for="(item,index) in dirs" :key="index" is-link
						  :to="{name:'sub-knwldir', params: {id:item.id,hasPerm:item.hasPerm}}">
					<i v-if="item.iconCls.indexOf('treeDimension')>-1" class="awsui-iconfont" :style="item.hasPerm?'color:#FABD01;':'color:#c8c9cc;'" :class="item.iconCls">&#58913;</i>
					<i v-else class="awsui-iconfont" :style="item.hasPerm?'color:#FABD01;':'color:#c8c9cc;'" :class="item.iconCls">&#xeac5;</i>
					{{item.name}}
				</van-cell>
			</div>
			<div v-show="!initLoad&&dirs.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>
		<tabbar/>
	</div>
</template>

<script>
	import tabbar from '@/components/tabbar.vue' //引用组件的地址
	import awsuiAxios from "../awsuiAxios";
	export default {
		name: 'knwldir',
		components: {
			tabbar
		},
		data() {
			return {
				initLoad:true,
				keyvalue: '',
				contentH:'',
				dirs: [],
				tmpdirs:[],
				name: `<font color='#378DEC'>知识目录</font>` + ' > '
			}
		},
		methods:{
			getDimensionList(){
				let that = this;
				awsuiAxios.post({
					url: "jd",
					data: {
						cmd: "com.actionsoft.apps.kms_mobile_center_dimension_tree_json",
						parentId:"",
						isDimensionKnwlPage:false

					},
				}).then(function (r) {
					that.loading = false;
					if (r.result == "error") {
						that.$toast({message: r.data?r.data.desc:r.msg, overlay: true});
					} else {
						that.dirs = r.data.dimensionJA;
						that.tmpdirs = r.data.dimensionJA;
					}
					that.initLoad = false;
				});
			},
			searchDirName(){
				let that = this;
				if(that.keyvalue===''){
					this.dirs=this.tmpdirs;
				}
				let resultdata = [];
				that.dirs.forEach((item) => {
					if (item.name.indexOf(that.keyvalue) > -1 ) {
						resultdata.push(item);
					}
				})
				that.dirs=resultdata;
			}
		},
		watch:{
			keyvalue:function(){
				let that = this;
				setTimeout(function () {
					that.searchDirName();
				},300);
			}
		},

		mounted() {
			localStorage.setItem("dimensionhasPerm",undefined);
			let that = this;
			let h = window.innerHeight-105;
			this.contentH="height:"+h+"px;overflow-y:auto;";
			this.getDimensionList();
		}
	}
</script>

<style scoped>
	.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 .van-cell {
		padding: 8px 0;
		/*border-bottom: 0.33px solid #e9e9e9;*/
	}

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

	.knwldir .content .van-cell .awsui-iconfont {
		/*color: #03A76B;*/
		margin-right: 8px;
	}

	.knwldir .content .van-cell .default {
		color: #CCCCCC;
	}
	.treeHotspot {
		color:#f3b731 !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%;
	}
</style>
