<template>
  <div class="app-container">
    <el-dialog
      title="选择值班人员"
      :modelValue="true"
      width="60%"
      @close="() => emit('canal')"
    >
      <el-row :gutter="20">
        <el-col style="overflow-x: scroll" :span="6">
          <div style="display: flex">
            <div
              style="font-size: 17px; margin-left: 10px; margin-bottom: 10px"
            >
              所属部门
            </div>
          </div>

          <div class="head-container">
            <el-tree
              style="font-size: 15px; width: 235px"
              :reserve-selection="true"
              :data="deptOptions"
              :props="{ label: 'label', children: 'children' }"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="dept"
              node-key="id"
              highlight-current
              default-expand-all
              @node-click="handleNodeClick"
              :current-node-key="currentNodeKey"
              :default-expanded-keys="expandedKeys"
            />
          </div>
        </el-col>
        <el-col style="padding-left: 80px; margin-top: 32px" :span="16">
          <!-- 联系人列表 -->
          <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="68px"
            @submit.prevent
          >
            <el-form-item label="用户昵称" prop="nickName">
              <el-input
                v-model="queryParams.nickName"
                placeholder="请输入用户昵称"
                clearable
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" size="mini" @click="handleQuery11"
                ><el-icon><Search /></el-icon>搜索</el-button
              >
              <el-button size="mini" @click="resetQuery11"
                ><el-icon><RefreshRight /></el-icon>重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            style="height: 400px; overflow: auto"
            v-loading="loading"
            :row-key="(row) => row.userId"
            ref="multipleTableRef"
            :data="userList"
            @selection-change="handleSelectionChange1"
          >
            <el-table-column
              :selectable="getSelectable"
              :reserve-selection="true"
              type="selection"
              width="50"
              align="center"
            />
            <el-table-column
              label="用户昵称"
              align="center"
              key="nickName"
              prop="nickName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="所属部门"
              align="center"
              key="deptName"
              prop="dept.deptName"
              :show-overflow-tooltip="true"
            />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </el-col>
      </el-row>
      <div style="margin-left: 46vw; margin-top: 40px" class="dialog-footer">
        <el-button @click="$emit('canal')">取 消</el-button>
        <el-button
          type="primary"
          @click="
            $emit('submit', selectUserList);
            selectUserList = [];
            queryParams.nickName = '';
            multipleTableRef.clearSelection();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="selectPersonnel">
import { onMounted, ref } from "vue";
import { deptTreeSelect2, listUser } from "@/api/system/user";
import { addDateRange } from "@/utils/ruoyi";
// 部门
const deptOptions = ref([]);
// 用户
const userList = ref([]);
const loading = ref(false);
const total = ref(0);
// 查询条件
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  peopleStatus: 0,
  nickName: "",
});

const selectUserList = ref([]);
const multipleTableRef = ref(null);

let props = defineProps(["type", "selectedList"]);
const emit = defineEmits(["getList"]);

const selectedItems = ref([]);
const userNames = ref(undefined);
const Names = ref(undefined);
const single = ref(undefined);
const multiple = ref(undefined);
function resetQuery11() {
  queryParams.value.nickName = "";
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  handleQuery11();
}

function handleSelectionChange1(users) {
  userNames.value = users.map((item) => item.userId).join(",");
  Names.value = users
    .map((item) => item.nickName + "(" + (item.sex == 1 ? "女" : "男") + ")")
    .join(",");
  selectUserList.value.push({
    userName: Names.value,
    userIds: userNames.value,
  });
  console.log(selectUserList.value);
}

// 节点点击
function handleNodeClick(data) {
  queryParams.value.deptId = data.id;
  handleQuery();
}
function handleQuery11() {
  getList();
}
function handleQuery() {
  queryParams.value.pageNum = 1;
  // queryParams.value.sex = props.sex;
  getList();
}

// 查询部门
async function getDeptTree() {
  const { data } = await deptTreeSelect2();
  deptOptions.value = data;
}

async function getList() {
  loading.value = true;
  let res = await listUser(addDateRange(queryParams.value, []));
  loading.value = false;
  userList.value = res.rows;
  total.value = res.total;
  console.log("props.selectedList0", props.selectedList);
  props.selectedList.forEach((row) => {
    console.log("row11111111", row);
    // let a = row.userId.split(",");
    // for (let j = 0; j < a.length; j++) {
    //   console.log("row.userId[j]", a[j]);
    //   // multipleTableRef.value.toggleRowSelection(row.userId[j], true);
    // }
  });
}

onMounted(() => {
  getDeptTree();
  handleQuery();
});

// let map = [];
// map = props.selectedList;
// props.selectedList.forEach((row) => {
//   map = row;
//   console.log("map", map);
//   // console.log("map[row.userId]", map[row.userId]);
// });

// 数据回显
function getSelectable(val) {
  // console.debug(val);
  // console.log("val", val);
  // console.log("userList", userList.value);
  // console.log("map", map);

  if (props.selectedList != undefined) {
    for (let j = 0; j < props.selectedList.length; j++) {
      let a = props.selectedList[j].userIds.split(",");
      console.log("a", a);
      for (let i = 0; i < a.length; i++) {
        if (a[i] == val.userId) {
          return false;
        }
      }
    }
  }
  return true;
  // if (map.userId[0] == val.userId) {
  //   return false;
  // }
  // return true;
  // if (map.userId[0] == val.userId) {
  //   return false;
  // }
  // return true;
}
</script>
<style scoped>
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: #dbe0e6;
  border-color: #d2d5dd;
  cursor: not-allowed;
}
</style>
