<template>
  <div>
    <el-dialog title="组织机构人员选择" width="1200px" top="20px" v-model="props.showDdld" :before-close="handleClose">
      <div class="search" ref="searchBox">
        <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名或者账号" v-model="listQuery.loginName" clearable @keyup.enter="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter">查询</el-button>
            <el-button type="primary" @click="reset()"> 重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 组织机构信息 -->
      <div class="main-box big_boxs">
        <!-- <div class="treeBox">
                    <el-tree ref="singleTableRef" :data="treeData" :props="propsts" @node-click="handleNodeClicks"
                        node-key="id" show-checkbox @check-change="checkChange" :load="loadNode" @check="handleCheck" lazy
                        :default-checked-keys="[id]" :default-expanded-keys="['520310520301', '5203105203010099']" />
                </div> -->
        <div class="treeBox" style="height: 567px">
          <MOSTY.DepartmentTree width="280px" placeholder="管理部门ID" clearable filterable v-model="listQuery.deptId" />
        </div>
        <div class="tabBox" :class="Single ? 'table-box-radio' : ''">
          <el-table :data="tableData" @row-click="changecoose" border stripe ref="multipleUserRef"
            @selection-change="handleSelectionChange" style="width: 100%" :height="530" :row-key="keyid">
            <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!Single" />
            <el-table-column width="55" #default="{ row }" v-else>
              <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
            </el-table-column>

            <el-table-column sortable prop="userName" align="center" label="用户名"></el-table-column>
            <el-table-column sortable prop="loginName" align="center" label="账号"></el-table-column>
            <el-table-column sortable prop="deptName" width="160" label="所属单位"></el-table-column>
            <!-- <el-table-column prop="sex" align="center" label="性别">
                            <template #default="{ row }">
                                <span> {{ row.sex == 1 ? "男" : "女" }}</span>
                            </template>
</el-table-column> -->
            <!-- <el-table-column align="center" sortable label="性别" width="80">
                            <template #default="{ row }">
                                <dict-tag :options="D_BZ_XB" :value="row.sex" :tag="false" />
                            </template>
                        </el-table-column> -->

          </el-table>
          <div class="fenye" :style="{ top: 520 + 'px' }">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>确定</span>
          </el-button>
          <el-button type="primary" @click="clearlist" v-if="!Single">
            <el-icon>
              <DocumentRemove />
            </el-icon>
            <span>清空</span>
          </el-button>

          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import {
  defineProps,
  reactive,
  watch,
  onMounted,
  ref,
  defineEmits,
  getCurrentInstance,
  onUnmounted
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
import {
  getSysUserList,
  editSysUser,
  addUser,
  getUserInfoToId,
  resetPassword,
  deleteSysUser,
} from "@/api/user-manage";
const { proxy } = getCurrentInstance();
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
const ridioIndex = ref(null);
const keyCount = ref(0); //tabel组件刷新值
const searchBox = ref(null); // 搜索盒子
function disab(array) { }
const listQuery = ref({
  pageNum: 1,
  pageSize: 20,
  loginName: "",
  phone: ""
});

const props = defineProps({
  showDdld: {
    type: Boolean,
    default: true
  },
  roleId: {
    type: String,
    default: ""
  },
  // 选择成员
  data: {
    type: Array,
    default: []
  },
  LeaderType: {
    type: String,
    default: ""
  },
  //是否单选
  Single: {
    type: Boolean,
    default: true
  },
  // 选择领导的回显
  leaderid: {
    type: String,
    default: ""
  },
  // 选择组长的回显
  zzid: {
    type: String,
    default: ""
  },
  zzlx: String,
  formInfo: {
    type: Object,
    default: {}
  }
});

const emits = defineEmits(["closezzjg", "choosedUsers"]);
const tableData = ref([]);//表格数据
const total = ref(0);
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
onMounted(() => {
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
});
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
watch(
  () => props.showDdld,
  (val) => {
    if (val === true) {
      handleFilter();
    }
  }
);
//查询人员
const handleFilter = () => {
  listQuery.value.pageNum = 1;
  getListData();
};
//重置
const reset = () => {
  listQuery.value = {
    pageNum: 1,
    pageSize: 20,
    loginName: "",
    phone: ""
  };
  getListData();
};
// 获取数据的方法
const getListData = async () => {
  if (props.roleId) {
    params.roleId = props.roleId;
  }
  const params = listQuery.value;
  const res = await getSysUserList(params);
  tableData.value = res?.records;
  total.value = Number(res.total);
  if (props.Single) {
    multipleUser(props.zzid);
    multipleUser(props.leaderid);
  } else {
    multipleUser(props.data);
  }
  // tableData.value = result.list
  // total.value = result.total
};
// 列表回显
function multipleUser(row) {
  if (row) {
    if (props.Single) {
      ridioIndex.value = row;
    } else {
      row.forEach((item) => {
        tableData.value.forEach((val) => {
          if (item == val.id) {
            multipleUserRef.value.toggleRowSelection(val, true);
          }
        });
      });
    }
  }
}
//每一项点击事件
function changecoose(val) {
  if (props.Single) {
    ridioIndex.value = val.id
  } else {
    if (multipleSelectionUser.value && multipleSelectionUser.value.length > 0) {
      let rowid = []
      rowid = multipleSelectionUser.value.filter(it => { return it.id == val.id })
      if (rowid.length > 0) {
        multipleUserRef.value.toggleRowSelection(val, false);

      } else {
        multipleUserRef.value.toggleRowSelection(val, true);
      }

    } else {
      multipleUserRef.value.toggleRowSelection(val, true);
    }
  }

}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

const handleCurrentChange = (currentPage) => {
  listQuery.value.pageNum = currentPage;
  getListData();
};
watch(
  () => listQuery.value.deptId,
  () => {
    handleFilter();
  },
  {
    immediate: true
  }
);
const handleSelectionChange = (val) => {
  multipleSelectionUser.value = val;
};


//清空
function clearlist() {
  multipleUserRef.value.clearSelection()
}

const keyid = (row) => {
  return row.id;
};

//确认
const handleSave = () => {
  const userList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
  let list = {
    type: props.LeaderType,
    userList: userList
  };
  if (props.Single) {
    const info = tableData.value.find((item) => {
      return item.id === ridioIndex.value;
    });
    emits("choosedUsers", [info]);
    handleClose();
  } else {
    emits("choosedUsers", userList);
    handleClose();
  }
  multipleUserRef.value.clearSelection();
};
const handleClose = () => {
  emits("closezzjg", false);
  multipleUserRef.value.clearSelection();
};

</script>

<style lang="scss" scoped>
:v-deep .el-tree-node {
  .is-leaf+.el-checkbox .el-checkbox__inner {
    display: inline-block !important;
  }

  .el-checkbox .el-checkbox__inner {
    display: none !important;
  }
}

.el-form {
  margin-top: 10px;
  display: flex;
  //   flex-wrap: wrap;
  justify-content: space-between;
}

.el-form-item {
  text-align: center;
  width: 400px;
}

.flx {
  display: flex;
  width: 100%;

  .el-button {
    margin-left: 10px;
  }
}

.box {
  width: 100%;
  height: 400px;
  overflow-y: scroll;
  border: 1px solid var(--el-color-primary);
}

.bot_font {
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #ffff;
  margin-top: 10px;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
  display: none;
}

::v-deep .el-radio__label {
  display: none !important;
}

.search {
  width: 300px;
  display: flex;
  margin-bottom: 10px;
  justify-content: flex-end;
  margin-left: 65%;
}

.fenye {
  margin-top: 10px;
}

.big_boxs {}
</style>
