<template>
  <div class="dimension">
    <van-search v-model="value" placeholder="请输入知识目录相关文件..."/>
	  <div style="height: 20px;font-size: 13px;color: #1b6ec9;padding: 0px 12px;">
		  <span style="float: left;" @click="back()">返回</span>
		  <span style="float: right;display: inline-block;" @click="clear()">清空</span>
		  <span style="float: right;display: inline-block;margin-right: 15px;" @click="getValue()">确定</span>
	  </div>
    <div class="content">
      <div class="top" v-show="type=='list'">
		  <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.name):'')">{{item.name}}</span>
			  <span v-show="(index<(tablist.length-1))">{{tabicon}} </span>
		  </span>
      </div>
      <div class="item" v-if="listSize> 0">
        <van-checkbox-group v-model="result">
          <van-cell-group>
			  <span  v-for="(item, index) in list">
				 <van-cell
						 v-if="item.open!=undefined"
							  is-link
							  clickable
							  :key="index"
							  @click="onCell($event,item,index,'checkboxes')"
					  >
					 <i class="awsui-iconfont" :class="item.iconCls">{{item.iconCls.indexOf('treeDimension')>-1?'&#58913;':'&#xeac5;'}}</i>
				     {{item.name}}
					 <van-checkbox :disabled="item.disabled!=undefined" class="checkbox" label-disabled  v-show="!item.nocheck" :id="item.id" shape="square" :publishPerm="item.publishPerm" :name="item.id" ref="checkboxes"
											icon-size="16px" >
					 </van-checkbox>
			     </van-cell>
				   <van-cell
							v-else
						   clickable
						   :key="index"
						   @click="onCell($event,item,index,'checkboxes')"
				   >
					 <i class="awsui-iconfont" :class="item.iconCls">{{item.iconCls.indexOf('treeDimension')>-1?'&#58913;':'&#xeac5;'}}</i>
				     {{item.name}}
					 <van-checkbox :disabled="item.disabled!=undefined" class="checkbox rightchk" label-disabled  v-show="!item.nocheck" :id="item.id" shape="square" :publishPerm="item.publishPerm" :name="item.id" ref="checkboxes"
								   icon-size="16px" >
					 </van-checkbox>
			     </van-cell>
			  </span>

		  </van-cell-group>
        </van-checkbox-group>
      </div>
		<div v-else>
			<div class="con">
				<div class="img">
					<img src="../assets/no_content.png" alt="" style="width: 125px;">
				</div>
				<div class="text">暂无数据</div>
			</div>
		</div>

    </div>
  </div>
</template>

<script>
  import awsuiAxios from "../awsuiAxios";
  export default {
    name: 'know-dimension',
    data() {
      return {
      	initcheckFlag:false,
        value: '',
        knowDir: '知识目录',
		tabicon:">",
        list: [
        ],
        tablist: [{
        	name:"知识目录",
			id:"-1"
		}
        ],
		listSize:0,
        id: '',
		type:"list",
        result: [],
		currentParentId:"",
		currentParentName:"知识目录",
      }
    },
	  props:{
		  publishDimensionData:{
			  type:Object,
			  default(){
				  return {};
			  }
		  }
	  },
    methods: {
		checkclick(item,state){
			if(state=='checked'){
				if(item.iconCls.indexOf('noPerm')>-1){
					for(let itm of this.list){
						if(itm.id!=item.id){
							itm.disabled = true;
						}else{
							itm.disabled = undefined;
						}
					}
				}else{
					for(let itm of this.list){
						if(itm.iconCls.indexOf('noPerm')>-1){
							itm.disabled = true;
						}else{
							itm.disabled = undefined;
						}
					}
				}
			}else{
				for(let itm of this.list){
					itm.disabled = undefined;
				}
			}

		},
      onCell(event, item, index, checkbox) {
        let cId = document.getElementById(item.id)
        if (cId) {
			this.currentParentId = item.id;
			this.currentParentName = item.name;
          if (event.target.className.indexOf("van-cell__")>-1) {
          	if(item.open!=undefined){
				this.getDimensionTree();
			}
          } else {
          	  if(item.disabled==undefined){
				  this.toggle(index, checkbox,item);
			  }
          }
        }
      },
      toggle(index, checkbox,item) {
          this.$refs[checkbox][index].toggle()
		  let dimenId =item.id;
		 if(!this.$refs[checkbox][index].checked){
		 	if(!this.publishDimensionData.hasOwnProperty(dimenId)){
				this.publishDimensionData[dimenId]=item
			}
			this.checkclick(item,'checked');
		 }else{
			 if(this.publishDimensionData.hasOwnProperty(dimenId)){
				 delete this.publishDimensionData[dimenId];
			 }
			 if(Object.keys(this.publishDimensionData).length==0){
				 this.checkclick(item,'nochecked');
			 }
		 } ;
		  this.id = this.$refs[checkbox][index].$attrs.id

      },
		getValue(){
			this.$emit('dimensionBack',this.publishDimensionData,"ok");
		},
		clear(){
			if(this.$refs.checkboxes){
				this.$refs.checkboxes.forEach(el => {
					el.toggle(false);
				});
				this.publishDimensionData = {};
				this.result = [];
			}
			for(let itm of this.list){
				itm.disabled = undefined;
			}
			// this.$emit('dimensionBack');
		},
		back(){
			this.$emit('dimensionBack',this.publishDimensionData,"back");
		},
	  getDimensionTree(id,type){
      	  let parentId= this.currentParentId;
      	 if(type=='back'){
			 parentId=id=="-1"?"":id;
		 }
		  let that = this;
		  // 获取知识列表数据
		  awsuiAxios.post({
			  url: "jd",
			  data: {
				  cmd: "com.actionsoft.apps.kms_knwl_center_me_publish_dimension_tree_json",
				  parentId:parentId

			  },
		  }).then(function (r) {
		  	let keys = Object.keys(that.publishDimensionData);
				if(keys==0){
			  		that.clear();
				}
			  	let dimensionJA = r;
				 that.list = dimensionJA;
			  	 that.listSize = that.list.length;
				 let parentid = that.currentParentId;
				 if(parentid==''){
					that.tablist =[{
					 name:"知识目录",
						 id:"-1"
						 }
					  ]
				 }else{
					 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:that.currentParentName,
							 id:parentid
						 })
					 }
				 }

		  });
	  },
	  search(){
      	    let that = this;
			awsuiAxios.post({
				url: "jd",
				data: {
					cmd: "com.actionsoft.apps.kms_mobile_center_dimension_search",
					key:this.value

				},
			}).then(function (r){
				if (r.result == "error") {
					alert(r.msg);
				} else{
					if(Object.keys(that.publishDimensionData).length==0){
						that.clear();
					}
					that.list = r.data.dimensionJA;
				}
			});
	   },
	  backtop(id,name){
		  this.currentParentId = id;
		  this.currentParentName = name;
      	  this.getDimensionTree(id,'back');
	  }
    },
    mounted() {
    	this.initcheckFlag = true;
      this.$nextTick(() => {
        var that = this
        if (that.$route.params.id !== undefined) {
          this.id = that.$route.params.id
        }
		  this.result = Object.keys(that.publishDimensionData);
        // that.list.forEach(el => {
        //   if (el.id === this.id) {
        //     this.result = [el.name]
        //   }
        // })
      })
    },
	  watch:{
    	value(v) {
			if(v!=''){
				this.type='search';
				this.search();
			}else{
				this.type='list';
				this.getDimensionTree("-1","back");
			}

		}
	  },
	  created(){
		this.getDimensionTree("-1","");
	  }
  }
</script>

<style scoped>
  .dimension {
    height: 100%;
  }

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

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

  .dimension .content .item .checkbox {
    width: 16px;
    position: absolute;
    top: 4px;
    right: 20px;
  }


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

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

  .dimension .content .van-cell:last-child {
    /*border-bottom: 0;*/
  }

  .dimension .content .van-cell .awsui-iconfont {

    margin-right: 8px;
  }

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

  .top {
    padding: 9px 12px 7px;
    line-height: 18px;
    border-bottom: 0.33px solid #e9e9e9;
    font-size: 12px;
  }
  .top .tabname{
	  font-size: 14px;
  }
  .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%;
  }
	.treeDimension-noPerm,.treeHotspot-noPerm{
		color: #CCCCCC;
	}
	.treeDimension,.treeHotspot{
		color: #FABD01;
	}
  .treeHotspot {
	  color:#f3b731 !important;
  }
	.rightchk{
		right: 40px !important;
	}
</style>
