<template>
  <dialogBox title="配置常办项目" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
    @closeDialog="closeDialog" v-model="value">
    <el-form ref="ruleForm" :model="ruleForm" label-width="100px">
      <el-tree :data="projectList" show-checkbox node-key="id" ref="tree" default-expand-all :props="defaultProps"
        @check-change="handleClick"></el-tree>
    </el-form>
  </dialogBox>
</template>
<script>
import { getMenuInfo } from "@/api/user.js";
import { saveFrequentProjectsList } from "@/api/home.js";
export default {
  props: {
    value: { type: Boolean, default: false },
    bindItem: { type: Array, default: [] }
  },
  data () {
    return {
      projectList: [],
      ruleForm: {

      },
      checkedItem: [],
      defaultProps: {
        children: "children",
        label: "name",
        disabled: function (data, node) {
          if (data.children && data.children.length > 0) {
            return true
          } else {
            return false
          }
        }
      },
      uniqueValue: ''//最后拿到的唯一选择的moduldCode值,相当于id
    }
  },
  mounted () {
    this.queryClick()
    this.dealCheckedItem();
  },
  methods: {
    submitForm () {
      var checkedNodes = this.$refs.tree.getCheckedNodes();
      if (checkedNodes.length > 6) {
        this.$message.error("最多选择6个项目！");
        return
      }
      saveFrequentProjectsList(checkedNodes).then(res => {
        if (res.code == 200) {
          this.$parent.queryProjectList();
          this.$message.success("保存成功");
          this.$emit("input", false);
        } else {
          this.$message.error(res.message);
        }
      })
    },
    queryClick () {
      getMenuInfo().then(res => {
        this.projectList = res.result
      })
    },
    dealCheckedItem () {
    },
    //关闭窗口
    closeDialog () {
      this.$emit("input", false);
    },
    //节点选择状态发生改变时
    handleClick (data, checked, node) {
      var checkedNodes = this.$refs.tree.getCheckedNodes();
      if (checked) {
        checkedNodes.push(data);
      }
      this.$refs.tree.setCheckedNodes(checkedNodes);
      console.log(this.$refs.tree.getCheckedNodes());
    },
  }
}
</script>
<style scoped lang='scss'>
/deep/.el-tree-node.is-expanded>.el-tree-node__children {
  display: flex;
  flex-wrap: wrap;
}
</style>