
<template>
  <el-dialog
    width="35%"
    ref="treePicker"
    v-dialogDrag
    class="tree-picker"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    append-to-body>
    <async-tree
      ref="zteTree"
      height="300px"
      node-key="id"
      :treeAjax="treeAjax"
      :filterAjax="filterAjax"
      :selectedAjax="selectedAjax"
      :selected="selected"
      :clickExpand="clickExpand"
      :expandAll="expandAll"
      :clickCheck="clickCheck"
      show-checkbox>
    </async-tree>
    <span slot="footer" class="dialog-footer">
      <Throttle :time="1000" events="click">
        <el-button type="primary" @click.native="handleSubmit">{{ $t('confirm') }}</el-button>
      </Throttle>
      <el-button @click="closeDialog">{{ $t('close') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import asyncTree from './async-tree';

export default {
  name: 'asyncTreePicker',
  components: { asyncTree },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    service: {
      type: String,
      default: 'base',
    },
    treeKey: String,
    filterAjax: {
      type: String,
      required: true,
    },
    treeAjax: {
      type: String,
      required: true,
    },
    selectedAjax: {
      type: String,
    },
    title: String,
    params: Object,
    selected: String,
    leafOnly: {
      type: Boolean,
      default: false,
    },
    clickExpand: {
      type: Boolean,
      default: true,
    },
    expandAll: {
      type: Boolean,
      default: true,
    },
    clickCheck: {
      type: Boolean,
      default: true,
    },
    halfChecked: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      data: [],
      loading: true,
    };
  },
  methods: {
    handleSubmit() {
      const checked = this.$refs.zteTree.getSelected();
      // const halfChecked = this.halfChecked && this.$refs.zteTree.getHalfCheckedNodes();
      this.$emit('selectChange', checked);
      this.$emit('update:dialogVisible', false);
    },
    handleClose() {
      this.$emit('update:dialogVisible', false);
    },
    closeDialog() {
      this.$emit('update:dialogVisible', false);
    },
  },
};
</script>
