  <!--
  @description: 供货记录-组织机构/采购单位弹框
  @Modifier:肖文龙
  @routerPath:
  @date: 2020-5-20 20:14:35
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    title="采购单位"
    append-to-body
    width="700px"
    custom-class="el-dialog__body-p0"
    top="calc((100vh - 611px) / 2)"
  >
    <!--搜索-->
    <section class="tools p0-16 pt16 clearfix">
      <el-form ref="treeFrom" :model="treeFrom" inline>
        <el-form-item label="名称">
          <el-input
            v-model="treeFrom.departName"
            placeholder=""
            @blur="search"
          />
        </el-form-item>
        <el-form-item class="fr">
          <!-- 查询 -->
          <el-button
            type="primary"
            @click="search()"
          >
            {{ language.query }}
          </el-button>
        </el-form-item>
      </el-form>
    </section>
    <el-scrollbar style="height:400px">
      <div class="main">
        <el-tree
          ref="tree"
          :props="defaultProps"
          :load="treeLoadNode"
          :show-checkbox="showCheckbox"
          :default-checked-keys="defaultCheckedKeys"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          lazy
          node-key="id"
          @current-change="currentChange"
        />
      </div>
    </el-scrollbar>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure">{{ language.Determine }}</el-button>
      <el-button @click="dialogData.dialog = false">{{ language.cancel }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { getOrganizationTree } from '@/api/common/user'// 产品分类
import { mapGetters } from 'vuex'
export default {
  name: 'ORganizationDialog',
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false // 弹窗状态
        }
      }
    },
    // 是否使用复选框多选
    showCheckbox: {
      type: Boolean,
      default: false
    },
    // 有复选框时的已选中索引
    defaultCheckedKeys: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 需要过滤掉的已选择数据
    defaultNoKeys: {
      type: Array,
      default: function() {
        return []
      }
    },
    //  机构类型 (1-机构，2-部门)
    orgTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 选择的数据
      treeSeletData: {
        keys: '', // id集合
        labels: ''// 名称集合
      },
      defaultProps: {
        children: 'children',
        label: 'departname',
        isLeaf: 'existLeaf'
      },
      // 查询条件
      treeFrom: {
        departName: '', // 机构名称 搜索用
        orgTypes: [], // 机构类型 (1-机构，2-部门)
        excludeIds: '' // 过滤不需要返回的节点id集合
      }
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    // 监听-弹框展示状态
    'dialogData.dialog'(val) {
      if (val) {
        this.treeFrom.excludeIds = this.defaultNoKeys.join(',')// 需要过滤掉的已选择数据-转换格式
        this.treeFrom.orgTypes = this.orgTypes ? this.orgTypes.split(',') : []// 机构类型 (1-机构，2-部门)
        this.getDeclarationDepartIdsBySupplierId()// 筛选掉已申报过的单位
      } else {
        // 初始化
        this.treeSeletData = {
          keys: '', // id集合
          labels: ''// 名称集合
        }
      }
    }
  },
  methods: {
    // 过滤已选择的数据
    filterNode(value, data) {
      if (!value) return true
      // 过滤掉已选择的数据 && 搜索的数据
      return !value.excludeIds.includes(data.id) && data.departname.includes(value.departName)
    },
    // 过滤掉已被选择的单位
    getDeclarationDepartIdsBySupplierId() {
      this.$nextTick(() => {
        if (this.$refs.tree) {
          this.$refs.tree.filter(this.treeFrom)
        }
      })
    },
    /*
    初始化数据
    resolve 添加树节点数据
    */
    initLoad(node, resolve) {
      const data = {
        parentId: node.key, // 父节点id
        ...this.treeFrom
      }
      getOrganizationTree(data).then(res => {
        res.data.forEach(item => {
          // 判断是否为第一级节点-初始化数据
          if (node.level === 0) {
            item.disabled = true// 设置复选框不可选择
          }
          item.existLeaf = !item.existLeaf// 指定节点是否为叶子节点
        })
        resolve(res.data)// 添加树节点
      })
    },
    // 树节点加载子集事件
    treeLoadNode(node, resolve) {
      this.initLoad(node, resolve)// 初始化数据
    },
    // 选中某个单位
    treeNodeClick(data) {
      this.departData = data
    },
    // 单选时-选择信息
    currentChange(item, node) {
      if (node.level !== 1) { // 不是第一级时
      // 初始化
        const data = {
          keys: [], // id集合
          labels: []// 名称集合
        }
        data.keys.push(item.id)
        data.labels.push(item.departname)
        data.keys = data.keys.join(',')
        data.labels = data.labels.join(',')
        this.treeSeletData = data// 选择的信息
      }
    },
    // 多选时-复选框时选择的数据
    checkedNodes() {
      const nodes = this.$refs.tree.getCheckedNodes()// 获取已选中信息
      const data = {
        keys: [], // id集合
        labels: []// 名称集合
      }
      nodes.forEach(item => {
        data.keys.push(item.id)
        data.labels.push(item.categoryName)
      })
      data.keys = data.keys.join(',')
      data.labels = data.labels.join(',')
      return data
    },
    // 选择信息-确定
    ensure() {
      let data = {}
      if (this.showCheckbox) { // 多选时-使用复选框
        data = this.checkedNodes()// 多选时-复选框时选择的数据
      } else { // 单选时-选择信息
        data = { ...this.treeSeletData }
      }
      this.$emit('oRganizationInfo', data)
      this.dialogData.dialog = false// 关闭弹框
    },
    // 搜索
    search() {
      this.getDeclarationDepartIdsBySupplierId()// 筛选掉已申报过的单位
    }
  }
}
</script>

<style scoped lang="less">
</style>
