<template>
  <div class="committee-table">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getdatalist()"
    >
      <el-form-item>
        <el-select
          style="width:100%"
          v-model="dataForm.committee"
          placeholder="请选择所属委员会"
          clearable
        >
          <el-option
            v-for="item in optionsOfCommittee"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="dataForm.name"
          placeholder="姓名"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          @click="getdatalist()"
          type="primary"
        >{{ $t('query') }}</el-button>
      </el-form-item>

    </el-form>
    <!--  <el-table
      v-loading="dataListLoading"
      :data="dataList"
      row-key="id"
      border
      style="width: 100%;"
      @selection-change="dataListSelectionChangeHandle"
      @sort-change="dataListSortChangeHandle"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="委员会人员"
        header-align="center"
        min-width="150"
      ></el-table-column>

    </el-table> -->
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :indent="16"
      :default-expand-all="true"
      :select-on-indeterminate="false"
      @select="select"
      @select-all="selectAll"
      @selection-change="selectionChange"
      :tree-props="{children: 'userInfoList'}"
    >
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="委员会人员"
        header-align="center"
      >
      </el-table-column>

    </el-table>
    <!--  {{ selectArr.map(el => el.id) }} -->
  </div>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  name: "committee-table",
  mixins: [mixinViewModule],
  props: ["invitedUserNames"],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/user/user/committeeList",
        // deleteURL: "/sys/dept",
      },
      tableData: [
        /*  {
          id: "10",
          name: "会长及副会长",
          childList: [
            {
              id: "1",
              name: "小明",
            },
            {
              id: "2",
              name: "小明",
            },
          ],
        },
        {
          id: "3",
          name: "协会监事",
          childList: [
            {
              id: "4",
              name: "小明同学",
            },
            {
              id: "5",
              name: "小明的同学小红",
            },
          ],
        }, */
      ],
      tempaalist: [],
      tempbblist: [],
      optionsOfCommittee: [],
      selectArr: [],
      dataForm: {
        committee: "",
        name: "",
      },
    };
  },
  mounted() {
    this.getdatalist();
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.$http
        .get("/committee/committee/list")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          this.optionsOfCommittee = res.data;
        })
        .catch(() => {});
    },

    getdatalist() {
      this.$http
        .get(
          "/user/user/committeeList?committee=" +
            this.dataForm.committee +
            "&name=" +
            this.dataForm.name
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          this.tableData = res.data;
          // console.log("this.tableData", this.tableData);
        })
        .then(() => {
          this.toggleSelections(this.tableData);
        })
        .catch(() => {});
    },
    getInclude1(arr1, arr2) {
      let temp = [];
      for (const item of arr2) {
        arr1.find((i) => i.id === item.id) ? temp.push(item) : "";
      }
      return temp;
    },
    toggleSelections(rows) {
      //  console.log("Wodoap", this.tableData);
      if (rows) {
        rows.forEach((row) => {
          if (row.userInfoList) {
            row.userInfoList.map((j) => {
              //    console.log("Wodoapjjj", j);
              this.invitedUserNames.map((i) => {
                if (i.id == j.id) {
                  this.toggleSelection(j, true);
                }
              });
            });
            let templist = this.getInclude1(
              this.invitedUserNames,
              row.userInfoList
            );
            if (templist.length == row.userInfoList.length) {
              this.$refs.table.toggleRowSelection(row);
            }
            //   console.log("log", templist);
          }

          //  console.log(row);
        });
      } else {
        this.$refs.table.clearSelection();
      }
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].userInfoList.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].userInfoList = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].userInfoList);
        }
      }
      return data;
    },
    select(selection, row) {
      // console.log("selection", selection);
      //this.$refs.table.toggleRowSelection(1, false);
      let aatemplist = [];
      let bbtemplist = [];
      selection.some((el) => {
        if (el.userInfoList) {
          aatemplist.push(el);
        } else {
          bbtemplist.push(el);
        }
      });
      aatemplist.some((ele, index) => {
        ele.userInfoList.forEach((el) => {
          //  console.log("el", el.id);
          if (el.id == row.id) {
            this.$refs.table.toggleRowSelection(this.tableData[index], false);
          }
        });
      });

      // console.log("temp", templist);

      if (
        selection.some((el) => {
          return row.id === el.id;
        })
      ) {
        if (row.userInfoList) {
          row.userInfoList.map((j) => {
            this.toggleSelection(j, true);
          });
        }
      } else {
        if (row.userInfoList) {
          row.userInfoList.map((j) => {
            this.toggleSelection(j, false);
          });
        }
      }
    },
    selectAll(selection) {
      // tabledata第一层只要有在selection里面就是全选
      const isSelect = selection.some((el) => {
        const tableDataIds = this.tableData.map((j) => j.id);
        return tableDataIds.includes(el.id);
      });
      // tableDate第一层只要有不在selection里面就是全不选
      const isCancel = !this.tableData.every((el) => {
        const selectIds = selection.map((j) => j.id);
        return selectIds.includes(el.id);
      });
      if (isSelect) {
        selection.map((el) => {
          if (el.userInfoList) {
            el.userInfoList.map((j) => {
              this.toggleSelection(j, true);
            });
          }
        });
      }
      if (isCancel) {
        this.tableData.map((el) => {
          if (el.userInfoList) {
            el.userInfoList.map((j) => {
              this.toggleSelection(j, false);
            });
          }
        });
      }
    },
    selectionChange(selection) {
      this.selectArr = selection;
      let childByValueContent = [];
      selection.forEach((ele) => {
        if (ele.userInfoList == undefined) {
          childByValueContent.push(ele);
        }
      });
      let aatemplist = [];
      let bbtemplist = [];

      selection.some((el) => {
        if (el.userInfoList) {
          aatemplist.push(el);
        } else {
          bbtemplist.push(el);
        }
      });

      /*   let templist2 = [];
      templist2 = this.getInclude1(this.tableData, aa);

      console.log("aaa", this.tableData.length);
      console.log("bbb", templist2.length); */
      this.tableData.forEach((ele, index) => {
        let templist = [];

        templist = this.getInclude1(ele.userInfoList, bbtemplist);

        /* console.log("aaa", ele.userInfoList.length);
        console.log("bbb", templist.length); */
        if (ele.userInfoList.length == templist.length) {
          this.$refs.table.toggleRowSelection(this.tableData[index], true);
        } else {
          this.$refs.table.toggleRowSelection(this.tableData[index], false);
        }
      });

      this.$emit("childByValue", childByValueContent);
    },
    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.table && this.$refs.table.toggleRowSelection(row, select);
        });
      }
    },
    cancelAll() {
      this.$refs.table.clearSelection();
    },
  },
};
</script>

<style lang="less" scoped>
.committee-table {
  width: 100%;
}
</style>