<template>
  <el-dialog v-dialogDrag width="45%" title="任务分配" :close-on-click-modal="false" :before-close="cancel"
    :visible.sync="catalogueDia">
    <div class="page">
      <el-form class="selectAll" label-width="80px">
        <el-form-item label="调研人员">
          <el-select v-model="formCata.created" size="mini" style="width: 90%">
            <el-option v-for="(item, index) in userList" :key="index" :label="item.userChnName" :value="item.id">
            </el-option>
            <!-- <el-option label="李四" value="2"></el-option> -->
          </el-select>
        </el-form-item>
      </el-form>

      <div class="tree">
        <el-tree :props="defaultProps" :data="treeData" show-checkbox node-key="id" ref="tree">
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <!--可以根据情况，以数据类型来显示不同的图标或图片-->

            <svg-icon icon-class="wjj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-if="data.isLeaf === 1"
              class="iconfont icon-folder-open-fill" />
            <svg-icon icon-class="wj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-else
              class="iconfont icon-wenjian" />
            <span> {{ node.label }}</span>
            <span style="color: red; margin-left: 5px" v-if="data.assignment ? true : false">
              已分配 {{ data.assignment }}</span>
          </span></el-tree>
      </div>
    </div>
    <div class="butCls">
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {
    distributionTask
  } from "@/api/archiveUtilize/compilationResearch/taskAllocation"
  import {
    message,
    clearObjValue
  } from "@/utils/common";
  export default {
    props: {
      catalogueDia: Boolean,
      userList: {
        type: Array,
        default: () => [],
      },
      treeData: {
        type: Array,
        default: () => [],
      },
      rowId: String,
    },
    data() {
      return {
        formCata: {
          topCata: "",
          topId: "",
          currentId: "",
          cataName: "",
          Number: "",
        },
        ruletree: {
          cataName: [{
            required: true,
            message: "请输入目录名称",
            trigger: "blur"
          }, ],
        },
        defaultProps: {
          children: "childClass",
          label: "nodeTitle",
          assignment: "bindName",
        },
      };
    },
    methods: {
      cancel() {
        this.$emit("cancel");
      },
      submit() {
        if (!this.formCata.created) {
          message("warning", "请先选择调研人员", 2000);
          return;
        }
        let arr = [];
        const checkedNodes = this.getSimpleCheckedNodes(this.$refs.tree.store);
        if (!checkedNodes) {
          message("warning", "请先选择对应得目录", 2000);
          return;
        }
        const traverse = function (node) {
          node.forEach((item) => {
            if (item.isLeaf) {
              traverse(item.childClass);
            } else {
              arr.push(item.id);
            }
          });
        };
        checkedNodes.forEach((item) => {
          if (item.childClass.length) {
            traverse(item.childClass);
          } else {
            arr.push(item.id);
          }
        });
        let data = {
          dataId: this.rowId,
          userId: this.formCata.created,
          ids: arr.join(","),
        };
        distributionTask(data).then((res) => {
          if (res.code === "100") {
            message("success", "保存成功", 2000);
            this.$emit("getTree", this.rowId);
          }
        });
      },
      getSimpleCheckedNodes(store) {
        const checkedNodes = [];
        const traverse = function (node) {
          const childNodes = node.root ? node.root.childNodes : node.childNodes;
          childNodes.forEach((child) => {
            if (child.checked) {
              checkedNodes.push(child.data);
            }
            if (child.indeterminate) {
              traverse(child);
            }
          });
        };
        traverse(store);
        return checkedNodes;
      },
    },
  };

</script>
<style lang="scss" scoped>
  .page {
    padding: 10px;
    width: 100%;
    display: flex;
    border-bottom: 1px solid rgb(238, 238, 238);

    .tree {
      width: 45%;
      border-left: 1px solid rgb(238, 238, 238);
    }

    .selectAll {
      height: 300px;
      width: 50%;
    }

    .butCls {
      padding: 5px 0;
      text-align: right;
    }
  }

</style>
