<template>
  <!--el-dialog树状节点选择  -->
  <el-dialog :visible="dialogboole" :before-close="handleClose" :close-on-click-modal="false" width="400px">
    <template slot="title">
      <span>{{ title }}</span>
    </template>
    <div class="border" />
    <el-scrollbar class="scrollbar">
      <el-tree
        ref="tree"
        :data="treedata"
        show-checkbox
        :highlight-current="true"
        node-key="id"
        class="scrollbar-tree"
        :check-strictly="checkstrictly"
        :default-expand-all="true"
        :default-checked-keys="defaultcheckedarray"
        :props="defaultProps"
        accordion
        @check-change="handleClick"
      />
    </el-scrollbar>
    <span slot="footer" class="dialog-footer" style="text-align: center">
      <el-button :disabled="disabled" @click="cancel">取 消</el-button>
      <el-button :disabled="disabled" type="primary" @click="determine">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'Addusertree',
  props: {
    treedata: {
      type: Array,
      required: true
    },
    dialogboole: {
      type: Boolean,
      required: true,
      default: false
    },
    defaultProps: {
      type: Object
    },
    title: {
      type: String,
      default: '添加用户'
    },
    isSelectChild: {
      type: Boolean,
      default: false
    },
    checkstrictly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    defaultcheckedarray: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {}
  },
  computed: {},
  mounted() {},
  methods: {
    handleClick(data, checked) {
      if (checked) {
        this.$emit('handleClick', data.id)
      }
    },
    handleClose() {
      this.$emit('handleClose')
    },
    cancel() {
      this.$emit('cancel')
    },
    determine() {
      if (this.isSelectChild == true) {
        const selectednodedata = this.$refs.tree.getCheckedKeys(true)
        this.$emit('determine', selectednodedata)
      } else {
        const selectednodedata = this.$refs.tree.getCheckedNodes()
        this.$emit('determine', selectednodedata)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .scrollbar {
  height: 400px;
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .scrollbar-tree {
    width: 97%;
  }
}
::v-deep .el-dialog__footer {
  text-align: center !important;
}
</style>
