<template>
  <dialogBox title="配置常办项目" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
    @closeDialog="closeDialog" v-model="myValue">
    <Tree :data="projectList" show-checkbox node-key="id" :default-checked-keys="defaultCheckeds" ref="tree"
      default-expand-all :props="defaultProps" @check-change="handleClick" />
  </dialogBox>
</template>
<script>
import { getMenuInfo } from "@/api/user.js";
import Tree from "@/components/Tree/src/tree.vue"
import { saveFrequentProjectsList, getHomeFrequentProjects } from "@/api/user.js";
export default {
  components: {
    Tree
  },
  props: {
    value: { type: Boolean, default: false },
    bindItem: { type: Array, default: [] }
  },
  data () {
    return {
      myValue: false,
      defaultCheckeds: [],
      projectList: [],
      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
    }
  },
  watch: {
    value (val) {
      this.myValue = val
      if (val) {
        this.queryClick()
      }
    }
  },
  mounted () {
    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 () {
      let that = this
      getMenuInfo().then(res => {
        this.projectList = res.result.slice(0, -2)
      })
      function lookForAllId (arr = []) {
        for (let item of that.bindItem) {
          arr.push(item.id)
          if (item.children && item.children.length) lookForAllId(item.children, arr)
        }
        return arr
      }
      this.defaultCheckeds = lookForAllId()
      console.log(this.defaultCheckeds, 'that.defaultCheckedsthat.defaultCheckedsthat.defaultCheckeds');
    },
    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>