<template>
  <div class="location-table">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-cascader
          v-model="dataForm.location"
          placeholder="请选择所属市区级"
          :options="optionsOfLocation"
          :props="{ checkStrictly: true }"
          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="16"
      :select-on-indeterminate="false"
      @select="select"
      @select-all="selectAll"
      @selection-change="selectionChange"
      :tree-props="{children: 'childList'}"
    >
      <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 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",
  mixins: [mixinViewModule],
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "鄞州区",
          childList: [
            {
              id: 31,
              name: "王小虎",
            },
            {
              id: 32,
              name: "王小虎",
            },
          ],
        },
        {
          id: 2,
          name: "海曙区",
          childList: [
            {
              id: 311,
              name: "张亮亮",
            },
            {
              id: 321,
              name: "王小虎",
            },
          ],
        },
      ],
      selectArr: [],

      mixinViewModuleOptions: {
        getDataListURL: "/sys/dept/list",
        deleteURL: "/sys/dept",
      },
      dataListSelections: [],
      dataForm: {
        name: "",
        location: "",
      },
      optionsOfLocation: [
        {
          value: "ningbo",
          label: "宁波",
          children: [
            {
              value: "haishu",
              label: "海曙区",
            },
            {
              value: "yingzhou",
              label: "鄞州区",
            },
            {
              value: "beilun",
              label: "北仑区",
            },
            {
              value: "zhenhai",
              label: "镇海区",
            },
          ],
        },
      ],
    };
  },
  methods: {
    dataListSelectionChangeHandle1(val) {
      this.dataListSelections = val;
      console.log(val);
    },
    select(selection, row) {
      if (
        selection.some((el) => {
          return row.id === el.id;
        })
      ) {
        if (row.childList) {
          row.childList.map((j) => {
            this.toggleSelection(j, true);
          });
        }
      } else {
        if (row.childList) {
          row.childList.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.childList) {
            el.childList.map((j) => {
              this.toggleSelection(j, true);
            });
          }
        });
      }
      if (isCancel) {
        this.tableData.map((el) => {
          if (el.childList) {
            el.childList.map((j) => {
              this.toggleSelection(j, false);
            });
          }
        });
      }
    },
    selectionChange(selection) {
      this.selectArr = selection;
    },
    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>