<template>
  <div class="reward-config" :class="{ titled: showTitle }">
    <div v-if="showTitle" class="block-title">达标奖励配置</div>
    <div class="reward-type-row">
      <el-form-item label="达标发放" label-width="130px" required>
        <el-select v-model="reward.type" style="width:200px" @change="reward.planId = ''">
          <el-option label="积分" value="积分" />
          <el-option label="权益" value="权益" />
        </el-select>
      </el-form-item>
    </div>
    <div class="field-panel reward-field-panel">
      <template v-if="reward.type === '积分'">
        <el-form-item label="选择积分科目" label-width="130px" required>
          <el-select v-model="reward.planId" placeholder="科目编号-科目名称" class="reward-plan-select">
            <el-option v-for="item in pointPlans" :key="item.id" :label="`${item.id}-${item.name}`" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="积分赠送数量" label-width="130px" required>
          <el-input-number v-model="reward.amount" :min="1" :controls="false" class="point-amount-input" />
          <span class="unit">积分</span>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="选择权益" label-width="130px" required>
          <el-select v-model="reward.planId" placeholder="权益ID-权益名称" class="reward-plan-select">
            <el-option v-for="item in benefitPlans" :key="item.id" :label="`${item.id}-${item.name}`" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="权益有效期" label-width="130px" required>
          <el-date-picker v-model="reward.validity" class="reward-validity-picker" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" style="width:420px;max-width:100%;flex:0 1 420px" />
        </el-form-item>
        <el-form-item label="权益赠送次数" label-width="130px" required>
          <div class="reward-times-controls">
            <el-select v-model="reward.grantPeriod" class="grant-period-select">
              <el-option label="整个周期" value="整个周期" />
            </el-select>
            <el-input-number v-model="reward.times" :min="1" class="times-input" />
            <span class="unit">次</span>
          </div>
        </el-form-item>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ActivityRewardEditor',
  props: {
    reward: { type: Object, required: true },
    grantPlans: { type: Array, default: () => [] },
    showTitle: { type: Boolean, default: true }
  },
  computed: {
    pointPlans() { return this.grantPlans.filter((item) => item.rewardType === '积分') },
    benefitPlans() { return this.grantPlans.filter((item) => item.rewardType !== '积分') }
  }
}
</script>

<style scoped>
.reward-config.titled { margin:0 -24px -24px; }
.block-title {
  margin-bottom:20px;
  padding:15px 24px;
  color:#303133;
  background:#fafafa;
  border-bottom:1px solid #ebeef5;
  font-size:16px;
  font-weight:600;
}
.reward-type-row { padding:0 4px; }
.reward-config.titled .reward-type-row { padding:0 24px; }
.field-panel { padding:18px 18px 0; background:#f7f8fa; border:1px solid #f0f2f5; border-radius:4px; }
.reward-config.titled .field-panel { margin:0 24px 24px; }
.reward-type-row :deep(.el-form-item),
.reward-field-panel :deep(.el-form-item) { display:block; margin-bottom:18px; }
.reward-type-row :deep(.el-form-item__label),
.reward-field-panel :deep(.el-form-item__label) {
  width:auto !important;
  height:auto;
  margin-bottom:8px;
  justify-content:flex-start;
  color:#303133;
  font-weight:600;
  line-height:22px;
  white-space:nowrap;
}
.reward-type-row :deep(.el-form-item__content),
.reward-field-panel :deep(.el-form-item__content) { margin-left:0 !important; display:block; line-height:normal; }
.unit { margin-left:10px; color:#606266; }
.reward-plan-select { width:480px; max-width:100%; }
.reward-times-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.grant-period-select { width:150px; }
.times-input { width:110px; }
.point-amount-input { width:220px; }
</style>
