<script setup lang="ts">
import { computed, reactive, watch } from "vue";

import type { AdminUser } from "../types/api";

const props = defineProps<{
  modelValue: boolean;
  users: AdminUser[];
  submitting: boolean;
}>();

const emit = defineEmits<{
  "update:modelValue": [value: boolean];
  submit: [payload: { extensionDays: number; remark: string }];
}>();

const form = reactive({ extensionDays: 30, remark: "" });
const title = computed(() => props.users.length > 1 ? `批量续期（${props.users.length} 人）` : "用户权益续期");
const userNames = computed(() => props.users.map((user) => user.name || user.phone).join("、"));

watch(() => props.modelValue, (open) => {
  if (open) Object.assign(form, { extensionDays: 30, remark: "" });
});
</script>

<template>
  <el-dialog
    :model-value="modelValue"
    :title="title"
    width="min(520px, calc(100vw - 32px))"
    destroy-on-close
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <div class="renew-summary">
      <span>续期对象</span>
      <strong>{{ userNames }}</strong>
      <small>未到期权益从原到期日顺延；已到期权益从当前时间重新生效。长期有效或未分配专属权益的用户不会被误续期。</small>
    </div>
    <el-form label-position="top" @submit.prevent>
      <el-form-item label="延长天数">
        <el-input-number v-model="form.extensionDays" :min="1" :max="3650" controls-position="right" />
      </el-form-item>
      <el-form-item label="续期备注（可选）">
        <el-input v-model="form.remark" maxlength="255" show-word-limit placeholder="例如：线下续费确认、活动补偿" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :disabled="submitting" @click="$emit('update:modelValue', false)">取消</el-button>
      <el-button type="primary" :loading="submitting" @click="emit('submit', form)">确认续期</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.renew-summary { display: grid; gap: 6px; margin-bottom: 18px; padding: 14px; border-radius: 10px; background: #f4f8f6; }
.renew-summary span, .renew-summary small { color: #6d7e78; font-size: 12px; }
.renew-summary strong { color: #25483e; line-height: 1.55; }
.renew-summary small { line-height: 1.6; }
.el-input-number { width: 100%; }
</style>
