<template>
  <div class="auto" >
    <modal :show.sync="show" style="height: max-content;width: max-content"  v-ref:modal large >
      <header slot="modal-header" class="modal-header">
        <p class="bg-info text-center" style="padding: 8px;">组织选择</p>
        <div novalidate class="form-inline auto" partial>
          <div class="form-group col-sm-3">
            <input type="text" class="input_search"
                    v-model="filterstr"
                   placeholder='请输入搜索组织'>
          </div>
          <div class="form-group">
            <button class="button_search button_spacing" style="width:80px;margin-left:30px;" @click="buluer()" v-el:cx>查询</button>
          </div>
        </div>
      </header>
      <article slot="modal-body" class="modal-body">
        <div id="orgEdit" style="height:350px;overflow:auto;">
          <tree :filter="strsign" :model='model' :is-open="true" :is-click="false" v-ref:tree>
            <span  partial>
              <span class="glyphicon glyphicon-chevron-down" v-show="row.open&&row.data.children.length>0" ></span>
              <span class="glyphicon glyphicon-chevron-right" v-show="!row.open&&row.data.children.length>0" ></span>
              <span v-show="row.data.hasright" @click.stop="$parent.$parent.$parent.selectclick(row.data)">{{row.data.name}}</span>
              <span v-show="!row.data.hasright" style="color: grey">{{row.data.name}}</span>
              <span class="glyphicon glyphicon-ok " v-if="$parent.$parent.$parent.isSelect(row.data.id)"></span>
            </span>
          </tree>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button class="button_search button_spacing" @click="confirm">确认</button>
        <button class="button_clear button_spacing" @click="confirm">取消</button>
      </footer>
    </modal>
  </div>
</template>

<script>

  import {HttpResetClass} from 'vue-client'

  let getOrgGen = async function (self) {
    //获取分公司树
    let data = {
      source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$ || row.getType() == $department$))`,
      userid: self.$login.f.id
    }
    let http = new HttpResetClass()
    let ret = await http.load('POST', '/rs/search', data, {resolveMsg: null, rejectMsg: null})
    console.log('获取到分公司树', ret)
    if (ret.data[0].children.length > 0) {
      self.model = ret.data[0].children[0].children
    }else {
      self.$showAlert('分公司树暂无数据', 'warning', 2000)
    }
  }

  export default {
    title: '所属组织',
    data () {
      return {
        //
        filterstr:'',
        strsign:'',
        model: [],

        // 组织树
        orgname : '',
        orgid : '',
      }
    },
    props: ['show','data'],
    async ready () {
      this.initData()
    },
    watch: {
    },
    methods: {
      async initData () {
          this.orgname = ''
          this.orgid =''
          await getOrgGen(this)
        //增加默认选中
        if(this.data&&this.data.parentid.length>0&&this.data.oname.length>0){
          this.orgname=this.data.oname
          this.orgid=this.data.parentid
          this.$dispatch('org', {name: this.orgname, id: this.orgid})
        }
      },
      async buluer () {
        this.strsign=this.filterstr
        await new Promise(resolve => {
          this.$nextTick(() => {
            resolve()
          })
        })
        if(this.filterstr.length==0){
          await this.$refs.tree.openAll()
        }
      },
      confirm () {
        this.show = false
        this.$dispatch('org', {name: this.orgname, id: this.orgid})
      },
      selectclick (row) {
        console.log('选择点击。', row)
        if(this.orgid==row.id){
          this.orgid=''
          this.orgname=''
        }else{
          if (row.resourcetype === 'organization'||row.resourcetype === 'zone'||row.resourcetype === 'department') {
            this.orgname=row.name
            this.orgid=row.id
          }
        }
      },
      isSelect(val) {
        if(this.orgid==val){
          return true
        }else{
          return false
        }
      }
    }

  }

</script>

<style>

  #orgEdit div{
    margin-left: 0px;
    color: #000;
  }
  #orgEdit span {
    color: #000;
  }
  #orgEdit  .list-group-item {
    background-color: white;
    border: none;
  }
  #orgEdit  .list-group-item.active,
  #orgEdit  .list-group-item.active:hover,
  #orgEdit  .list-group-item.active:focus {
    background-color: #fff;
  }
</style>
