<template>
  <el-dialog title="设置部门" width="700px" class="dialog-width" :visible="dialogFormVisibleT" :modal-append-to-body="true"
    append-to-body :close-on-click-modal="false" @close="cancelForm">
    <section>
      <el-tree :data="data" show-checkbox node-key="deptCode" :props="defaultProps" ref="tree">
      </el-tree>
    </section>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelForm()">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { departlistApi } from '@/api/distribution';
export default {
  props: ['visible'],
  components: {
  },
  data() {
    return {
      dialogFormVisibleT: this.visible,
      listLoading: false,
      data: [],
      defaultProps: {
        children: 'childrenList',
        label: 'deptName'
      }
    }
  },
  watch: {
    visible() {
      this.dialogFormVisibleT = this.visible
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    search() {
      this.getList()
    },
    getList(num) {
      this.listLoading = true;
      departlistApi().then(res => {
        console.log('res', res)
        this.data = res
        this.listLoading = false;
      }).catch((res) => {
        this.listLoading = false;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submitForm() {
      console.log(this.$refs.tree.getCheckedNodes());
      let treelist = this.$refs.tree.getCheckedNodes() || []
      // this.$emit('areaMultipleSelection', this.multipleSelection);
      if (treelist.length) {
        treelist.forEach((item, index) => {
          if (!item.index) {
            this.$set(item, 'index', new Date().getTime() + index)
          }
        })
      }
      console.log('treelist', treelist)
      this.$emit("channelpop", treelist);
      this.cancelForm()
    },
    cancelForm() {
      //取消关闭
      this.$emit("update:visible", false);
      this.$nextTick(() => {
        // this.$refs.ruleForm.resetFields(); //重置输入框提示
      });
    },
  }
}
</script>
<style scoped lang="scss">
.dialog-width {

  //弹出层里内容的高度
  ::v-deep .el-dialog__body {
    max-height: 500px !important;
    overflow: auto;
  }

}
</style>