<template>
  <el-dialog :title="titleValue" width="1200px" append-to-body :model-value="modelValue" :before-close="closed">
    <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
      <el-form-item label="所属部门">
        <MOSTY.Department width="100%" clearable :deptId="props.deptId" v-model="listQuery.deptId" />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="listQuery.userName" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="handleFilter">查询</el-button>
        <el-button type="info" @click="reset()"> 重置 </el-button>
      </el-form-item>
    </el-form>
    <div class="tabBox" style="margin-top: 0px">
      <el-table ref="multipleUserRef" stripe @selection-change="handleSelectionChange" :data="tableData" border
        :row-key="keyid" style="width: 100%" height="400">
        <el-table-column type="selection" width="55" :reserve-selection="true" />
        <el-table-column prop="userName" align="center" label="用户名"></el-table-column>
        <el-table-column prop="loginName" align="center" label="账号"></el-table-column>
        <el-table-column prop="deptName" align="center" 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>
    </div>
    <template #footer>
      <div class="flex just-between">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.current" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.size"
          layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
        <div class="">

          <el-button type="primary" @click="onComfirm">确认</el-button>
          <el-button @click="restab">清空</el-button>
          <el-button @click="closed">取消</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
import { selectUserDeptPage } from "@/api/user-manage";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  titleValue: {
    type: String,
    default: "选择用户"
  },
  roleId: {
    type: String,
    default: ""
  },
  data: {
    type: Array,
    default: []
  },
  LeaderType: {
    type: String,
    default: ""
  },
  //是否单选
  Single: {
    type: Boolean,
    default: true
  },
  // 查询当前部门下的人员
  deptId: {
    type: String,
    default: null
  },
});
const total = ref(0);
const listQuery = ref({
  current: 1,
  size: 20
});
const form = ref({});
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
watch(
  () => props.modelValue,
  (val) => {
    if (val === true) {

      listQuery.value.deptId = props.deptId

      handleFilter();
    } else {
      listQuery.value.deptId = null
    }
  }
);
const closed = () => {
  emits("update:modelValue", false);
};
const reset = () => {
  listQuery.value = {
    current: 1,
    size: 20,
    loginName: "",
    phone: ""
  };
  getListData();
};

// 为用户分配角色
const onComfirm = () => {
  const userList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
  let list = {
    type: props.LeaderType,
    userList: userList
  };
  if (props.Single) {
    if (userList.length > 1 && props.LeaderType != "MJ") {
      ElMessage({
        type: "warning",
        message: "请每次选择一人!"
      });
    } else {
      emits("choosedUsers", userList);
      emits("choosedUsersLeader", list);
      closed();
    }
  } else {
    emits("choosedUsers", userList);
    emits("choosedUsersLeader", list);
    closed();
  }
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.size = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.current = currentPage;
  getListData();
};
const getListData = async () => {
  const params = listQuery.value;
  if (props.roleId) {
    params.roleId = props.roleId;
  }
  const res = await selectUserDeptPage(params);
  res.records.forEach(item => {
    if (item.idEntityCard && item.idEntityCard.length >= 2) {
      item.sex = Number(item.idEntityCard.substring(item.idEntityCard.length - 2, item.idEntityCard.length - 1)) % 2 == 0 ? '2' : '1'
    }
  });
  tableData.value = res?.records;
  total.value = Number(res.total);
  multipleUser(props.data);
};
const handleFilter = () => {
  listQuery.value.current = 1;
  getListData();
};

const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const handleSelectionChange = (val) => {
  multipleSelectionUser.value = val;
};

// 列表回显
function multipleUser(row) {

  if (row) {
    tableData.value.forEach((item) => {
      row.forEach((val) => {
        if (val.id == item.id) {
          multipleUserRef.value.toggleRowSelection(item, undefined);
        }
      });
    });
  }
}
const keyid = (row) => {
  return row.id;
};


//清空
function restab() {
  multipleUserRef.value.clearSelection();
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
