<template>
  <h-modal
    id="PeopleSelector-queryModal"
    v-model:visible="visible"
    title="成员管理"
    width="448px"
    wrap-class-name="full-modal"
    :destroyOnClose="true"
    :maskClosable="false"
    class="PeopleSelector-wrap"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <HBCustomSelect
      v-model:value="selectUser"
      :selectedParentId="selectId"
      :userType="2"
      valueType="string"
      componentType="user"
      dataQueryType="company"
      width="100%"
    />
  </h-modal>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
import { useHttp } from '@crami/http';
import { message } from '@crami/ui';

export default defineComponent({
  name: 'PeopleSelector',
  emits: ['success'],
  setup(_, { emit }) {
    const visible = ref(false);
    const selectId = ref('');
    const selectUser = ref([]);
    const saveUrl = ref('');
    // 打开弹窗
    const show = (id, url) => {
      visible.value = true;
      saveUrl.value = url;
      selectId.value = id;
    };

    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });

    const confirmLoading = ref(false);
    const handleOk = () => {
      if (!saveUrl.value) return;
      confirmLoading.value = true;
      useHttp({
        url: saveUrl.value,
        method: 'post',
        params: {
          lang: commonParams.value?.lang,
          connect: commonParams.value?.connect,
          companyId: commonParams.value?.companyId,
          timeZone: commonParams.value?.TIME_ZONE,
          data: {
            id: selectId.value,
            ids: selectUser.value?.length ? selectUser.value.join(';') : '',
          },
        },
      })
        .then(res => {
          if (res.code == 200) {
            message.success(res.msg);
            handleCancel();
            emit('success');
          } else {
            message.warning(res.msg);
          }
          confirmLoading.value = false;
        })
        .catch(() => {
          confirmLoading.value = false;
        });
    };

    const handleCancel = () => {
      visible.value = false;
      saveUrl.value = '';
      selectUser.value = [];
    };

    return {
      visible,
      show,
      selectId,
      selectUser,
      handleOk,
      handleCancel,
      confirmLoading,
    };
  },
});
</script>
<style lang="less">
.PeopleSelector-wrap {
  .ant-form-item {
    margin-bottom: 0 !important;
  }
}
</style>
