<template>
  <dropdown :model='model' class="auto" id="res-tree" v-if="!islist" v-el:dropdown :style="{width:width}">
    <button type="button" class="btn btn-default dropdown-toggle select-style" data-toggle="dropdown">
      <span class='btn-content' :style="{textOverflow:'ellipsis',overflow: 'hidden'}">{{ resname }}</span>
      <span class="caret"></span>
    </button>
    <tree :model='model' :is-click="false" slot="dropdown-menu" class="dropdown-menu auto" role="menu">
        <span  partial>
          <span class="glyphicon glyphicon-chevron-down" v-show="row.open&&row.data.children.length>0" style="color:balck;"></span>
          <span class="glyphicon glyphicon-chevron-right" v-show="!row.open&&row.data.children.length>0" style="color:balck;"></span>
          <span class="RightTreeCanSelect" v-if="row.data.hasright" @click.stop="$parent.$parent.$parent.selectclick(row.data)">{{row.data.name}}</span>
          <span class="RightTreeCanNotSelect" v-else>{{row.data.name}}</span>
          <span class="glyphicon glyphicon-ok " v-if="$parent.$parent.$parent.isSelect(row.data.id)" style="color:balck;"></span>
        </span>
    </tree>
  </dropdown>
  <v-select v-if="islist"
            placeholder='请选择'
            :options='childrenOptions'
            @change="selectclick"
            :value-single="true"
            close-on-select></v-select>
</template>
<script>
  import * as ldapHelper from './../util/LdapHelper'
  import Vue from 'vue'
  export default {
    title: '资源树',
    props: {
      source: {
        type: String,
        require: true,
        default:`tool.getFullTree(this.getRights().where(row.getType() == $organization$))`
      },
      resid: {
      },
      islist: {
        type: Boolean,
        default: false
      },
      //是否有查看上级的权限
      Url:{
        type: String,
        default:''
      }
    },
    data () {
      return {
        width:'100%',
        resobj:{res:Vue.user.orgs, resids:Vue.user.orgid},
        userid: Vue.user.id,
        resname:[Vue.user.orgs],
        orgnames : [Vue.user.orgs],
        orgids : [Vue.user.orgid],
        orgobj:[],
        model: [

        ],
        childrenOptions: []
      }
    },
    methods: {
      selectRes () {
        let newobj={
          "res": [this.resname],
          "resids": [this.orgids],
        }
        this.$emit('re-res', newobj)
      },
      //点击资源的方法
      selectclick (row) {
        if(this.orgids.includes(row.id)){
          this.orgnames=[]
          this.orgids=[]
          this.removeResChild(row)
          this.orgnames.push(row.name)
          this.orgids.push(row.id)
          this.orgobj.push(row)
        }else{
          this.orgnames=[]
          this.orgids=[]
          this.orgobj=[]
          this.addResChild(row)
        }
        console.log(this.orgnames.join(','))
        this.resname = this.orgnames.length > 0 ? this.orgnames.join(','):'请选择'
        let newobj={
          "res": this.orgnames,
          "resids": this.orgids,
          "orgobj": this.orgobj,
        }
        this.$emit('re-res', newobj)
      },
      addResChild(val){
        // if(this.orgids.includes(val.id)){
        //   this.orgnames.splice(this.orgnames.indexOf(val.name),1)
        //   this.orgids.splice(this.orgids.indexOf(val.id),1)
        // }
        this.orgnames.push(val.name)
        this.orgids.push(val.id)
        this.orgobj.push(val)
        if(val.children && val.children.length>0){
          Object.keys(val.children).forEach((key) => {
            this.addResChild(val.children[key])
          })
        }
      },
      removeResChild(val){
        this.orgnames.splice(this.orgnames.indexOf(val.name),1)
        this.orgids.splice(this.orgids.indexOf(val.id),1)
        this.orgobj.splice(this.orgids.indexOf(val),1)
        if(val.children && val.children.length>0){
          Object.keys(val.children).forEach((key) => {
            this.removeResChild(val.children[key])
          })
        }
      },
      //检查是否显示对勾
      isSelect(val) {
        if(this.orgids.includes(val)){
          return true
        }else{
          return false
        }
      },
      //树形结构变成list
      treetoList(val) {
        for (let value of val) {
          this.ergodicList(value)
        }
      },
      //找到跟节点
      ergodicList (val) {
        val.children.length > 0 ? this.treetoList(val.children) : this.childrenOptions.push({label: val.name, value: val})
      },
      //处理显示默认值
      dealResObj (val) {
        try{
          var arr=val.res.split(".")
          //截取最后一个分公司名字
          this.resname=arr[arr.length-1].toString()
          this.resid = val.resids
        }catch (e){
          this.resname='请选择组织'
        }
      },
      judgBoundary(){
        //判断是否超出边界，超出移动
        if(document.documentElement.offsetWidth< this.$els.dropdown.getBoundingClientRect().right){
          this.left = document.documentElement.offsetWidth - this.$els.dropdown.getBoundingClientRect().right - 25
        }
      }
    },
    events: {

    },
    ready () {
      console.log('righttree   ready')
      if(this.$els.dropdown){
        console.log('righttree1')
        this.width = this.$els.dropdown.clientWidth * 0.7 +'px'
      }
      console.log('righttree2')
      this.dealResObj (this.resobj)
      console.log('righttree3')
      var data = {
        source: this.source,
        userid: this.userid
      }
      console.log('向资源服务发送请求')
      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/search`, data,{
        resolveMsg : null ,
        rejectMsg : null,
      }).then((ret) => {
        console.log('向资源服务请求结束')
        // 去掉前面的两层节点
        ret.data[0].children[0].children.forEach((item) => {
          this.model.push(item)
        })
        // 给资源添加父关系
        ldapHelper.procParent(this.model)
        if (this.islist) {
          this.treetoList(this.model)
        }
        this.selectRes()
      })
    },
    watch: {
    }
  }
</script>
<style lang="less">
  #res-tree {
    .list-group-item {
      background-color: #FFF;
      color: #000;
      padding: 5px 10px;
      border:0px;
      white-space: nowrap;
    }
  }
  #res-tree .list-group {
    width: auto;
    min-width: 100%;
  }
  .hide-text-overflow{
    overflow: hidden;
    text-overflow: ellipsis
  }
  .select-style {
    border: 0px;
    /*border-bottom: 2px solid #C9CCCF;*/
    border: 1px solid #93B2D3;
    border-radius: 0px;
    color: #555;
  }
</style>
