<template>
  <div class="auto">
    <modal :show.sync="show"  v-ref:modal large backdrop="false">
      <header slot="modal-header" class="modal-header">
        <h3 style="color:black" class="modal-title">所属组织</h3>
      </header>
      <article slot="modal-body" class="modal-body">
        <div id="orgEdit">
          <tree :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 @click.stop="$parent.$parent.$parent.selectclick(row.data)">{{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="btn btn-success" @click="confirm">确认</button>
        <button class="btn btn-default" @click="cancel">取消</button>
      </footer>
    </modal>
  </div>
</template>

<script>

  import * as Util from "../Util"
  import {HttpResetClass} from 'vue-client'

  let saveGen = async function (self) {
    //获取分公司树
    let data = {
      source: self.source,
      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
    }
  }

  export default {
    title: '所属部门',
    data () {
      return {
        ids: [], // 所有选中的节点id
        model: [],
        level: 0, // 用于显示级别

        // 组织树
        source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
        userid: this.$login.f.id,

        orgnames : [],
        orgids : [this.$login.f.id],
      }
    },
    props: ['show'],
    ready () {
      saveGen(this)
    },
    methods: {
      confirm () {
        this.show = false
        this.$dispatch('depart', {name: this.orgnames[0], id: this.orgids[0]})
      },
      cancel () {
        this.show = false
      },
      selectclick (row) {
        console.log('选择点击。', row)
        if(this.orgids.includes(row.id)){
          this.removeResChild(row)
        }else{
          this.orgnames=[]
          this.orgids=[]
          this.addResChild(row)
        }
      },

      addResChild(val){
        if (val.resourcetype === 'organization') {
          this.orgnames.push(val.name)
          this.orgids.push(val.id)
        }
      },
      removeResChild(val){
        this.orgnames.splice(this.orgnames.indexOf(val.name),1)
        this.orgids.splice(this.orgids.indexOf(val.id),1)
      },
      isSelect(val) {
        if(this.orgids.includes(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>
