<template>
  <van-popup
    v-model="dialogVisible"
    closeable
    position="left"
    :style="{ height: '100%',width:'60%'}"
    get-container="body"
    @close="handleClose"
  >
    <van-nav-bar
      fixed
      class="employee-tree"
    >
      <template #title>
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="partyType"
            get-containe="body"
            :options="partyOptions"
            @change="changePartyType"
          />
        </van-dropdown-menu>
      </template>
    </van-nav-bar>
    <div class="ibps-fixed-navbar ibps-fixed-top">
      <van-loading
        v-if="dialogLoading"
        vertical
      >加载中...</van-loading>
      <div v-else>
        <ibps-tree
          v-if="!isUseScope||!hiddenTree"
          ref="ibpsTree"
          :tree-data="treeData"
          :expand-on-click-node="false"
          :props="props"
          :default-expanded-keys="defaultExpandedKeys"
          :default-expand-all="defaultExpandAll"
          :load="lazyTree?partyType==='org'&&partyTypeId==='3'?loadOrgTreeNode3:partyType==='position'?partyTypeId==='3'?loadPosTreeNode3:loadPosTreeNode:loadOrgTreeNode:null"
          :lazy="lazyTree"
          node-key="id"
          pid-key="parentId"
          highlight-current
          @node-click="handleNodeClick"
        />
      </div>
    </div>

  </van-popup>
</template>

<script>
import selectorScope from './mixins/selectorScope'
import otherTreeEven from './mixins/otherTreeEven'
import IbpsTree from '@/components/ibps-tree/index.vue'

export default {
  components: {
    IbpsTree
  },
  mixins: [selectorScope, otherTreeEven],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    range: String,
    partyTypeOptions: {
      type: Array,
      default: function() {
        return [
          {
            text: '组织',
            value: 'org'
          }, {
            text: '部门',
            value: 'position'
          }, {
            text: '角色',
            value: 'role'
          }, {
            text: '用户组',
            value: 'group'
          }]
      }
    },
    partyTypeId: { // 类型节点ID
      type: [String, Number],
      default: ''
    },
    partyTypeScope: String,
    currentOrgId: { // 当前用户组ID
      type: [String, Number],
      default: ''
    },
    script: String,
    customPartyTypeOptions: {
      type: [Object, Array],
      default: () => {}
    },
    isUseScope: { // 是否启用范围
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogLoading: false,
      treeData: [],
      loazTreeData: [],
      props: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      partyType: 'position',
      partyOptions: this.partyTypeOptions,
      lazyTree: true,
      defaultExpandedKeys: ['0'],
      defaultExpandAll: false,
      partyTypeIdValue: '',
      currentOrgIdValue: '',
      scriptValue: '',
      scriptExecuteTime: false, // 脚本函数是否只执行一次
      hiddenTree: false // 由于树形懒加载load函数的变换，需要重现渲染tree，load才能生效
    }
  },
  computed: {
    changeParams() {
      const { partyTypeId, currentOrgId, isUseScope, script, partyTypeScope } = this
      return {
        partyTypeId,
        currentOrgId,
        isUseScope,
        script,
        partyTypeScope
      }
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val !== oldVal) {
        this.dialogVisible = val
      }
      if (val) {
        this.partyOptions = this.customPartyTypeOptions !== [] ? this.customPartyTypeOptions : this.partyTypeOptions
      }
    },
    range(val) {
      this.partyType = val
    },
    partyType(val) {
      this.$emit('update:range', val)
    },
    changeParams: {
      handler: function(newval, oldval) {
        this.partyTypeIdValue = newval.partyTypeId
        this.currentOrgIdValue = newval.currentOrgId
        this.scriptValue = newval.script
        // 普通模式与选择器范围模式切换调用
        let initDesignatedAType // 机构和岗位懒加载时的特殊处理参数【类型为3时的切换】
        if (oldval === undefined) {
          initDesignatedAType = false
        } else {
          if ((newval.partyTypeScope === 'org' || newval.partyTypeScope === 'position') && newval.partyTypeId === '3') {
            initDesignatedAType = false
          } else {
            initDesignatedAType = true
          }
        }
        newval.isUseScope ? this.loadTreeData(true, initDesignatedAType) : null
      },
      deep: true,
      immediate: true
    }
  },

  mounted() {
    this.loadTreeData(true)
  },

  methods: {
    changePartyType(value) {
      this.loadingTree = true
      this.partyType = value
      const ref = this.$refs.ibpsTree
      if (this.isUseScope) {
        this.hiddenTree = true
      }
      const { loadPosTreeNode, loadPosTreeNode3, loadOrgTreeNode3, loadOrgTreeNode } = this
      ref.store.load = value === 'position' ? this.partyTypeId === '3' ? loadPosTreeNode3 : loadPosTreeNode : value === 'org' ? this.partyTypeId === '3' ? loadOrgTreeNode3 : loadOrgTreeNode : null
      // 选择器范围模式函数回调
      this.moreSearchParams = {}
      // 普通模式与选择器范围模式切换调用
      !this.isUseScope ? this.loadTreeData() : null
      this.scriptExecuteTime = false // 初始化脚本类型时的函数调用
      this.$emit('change-party-type', value)
    },
    handleClose() {
      this.$emit('close', false)
    },
    handleNodeClick(item) {
      this.handleClose()
      const data = item.data || {}
      this.$emit('node-click', data.id || '')
    }

  }
}
</script>
<style lang="scss">
  .employee-tree{
    .van-nav-bar__title{
      width: 100%;
    }
  }

</style>

