<script setup lang="ts">
import { reactive, watch } from 'vue';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';

defineOptions({ name: 'ProjectMemberRemoveDialog' });

interface Props {
  member: Api.Project.ProjectMember | null;
}

interface Emits {
  (e: 'submit', payload: Api.Project.InactiveProjectMemberParams): void;
}

defineProps<Props>();
const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const model = reactive({
  reason: ''
});

function handleConfirm() {
  emit('submit', {
    reason: model.reason.trim() || null
  });
}

watch(
  () => visible.value,
  value => {
    if (!value) {
      return;
    }

    model.reason = '';
  }
);
</script>

<template>
  <BusinessFormDialog v-model="visible" title="移出成员" preset="sm" @confirm="handleConfirm">
    <ElAlert
      :title="`确认将 ${member?.userNickname || member?.userId || '--'} 从当前项目团队中移出吗？`"
      type="warning"
      :closable="false"
      class="mb-16px"
    />
    <ElForm label-position="top">
      <ElFormItem label="移出原因">
        <ElInput
          v-model="model.reason"
          type="textarea"
          :rows="4"
          maxlength="500"
          show-word-limit
          placeholder="请输入移出原因"
        />
      </ElFormItem>
    </ElForm>
  </BusinessFormDialog>
</template>
