<template>
  <el-card class="invite-reward-block" shadow="never">
    <template #header>
      <div class="card-header">
        <span class="header-title">邀请规则配置</span>
        <el-tag type="danger" size="small">仅邀请有礼活动</el-tag>
      </div>
    </template>

    <!-- 奖励规则类型 -->
    <el-form-item label="奖励规则类型">
      <el-select
        :model-value="formData.rewardRuleType"
        disabled
        style="width: 200px"
      >
        <el-option label="固定奖励" value="fixed" />
      </el-select>
      <span class="tip-text">当前仅支持固定奖励模式</span>
    </el-form-item>

    <!-- 分隔线 -->
    <el-divider content-position="left">
      <span class="divider-text">邀请人奖励配置（必填）</span>
    </el-divider>

    <!-- 邀请人优惠券模板 -->
    <el-form-item label="邀请人优惠券" required>
      <el-select
        :model-value="formData.inviterCouponTemplateId"
        placeholder="请选择邀请人优惠券模板"
        filterable
        clearable
        style="width: 100%"
        @update:model-value="(val: any) => { formData.inviterCouponTemplateId = val }"
      >
        <el-option
          v-for="item in couponTemplateList"
          :key="item.id"
          :label="`${item.name} (面额: ${item.discountValue}元)`"
          :value="item.id"
        />
      </el-select>
      <div class="tip-text">被邀请人完成首单后发放给邀请人的优惠券</div>
    </el-form-item>

    <!-- 分隔线 -->
    <el-divider content-position="left">
      <span class="divider-text">被邀请人奖励配置（可选）</span>
    </el-divider>

    <!-- 被邀请人优惠券模板 -->
    <el-form-item label="被邀请人优惠券">
      <el-select
        :model-value="formData.inviteeCouponTemplateId"
        placeholder="可选：选择被邀请人新人券"
        filterable
        clearable
        style="width: 100%"
        @update:model-value="(val: any) => { formData.inviteeCouponTemplateId = val }"
      >
        <el-option
          v-for="item in couponTemplateList"
          :key="item.id"
          :label="`${item.name} (面额: ${item.discountValue}元)`"
          :value="item.id"
        />
      </el-select>
      <div class="tip-text">新用户注册绑定时即时发放的优惠券</div>
    </el-form-item>

    <!-- 分隔线 -->
    <el-divider content-position="left">
      <span class="divider-text">限制条件</span>
    </el-divider>

    <!-- 每日邀请上限 -->
    <el-form-item label="每日邀请上限">
      <el-input-number
        :model-value="formData.dailyLimit"
        :min="1"
        :max="100"
        :step="1"
        placeholder="默认10"
        controls-position="right"
        @update:model-value="(val: number) => { formData.dailyLimit = val }"
      />
      <span class="tip-text">每人每天最多可发送的邀请次数</span>
    </el-form-item>

    <!-- 总邀请上限 -->
    <el-form-item label="总邀请上限">
      <el-input-number
        :model-value="formData.totalLimit"
        :min="1"
        :max="10000"
        :step="10"
        placeholder="不填则不限制"
        controls-position="right"
        @update:model-value="(val: number) => { formData.totalLimit = val }"
      />
      <span class="tip-text">活动期间每人最多邀请人数（留空表示不限）</span>
    </el-form-item>

    <!-- 首单要求 -->
    <el-form-item label="首单要求">
      <el-switch
        :model-value="formData.requireFirstOrder === 1"
        active-text="要求完成首单"
        inactive-text="无要求"
        @update:model-value="(val: boolean) => { formData.requireFirstOrder = val ? 1 : 0 }"
      />
    </el-form-item>

    <!-- 首单最低金额（条件显示） -->
    <el-form-item
      v-if="formData.requireFirstOrder === 1"
      label="首单最低金额"
    >
      <el-input-number
        :model-value="formData.minOrderAmount"
        :min="0"
        :precision="2"
        :step="10"
        placeholder="不填则不限金额"
        controls-position="right"
        @update:model-value="(val: number) => { formData.minOrderAmount = val }"
      />
      <span class="tip-text">被邀请人首单需达到的最低消费金额（元）</span>
    </el-form-item>

    <!-- 预览区域 -->
    <el-divider content-position="left">
      <span class="divider-text">配置预览</span>
    </el-divider>
    <div class="preview-box">
      <div class="preview-title">当前配置摘要：</div>
      <ul class="preview-list">
        <li>
          <strong>邀请人奖励:</strong>
          {{ getInviterCouponName() || "未配置" }}
        </li>
        <li>
          <strong>被邀请人奖励:</strong>
          {{ getInviteeCouponName() || "未配置" }}
        </li>
        <li>
          <strong>每日限制:</strong>
          {{ formData.dailyLimit || 10 }} 次/天
        </li>
        <li>
          <strong>首单要求:</strong>
          {{
            formData.requireFirstOrder === 1
              ? `需完成${formData.minOrderAmount || 0}元以上首单`
              : "无"
          }}
        </li>
      </ul>
    </div>
  </el-card>
</template>

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

interface CouponTemplate {
  id: number;
  name: string;
  discountValue: number;
  [key: string]: any;
}

interface InviteFormData {
  rewardRuleType?: string;
  inviterCouponTemplateId?: number | null;
  inviteeCouponTemplateId?: number | null;
  dailyLimit?: number | null;
  totalLimit?: number | null;
  requireFirstOrder?: number;
  minOrderAmount?: number | null;
}

const props = withDefaults(
  defineProps<{
    formData: InviteFormData;
    couponTemplateList?: CouponTemplate[];
  }>(),
  {
    couponTemplateList: () => []
  }
);

function getInviterCouponName(): string {
  if (!props.formData.inviterCouponTemplateId) return "";
  const coupon = props.couponTemplateList.find(
    (item) => item.id === props.formData.inviterCouponTemplateId
  );
  return coupon ? `${coupon.name} (${coupon.discountValue}元)` : "";
}

function getInviteeCouponName(): string {
  if (!props.formData.inviteeCouponTemplateId) return "";
  const coupon = props.couponTemplateList.find(
    (item) => item.id === props.formData.inviteeCouponTemplateId
  );
  return coupon ? `${coupon.name} (${coupon.discountValue}元)` : "";
}
</script>

<style scoped lang="scss">
.invite-reward-block {
  margin-bottom: 20px;
  border-color: #f56c6c;

  :deep(.el-card__header) {
    padding: 12px 20px;
    border-bottom: 1px solid #f56c6c20;
    background: #fef0f010;
  }

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .header-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }
}

.tip-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
}

.divider-text {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.preview-box {
  background: #fdf6ec;
  padding: 15px 20px;
  border-radius: 4px;
  border: 1px solid #faecd8;

  .preview-title {
    font-size: 14px;
    font-weight: 600;
    color: #e6a23c;
    margin-bottom: 10px;
  }

  .preview-list {
    margin: 0;
    padding-left: 20px;
    list-style: disc;

    li {
      line-height: 2;
      font-size: 13px;
      color: #606266;

      strong {
        color: #303133;
        min-width: 90px;
        display: inline-block;
      }
    }
  }
}

:deep(.el-form-item) {
  margin-bottom: 18px;

  &:last-child {
    margin-bottom: 0;
  }
}

:deep(.el-divider) {
  margin: 24px 0 18px;

  .el-divider__text {
    background-color: transparent;
    padding: 0 10px;
  }
}

:deep(.el-input-number) {
  width: 200px;
}

:deep(.el-switch) {
  --el-switch-on-color: #f56c6c;
}
</style>
