<template>
  <div class="app-department-select">
    <ibiz-select-tree  :NodesData="Nodesdata" :value="value" :multiple="multiple" @select="onSelect"></ibiz-select-tree>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop, Model } from 'vue-property-decorator';

@Component({
})
export default class AppDepartmentSelect extends Vue {

    /**
     * 接口url
     *
     * @type {*}
     * @memberof AppDepartmentSelect
     */
    @Prop({default:'/ibzorganizations/{orgid}/ibzdepartments/picker'}) public url?: any;

    /**
     * 过滤项
     *
     * @type {*}
     * @memberof AppDepartmentSelect
     */
    @Prop() public filter?: any;

    /**
     * 过滤项
     *
     * @type {*}
     * @memberof AppDepartmentSelect
     */
    @Prop() public fillMap?: any;

    /**
     * 是否多选
     *
     * @type {*}
     * @memberof AppDepartmentSelect
     */
    @Prop({default:false}) public multiple?: any;

    /**
     * 表单项名称
     *
     * @type {*}
     * @memberof AppDepartmentSelect
     */
    @Prop() public name!: any;

    /**
     * 表单数据
     *
     * @type {*}
     * @memberof AppDepartmentSelect
     */
    @Prop() public data!: any;

    /**
     * 表单项值
     *
     * @type {*}
     * @memberof AppDepartmentSelect
     */
    @Prop() public value!: any;

    /**
     * 上下文变量
     *
     * @type {*}
     * @memberof AppDepartmentSelect
     */
    @Prop() public context!: any;

    /**
     * 树节点数据
     *
     * @type {*}
     * @memberof AppDepartmentSelect
     */
    public Nodesdata: any[] = [];

    /**
     * 当前树节点数据的url
     *
     * @type {*}
     * @memberof AppDepartmentSelect
     */
    public oldurl: any[] = [];

    /**
     * 获取节点数据
     *
     * @memberof AppDepartmentSelect
     */
    public searchNodesData(){
      // 处理请求参数
      let param = ''
      if(this.filter){
          if(this.data && this.data[this.filter]){
            param= this.data[this.filter];
          }else if(this.context && this.context[this.filter]){
            param= this.context[this.filter];
          }
      }else{
          param = this.context.srforgid;
      }
      let _url = this.url.replace(/{orgid}/,param)
      if(this.oldurl === _url){
          return;
      }
      this.$http.get(_url).then((response: any) => {
          console.log(response)
          this.Nodesdata = response.data;
          this.oldurl = _url;
      }).catch((response: any) => {
          if (!response || !response.status || !response.data) {
              this.$Notice.error({ title: '错误', desc: '系统异常！' });
              return;
          }
      });
    }

    /**
     * 值变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppDepartmentSelect
     */
    @Watch('data',{deep:true})
    public onValueChange(newVal: any, oldVal: any) {
        this.searchNodesData();
    }

    /**
     * select事件处理
     * 
     * @param {*} $event
     * @memberof AppDepartmentSelect
     */
    public onSelect($event:any){
        // 组件自身抛值事件
        let selectArr = JSON.parse($event);
        if(selectArr.length === 0){
            this.$emit('select-change',  { name: this.name, value: $event});
            return;
        }
        let valueArr = selectArr.map((item:any)=>{return {id:item.id,label:item.label}});
        this.$emit('select-change', { name: this.name, value: JSON.stringify(valueArr) });
        // fillMap抛值事件
        if(this.fillMap && Object.keys(this.fillMap).length > 0){
            Object.keys(this.fillMap).forEach((attribute:string) => {
                let _name = this.fillMap[attribute];
                let _value = selectArr.map((item:any) => item[attribute]);
                this.$emit('select-change',{name: _name, value: _value.join(",")})
            });
        }

    }
}
</script>

<style lang='less'>
@import './app-department-select.less';
</style>