<template>
  <custom-dialog
    ref="relationRef"
    title="选择人员"
    :hasCloseIcon="true"
    :hasFooterIcon="true"
		@close="cancel"
  >
    <view class="model-content">
      <uni-organization
        style="margin: 19rpx 0; background: #fff"
        v-model="state.departmentId"
        @change="deptChange"
      />
			<view style="margin-bottom: 10px;"  >
				<view class="bg">
					<view class="iconfont icon-sousuo search-icon"></view>
					<uni-easyinput
						v-model="state.keyword"
						placeholder="请输入关键字"
						:inputBorder="false"
						:styles="{backgroundColor: 'transparent' }"
						@clear="search"
						@confirm="search"
					></uni-easyinput>
				</view>
			</view>
      <view class="user-box" v-if="state.userList.length > 0">
        <uni-user-card
          v-for="(item, index) in state.userList"
          :key="index"
          :id="item.id"
          :name="item.name"
          :code="item.code"
          :checked="state.selectedIds.includes(item.id)"
          :disabled="props.disabledIds.includes(item.id) ? true : false"
          @tap="checked(item)"
        ></uni-user-card>
      </view>
      <view class="user-box" v-else>
        <Empty title="暂无数据" />
      </view>
    </view>
    <template #footer>
      <view class="page-box" v-if="state.userList.length > 0">
        <uni-pagination v-model:value="state.page.limit"
          :show-icon="true"
          :total="state.page.total"
          :pageSize="state.page.size"
          title=""
          @change="loadMore"
        />
      </view>
      <view class="hr"></view>
      <custom-dialog-submit @tap="confirm"></custom-dialog-submit>
    </template>
  </custom-dialog>
</template>

<script setup>
import { reactive, ref } from "vue";
import Empty from "@/components/layout/Empty.vue";
import { getUserPage, getUsersInfo } from "@/common/api/organization/index";
const props = defineProps({
  selectedList: {
    type: Array,
    default: [],
  },
  selectedIds: {
    type: String,
    default: "",
  },
  disabledIds: {
    type: Array,
    default: [],
  },
	multiple: {
    type: Boolean,
    default: true,
  }
});
const emits = defineEmits(["change", "update:modelValue", "close"]);
const state = reactive({
  selectedIds: [],
  selectedList: [],
  userList: [],
  departmentId: "",
	keyword:'',
  page: {
    limit: 1,
    size: 5,
    total: 0,
  },
});
const relationRef = ref();

async function getInfoByIds(userIds = "") { 
  const infoIds = userIds || props.selectedIds; 
  if (infoIds) {
    const ids = infoIds.split(",");
    const res = await getUsersInfo(ids);
    state.selectedList = res.data||[]; 
    state.selectedIds = ids;
  }else{
		state.selectedList = []
		state.selectedIds = []
	}
}
async function open() {
  state.departmentId = "";
	state.page.limit=1; 
  await getInfoByIds();
  await getUserList();
  relationRef.value.open();
}
async function loadMore(e) {
  state.page.limit = e.current;
  await getUserList();
}

function confirm() { 
  emits("change", state.selectedList);
  emits("update:modelValue", state.selectedList);
	relationRef.value.close();
  cancel();
}

function cancel() { 
	emits("close");
}

function checked(user) {
	if(props.multiple){
		if (state.selectedIds.includes(user.id)) {
			state.selectedIds.splice(
				state.selectedIds.findIndex((item) => item === user.id),
				1
			);
			state.selectedList.splice(
				state.selectedList.findIndex((item) => item.id === user.id),
				1
			);
		} else {
			state.selectedIds.push(user.id);
			state.selectedList.push(user);
		}
	}else{
		state.selectedIds=[user.id];
		state.selectedList=[user];
	}
}

async function getUserList() {
  let params = {
		keyword:state.keyword,
    departmentId: state.departmentId,
    limit: state.page.limit,
    size: state.page.size,
  };
  let res = await getUserPage(params);
  state.userList = res.data.list;
  state.page.total = res.data.total;
}

function deptChange() {
  getUserList();
}
function search(){
	state.page.limit=1;
	getUserList()
}
defineExpose({
  open,
  getInfoByIds,
  confirm,
});
</script>

<style lang="scss" scoped>
.page-box {
  margin: 0 auto;
  text-align: center;
  padding: 10px 0;
  background-color: #ffffff;
}
.hr {
  width: 100%;
  border: 1px solid #f3f4f8;
}
.btn-list {
  .btn {
    height: 48px;
    border-radius: 24px;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .text {
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
    }
  }
  .btn1 {
    background: #5e95ff;
  }
}
:deep(.wrap .content-box) {
    padding: 14px 0 0;
    height: calc(100% - 150px);
}
</style>
