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

defineOptions({ name: 'MemberBatchRemoveDialog' });

interface Props {
  members: Api.Product.ProductMember[];
}

interface Emits {
  (e: 'submit', payload: { reason: string | null }): void;
}

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

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

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

const previewNames = computed(() => {
  const names = props.members.map(item => item.userNickname || item.userId || '').filter(Boolean);

  if (names.length <= 5) {
    return names.join('、');
  }

  return `${names.slice(0, 5).join('、')} 等 ${names.length} 人`;
});

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="`确认将选中的 ${props.members.length} 名成员（${previewNames}）从当前产品团队中移出吗？`"
      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>
