<template>
  <div class="choosePerson">
    <el-dialog v-model="props.peopleDialog" width="80%" :title="title" :close-on-click-modal="false"
      :destroy-on-close="true" @close="cancel">
      <div class="imput_pox">
        <el-input @blur="handelBlur" v-model="listQuery.loginName" clearable @clear="handelClear" placeholder="请输入姓名查询"
          style="width: 30%" />
      </div>
      <div class="main-box">
        <div class="treeBox">
          <MOSTY.DepartmentTree width="280px" placeholder="管理部门ID" clearable filterable v-model="listQuery.deptId"
            :deptcode="listQuery.deptId" />
        </div>
        <div class="tabBox">
          <el-table ref="multipleUserRef" :data="personDate" stripe border height="calc(100% - 43px)" :key="keyCount"
            @selection-change="handleSelectionChange" @row-click="changecoose">
            <el-table-column type="selection" width="55" v-if="props.multiple" />
            <el-table-column width="55" #default="{ row }" v-else>
              <el-radio v-model="personnelId" @change="onChangeRadio(row)" :label="row.id"></el-radio>
            </el-table-column>
            <el-table-column prop="userName" align="center" label="姓名"></el-table-column>
          </el-table>
          <div class="fenye" :style="{ top: 'calc(100% - 43px)' }">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.page" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.size"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
          <div class="footer">
            <el-button type="primary" @click="submit">确定</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  onMounted,
  getCurrentInstance,
  defineEmits,
  defineProps,
  ref,
  watch
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
const props = defineProps({
  //是否打开弹窗
  peopleDialog: {
    type: Boolean,
    default: false
  },
  //标题
  title: {
    type: String,
    default: "选择签订人员"
  },
  //选中的部门ID （有需要就传）
  deptId: {
    type: String,
    default: ""
  },
  //是否多选
  multiple: {
    type: Boolean,
    default: false
  }
});
const { proxy } = getCurrentInstance();
const multipleUserRef = ref(null);
const personDate = ref([]); //人员数据
const loading = ref(false); // 加载状态
const selectList = ref([]); //选择的人员
const total = ref(0);
const personnelId = ref(null); //单选 选中的人员ID
const listQuery = ref({
  pageNum: 1,
  pageSize: 20,
  deptId: "",
  loginName: ""
});
const emits = defineEmits(["cancelDialog", "submit"]);
//调用层传入的部门
watch(
  () => props.deptId,
  (val) => {
    listQuery.value.deptId = val;
  },
  { deep: true, immediate: true }
);
//左侧选中的部门
watch(
  () => listQuery.value.deptId,
  (val) => {
    // getUserLists(); //获取列表
  }
);

onMounted(() => {
  // getUserLists(); //获取列表
});

// 获取用户信息
function getUserLists() {
  loading.value = true;
  getApi(listQuery.value, "/mosty-base/sysUser/selectPage")
    .then((res) => {
      loading.value = false;
      personDate.value = res.records ? res.records : [];
      listQuery.value.pageNum = res.current;
      total.value = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
}

// 分页页码数
function handleCurrentChange(val) {
  listQuery.value.pageNum = val;
  // return getUserLists();
}
// 分页条数数
function handleSizeChange(val) {
  listQuery.value.pageSize = val;
  // return getUserLists();
}

// 搜索
function handelBlur() {
  // getUserLists(); //获取列表
}

// 清除搜索
function handelClear() {
  // getUserLists(); //获取列表
}

// 多选框选中数据
function handleSelectionChange(selection) {
  selectList.value = selection;
}
//单选
const onChangeRadio = (row) => {

};
//每一项点击事件
function changecoose(val) {

  if (props.Single) {
    personnelId.value = val.id
    selectList.value = [row];
  } else {
    if (selectList.value && selectList.value.length > 0) {
      let rowid = []
      rowid = selectList.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);
    }
  }

}
//确定数据
function submit() {
  if (selectList.value.length <= 0) {
    proxy.$message.warning("请至少选择一个人员");
  } else {
    emits("submit", selectList.value);
    cancel();
  }
}
//关闭弹窗
function cancel() {
  multipleUserRef.value.clearSelection();
  emits("cancelDialog", false);
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  height: 39rem;
}

.main-box {
  height: calc(39rem - 180px);
}

.treeBox {
  overflow: auto;
  height: 100%;
}

.footer {
  position: absolute;
  bottom: -45px;
  right: 0;
}

.imput_pox {
  text-align: right;
}

::v-deep .el-radio__label {
  display: none;
}
</style>
