<template>
  <div class="location-table">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getdatalist()"
    >
      <el-form-item>
        <el-cascader
          v-model="dataForm.area"
          placeholder="请选择所属市区级"
          :options="optionsOfLocation"
          :props="props"
          clearable
        ></el-cascader>
      </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
      @selection-change="dataListSelectionChangeHandle1"
      @sort-change="dataListSortChangeHandle"
      style="width: 100%;"
    >
      <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="50"
      :select-on-indeterminate="false"
      @select="select"
      @select-all="selectAll"
      @selection-change="selectionChange"
      default-expand-all
      :tree-props="{children: 'userInfo'}"
    >
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>

      <el-table-column
        prop="name"
        label="委员会人员"
      >
      </el-table-column>

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

    <!--   <div style="margin-top: 20px">
      <el-button @click="cancelAll()">取消选择</el-button>
    </div> -->
  </div>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  name: "location-table",
  props: ["invitedUserNames"],
  mixins: [mixinViewModule],
  data() {
    return {
      tableData: [
        /*   {
          id: "10",
          name: "鄞州区",
          childList: [
            {
              areaId: "1343843631169024001",
              areaName: null,
              committeeId: "1343392971822821377",
              committeeName: null,
              company: "邻家",
              createDate: null,
              creator: null,
              email: "222",
              id: "4",
              ifCheck: 1,
              member: 1,
              mobile: "333",
              name: "小明同学",
              openid: null,
              position: "小喽喽",
              sex: 1,
              updateDate: "2020-12-31 00:42:46",
            },
            {
              areaId: "1343843631169024001",
              areaName: null,
              committeeId: "1343392971822821377",
              committeeName: null,
              company: "哦哦哦",
              createDate: null,
              creator: null,
              email: "22",
              id: "5",
              ifCheck: 1,
              member: 1,
              mobile: "133",
              name: "小明的朋友小红",
              openid: null,
              position: "客服",
              sex: 2,
              updateDate: "2020-12-31 00:42:48",
            },
          ],
        },
        {
          id: "3",
          name: "海曙区",

          childList: [
            {
              areaId: "1343843631169024001",
              areaName: null,
              committeeId: "1343392971822821377",
              committeeName: null,
              company: "哦哦哦",
              createDate: null,
              creator: null,
              email: "22",
              id: "1",
              ifCheck: 1,
              member: 1,
              mobile: "133",
              name: "小明",
              openid: null,
              position: "客服",
              sex: 2,
              updateDate: "2020-12-31 00:42:48",
            },
            {
              areaId: "1",
              areaName: null,
              committeeId: "1344173596351778818",
              committeeName: null,
              company: "金网",
              createDate: null,
              creator: null,
              email: "1111",
              id: "2",
              ifCheck: 1,
              member: 1,
              mobile: "11111",
              name: "小小明",
              openid: null,
              position: "大Boss",
              sex: 1,
              updateDate: "2021-01-01 06:17:06",
            },
          ],
        }, */
      ],
      selectArr: [],

      mixinViewModuleOptions: {
        getDataListURL: "/sys/dept/list",
        deleteURL: "/sys/dept",
      },
      dataListSelections: [],
      dataForm: {
        name: "",
        area: "",
      },
      props: {
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children",
      },
      optionsOfLocation: [
        /*  {
          value: "ningbo",
          label: "宁波",
          children: [
            {
              value: "haishu",
              label: "海曙区",
            },
            {
              value: "yingzhou",
              label: "鄞州区",
            },
            {
              value: "beilun",
              label: "北仑区",
            },
            {
              value: "zhenhai",
              label: "镇海区",
            },
          ],
        }, */
      ],
    };
  },

  mounted() {
    this.getInfo();
    this.getdatalist();
    //this.toggleSelections(this.tableData);
  },
  watch: {
    tableData: function (newval, oldval) {
      // console.log(newval);
    },
  },
  methods: {
    getInfo() {
      this.$http
        .get("/area/area/list")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          // console.log("parent", this.invitedUserNames);
          let selectlist = this.invitedUserNames;

          // this.selectionChange(selectlist);
          //this.$refs.table.toggleRowSelection(2, true);

          this.optionsOfLocation = this.getTreeData(res.data);
        })
        .catch(() => {});
    },
    getdatalist() {
      let area = "";
      if (this.dataForm.area.length > 0) {
        area = this.dataForm.area[1];
      } else {
        area = "";
      }
      this.$http
        .get("/user/user/areaList?area=" + area + "&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.userInfo) {
            row.userInfo.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.userInfo
            );
            if (templist.length == row.userInfo.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].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    dataListSelectionChangeHandle1(val) {
      this.dataListSelections = val;
      // console.log(val);
    },
    select(selection, row) {
      // console.log("selection", selection);
      //this.$refs.table.toggleRowSelection(1, false);
      let aatemplist = [];
      let bbtemplist = [];
      selection.some((el) => {
        if (el.userInfo) {
          aatemplist.push(el);
        } else {
          bbtemplist.push(el);
        }
      });
      aatemplist.some((ele, index) => {
        ele.userInfo.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.userInfo) {
          row.userInfo.map((j) => {
            this.toggleSelection(j, true);
          });
        }
      } else {
        if (row.userInfo) {
          row.userInfo.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.userInfo) {
            el.userInfo.map((j) => {
              this.toggleSelection(j, true);
            });
          }
        });
      }
      if (isCancel) {
        this.tableData.map((el) => {
          if (el.userInfo) {
            el.userInfo.map((j) => {
              this.toggleSelection(j, false);
            });
          }
        });
      }
    },
    selectionChange(selection) {
      this.selectArr = selection;
      let childByValueContent = [];
      selection.forEach((ele) => {
        if (ele.userInfo == undefined) {
          childByValueContent.push(ele);
        }
      });
      let aatemplist = [];
      let bbtemplist = [];

      selection.some((el) => {
        if (el.userInfo) {
          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.userInfo, bbtemplist);

        /* console.log("aaa", ele.userInfoList.length);
        console.log("bbb", templist.length); */
        if (ele.userInfo.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>
.location-table {
  width: 100%;
}
</style>