<template>
  <div class="rule-panel" :class="{ dependent: dependent }">
    <template v-if="mode === 'ntb'">
      <el-button
        v-if="removable"
        class="ntb-delete"
        type="danger"
        link
        :icon="Delete"
        title="删除规则标签"
        aria-label="删除规则标签"
        @click="$emit('remove')"
      />

      <el-form-item class="ntb-main-rule" :label="`规则标签${index + 1}`" label-width="120px" required>
        <div class="ntb-inline">
          <el-select v-model="rule.field" class="ntb-field-select">
            <el-option v-for="item in fieldOptions" :key="item" :label="item" :value="item" />
          </el-select>
          <el-select v-model="rule.operator" class="ntb-operator-select">
            <el-option label="大于等于" value="大于等于" />
          </el-select>
          <el-input-number v-model="rule.value" :min="0" :controls="false" class="ntb-value-input" />
        </div>
      </el-form-item>

      <div class="ntb-details">
        <el-form-item label="开户当月是否必须达标" label-width="160px" required>
          <el-select v-model="rule.openingMonthRequired" class="ntb-boolean-select">
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-form-item>

        <el-form-item label="是否连续达标" label-width="160px" required>
          <div class="ntb-inline">
            <el-select v-model="rule.continuous" class="ntb-boolean-select">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select>
            <template v-if="rule.continuous">
              <span>连续</span>
              <el-input-number v-model="rule.months" :min="1" :max="36" :controls="false" class="ntb-month-input" />
              <span>个月</span>
              <el-divider direction="vertical" />
              <span class="ntb-required-label">是否允许断开</span>
              <el-select v-model="rule.allowBreak" class="ntb-boolean-select">
                <el-option label="是" :value="true" />
                <el-option label="否" :value="false" />
              </el-select>
            </template>
          </div>
        </el-form-item>

        <el-form-item label="标签描述" label-width="160px" required>
          <el-input v-model="rule.labelDescription" class="ntb-wide-input" />
        </el-form-item>
        <el-form-item label="标签未达标提示" label-width="160px" required>
          <el-input v-model="rule.unreachedText" class="ntb-wide-input" />
        </el-form-item>
        <el-form-item label="标签已达标提示" label-width="160px" required>
          <el-input v-model="rule.reachedText" class="ntb-wide-input" />
        </el-form-item>
        <el-form-item label="标签进度提示" label-width="160px">
          <el-input v-model="rule.progressText" class="ntb-wide-input" placeholder="配置?弹窗提示内容" />
        </el-form-item>
      </div>
    </template>

    <template v-else>
      <div class="rule-head">
        <strong>规则标签{{ index + 1 }}</strong>
        <el-button v-if="removable" type="danger" link :icon="Delete" @click="$emit('remove')">删除</el-button>
      </div>

      <template v-if="mode === 'layer'">
        <el-form-item class="layer-main-rule" label="规则标签" label-width="120px" required>
          <div class="layer-main-controls">
            <el-select v-model="rule.field" class="layer-field-select">
              <el-option v-for="item in fieldOptions" :key="item" :label="item" :value="item" />
            </el-select>

            <template v-if="rule.field !== '境外消费' && rule.field !== '资产大类明细'">
              <el-select v-model="rule.operator" class="layer-operator-select">
                <el-option label="大于等于" value="大于等于" />
              </el-select>
              <el-input-number v-model="rule.value" :min="0" :controls="false" class="layer-value-input" />
            </template>
          </div>
        </el-form-item>

        <div v-if="rule.field === '境外消费'" class="layer-overseas-fields">
          <el-form-item label="消费时间" label-width="120px" required>
            <div class="layer-row-controls">
              <el-select v-model="rule.consumptionTimeOperator" class="layer-operator-select">
                <el-option label="小于等于" value="小于等于" />
              </el-select>
              <el-date-picker v-model="rule.consumptionEndDate" class="layer-consumption-date" type="date" value-format="YYYY-MM-DD" placeholder="请选择消费时间" />
            </div>
          </el-form-item>
          <el-form-item label="消费维度" label-width="120px" required>
            <div class="layer-row-controls">
              <el-select v-model="rule.consumptionDimension" class="layer-dimension-select">
                <el-option label="笔数" value="笔数" />
              </el-select>
              <el-select v-model="rule.operator" class="layer-operator-select">
                <el-option label="大于等于" value="大于等于" />
              </el-select>
              <el-input-number v-model="rule.value" :min="1" :controls="false" class="layer-value-input" />
            </div>
          </el-form-item>
        </div>

        <div v-if="rule.field === '资产大类明细'" class="layer-asset-fields">
          <el-form-item label="是否需要对比" label-width="150px" required>
            <el-select v-model="rule.compareRequired" class="layer-boolean-select">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select>
          </el-form-item>
          <div class="layer-asset-row">
            <el-form-item label="基准月" label-width="150px" required>
              <el-date-picker v-model="rule.baseMonth" type="month" value-format="YYYYMM" placeholder="选择月份" class="layer-date-input" />
            </el-form-item>
            <el-form-item label="新增类别" label-width="100px" required>
              <el-input-number v-model="rule.newCategoryCount" :min="1" class="layer-count-input" />
              <span class="unit">类</span>
            </el-form-item>
          </div>
          <el-form-item label="限制标签1达标月" label-width="150px" required>
            <el-select v-model="rule.limitFirstRuleMonth" class="layer-boolean-select">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select>
          </el-form-item>
        </div>

        <div v-if="showContinuous" class="layer-status-row">
          <el-form-item label="开户当月必须达标" label-width="150px" required>
            <el-select v-model="rule.openingMonthRequired" class="layer-boolean-select">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select>
          </el-form-item>
          <div class="layer-continuous-group">
            <el-form-item label="连续达标" label-width="80px" required>
              <el-select v-model="rule.continuous" class="layer-boolean-select">
                <el-option label="是" :value="true" />
                <el-option label="否" :value="false" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="rule.continuous" label="连续月份" label-width="80px" required>
              <el-input-number v-model="rule.months" :min="1" :max="36" class="layer-month-input" />
              <span class="unit">个月</span>
            </el-form-item>
            <el-form-item v-if="rule.continuous" label="允许断开" label-width="80px" required>
              <el-select v-model="rule.allowBreak" class="layer-boolean-select">
                <el-option label="是" :value="true" />
                <el-option label="否" :value="false" />
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="layer-copy-fields">
          <el-form-item label="规则标题" label-width="120px"><el-input v-model="rule.reachedText" class="layer-copy-input" /></el-form-item>
          <el-form-item label="规则描述" label-width="120px">
            <el-input v-model="rule.unreachedText" class="layer-copy-input" :placeholder="rule.field === '境外消费' ? '配置?弹窗提示内容' : ''" />
          </el-form-item>
          <el-form-item v-if="rule.field !== '境外消费' && rule.field !== '资产大类明细'" label="标签进度提示" label-width="120px"><el-input v-model="rule.progressText" class="layer-copy-input" placeholder="配置问号弹窗提示内容" /></el-form-item>
        </div>
      </template>

      <template v-else-if="mode === 'mgm' && rule.field === 'TRB值（含家庭账户）'">
        <el-form-item class="layer-main-rule mgm-trb-main-rule" label="规则标签" label-width="120px" required>
          <div class="layer-main-controls">
            <el-select v-model="rule.field" class="layer-field-select">
              <el-option v-for="item in fieldOptions" :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-model="rule.operator" class="layer-operator-select">
              <el-option label="大于等于" value="大于等于" />
            </el-select>
            <el-input-number v-model="rule.value" :min="0" :controls="false" class="layer-value-input" />
          </div>
        </el-form-item>

        <div class="mgm-trb-status">
          <el-form-item label="是否连续达标" label-width="120px" required>
            <el-select v-model="rule.continuous" class="layer-boolean-select">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select>
          </el-form-item>
          <el-form-item label="开户后" label-width="80px" required>
            <el-input-number v-model="rule.afterOpeningMonths" :min="1" class="mgm-month-input" />
            <span class="unit">个月内</span>
          </el-form-item>
          <el-form-item label="达标任意" label-width="90px" required>
            <el-input-number v-model="rule.requiredMonths" :min="1" class="mgm-month-input" />
            <span class="unit">个月</span>
          </el-form-item>
        </div>

        <div class="layer-copy-fields mgm-copy-fields">
          <el-form-item label="已达标提示话术" label-width="120px" required>
            <el-input v-model="rule.reachedText" class="layer-copy-input" />
          </el-form-item>
          <el-form-item label="待达标提示话术" label-width="120px" required>
            <el-input v-model="rule.unreachedText" class="layer-copy-input" />
          </el-form-item>
          <el-form-item label="不达标原因" label-width="120px" required>
            <el-input v-model="rule.failureReason" class="layer-copy-input" />
          </el-form-item>
        </div>
      </template>

      <template v-else-if="mode === 'mgm' && rule.field === '开户时间'">
        <el-form-item class="layer-main-rule mgm-opening-main-rule" label="规则标签" label-width="120px" required>
          <div class="layer-main-controls">
            <el-select v-model="rule.field" class="layer-field-select">
              <el-option v-for="item in fieldOptions" :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-model="rule.operator" class="layer-operator-select">
              <el-option label="介于" value="介于" />
            </el-select>
            <el-date-picker
              v-model="rule.dateRange"
              class="mgm-date-range"
              type="daterange"
              value-format="YYYY-MM-DD"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>

        <div class="layer-copy-fields mgm-copy-fields">
          <el-form-item label="已达标提示话术" label-width="120px" required>
            <el-input v-model="rule.reachedText" class="layer-copy-input" />
          </el-form-item>
          <el-form-item label="待达标提示话术" label-width="120px" required>
            <el-input v-model="rule.unreachedText" class="layer-copy-input" />
          </el-form-item>
          <el-form-item label="不达标原因" label-width="120px" required>
            <el-input v-model="rule.failureReason" class="layer-copy-input" />
          </el-form-item>
        </div>
      </template>

      <template v-else>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item :label="`规则标签${index + 1}`" required>
              <el-select v-model="rule.field" style="width:100%">
                <el-option v-for="item in fieldOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>

          <template v-if="rule.field === '开户时间'">
            <el-col :span="6"><el-form-item label="判断条件" required><el-select v-model="rule.operator" style="width:100%"><el-option label="介于" value="介于" /></el-select></el-form-item></el-col>
            <el-col :span="10"><el-form-item label="日期范围" required><el-date-picker v-model="rule.dateRange" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%" /></el-form-item></el-col>
          </template>

          <template v-else>
            <el-col :span="6"><el-form-item label="判断条件" required><el-select v-model="rule.operator" style="width:100%"><el-option label="大于等于" value="大于等于" /></el-select></el-form-item></el-col>
            <el-col :span="10"><el-form-item label="规则值" required><el-input-number v-model="rule.value" :min="0" :controls="false" style="width:100%" /></el-form-item></el-col>
          </template>
        </el-row>

        <el-row v-if="mode === 'mgm' && rule.field !== '开户时间'" :gutter="16">
          <el-col :span="6"><el-form-item label="是否连续达标" required><el-select v-model="rule.continuous" class="mgm-boolean-select"><el-option label="是" :value="true" /><el-option label="否" :value="false" /></el-select></el-form-item></el-col>
          <el-col :span="9"><el-form-item label="开户后" required><el-input-number v-model="rule.afterOpeningMonths" :min="1" /><span class="unit">个月内</span></el-form-item></el-col>
          <el-col :span="9"><el-form-item label="达标任意" required><el-input-number v-model="rule.requiredMonths" :min="1" /><span class="unit">个月</span></el-form-item></el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12"><el-form-item :label="reachedLabel" required><el-input v-model="rule.reachedText" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item :label="unreachedLabel" required><el-input v-model="rule.unreachedText" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="不达标原因" required><el-input v-model="rule.failureReason" /></el-form-item></el-col>
        </el-row>
      </template>
    </template>
  </div>
</template>

<script>
import { Delete } from '@element-plus/icons-vue'

export default {
  name: 'ActivityRuleEditor',
  emits: ['remove'],
  props: {
    rule: { type: Object, required: true },
    index: { type: Number, required: true },
    mode: { type: String, required: true },
    removable: Boolean,
    dependent: Boolean
  },
  data() { return { Delete } },
  computed: {
    fieldOptions() {
      if (this.mode === 'mgm') return ['开户时间', 'TRB值（含家庭账户）']
      if (this.mode === 'layer') return ['TRB值（含家庭账户）', '资产大类明细', '境外消费']
      return ['TRB值（含家庭账户）']
    },
    showContinuous() {
      return this.rule.field === 'TRB值（含家庭账户）' && this.mode !== 'mgm'
    },
    reachedLabel() { return this.mode === 'mgm' ? '已达标提示话术' : this.mode === 'layer' ? '规则标题' : '标签已达标提示' },
    unreachedLabel() { return this.mode === 'mgm' ? '待达标提示话术' : this.mode === 'layer' ? '规则描述' : '标签未达标提示' }
  }
}
</script>

<style scoped>
.rule-panel {
  position:relative;
  margin-top:16px;
  padding:18px 18px 2px;
  background:#f7f8fa;
  border:1px solid #e4e7ed;
  border-radius:4px;
}
.rule-panel.dependent { background:#fff1f1; border-color:#f7c6c7; }
.rule-panel :deep(.el-form-item) { display:block; margin-bottom:18px; }
.rule-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;
}
.rule-panel :deep(.el-form-item__content) { margin-left:0 !important; display:block; line-height:normal; }
.rule-head { margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; }
.unit { margin-left:8px; color:#606266; }
.ntb-delete { position:absolute; top:12px; right:14px; z-index:1; font-size:18px; }
.ntb-main-rule { margin-right:48px; }
.ntb-details { margin-left:0; }
.ntb-inline { display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:#303133; }
.ntb-field-select { width:240px; }
.ntb-operator-select { width:160px; }
.ntb-value-input { width:160px; }
.ntb-boolean-select { width:120px; }
.ntb-month-input { width:80px; }
.ntb-wide-input { width:640px; max-width:100%; }
.ntb-required-label::before { margin-right:8px; color:#f56c6c; content:'*'; }
.ntb-inline :deep(.el-divider--vertical) { height:42px; margin:0 4px 0 0; }
.layer-main-rule { margin-bottom:16px; }
.layer-main-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.layer-field-select { width:280px; }
.layer-operator-select { width:160px; }
.layer-value-input { width:180px; }
.layer-date-input { width:180px; }
.layer-count-input { width:120px; }
.layer-boolean-select { width:100px; }
.layer-overseas-fields { max-width:700px; }
.layer-row-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.layer-consumption-date { width:220px; }
.layer-dimension-select { width:120px; }
.layer-asset-fields { max-width:640px; }
.layer-asset-row { display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.layer-status-row {
  display:block;
}
.layer-status-row :deep(.el-form-item),
.layer-asset-row :deep(.el-form-item) { margin-right:0; }
.layer-continuous-group {
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
  margin-left:0;
}
.layer-month-input { width:128px; }
.layer-copy-fields { max-width:620px; }
.layer-copy-input { width:480px; max-width:100%; }
.mgm-boolean-select { width:120px; }
.mgm-trb-status {
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}
.mgm-trb-status :deep(.el-form-item) { margin-right:0; }
.mgm-trb-main-rule :deep(.el-form-item__label),
.mgm-opening-main-rule :deep(.el-form-item__label),
.mgm-trb-status :deep(.el-form-item__label),
.mgm-copy-fields :deep(.el-form-item__label) { white-space:nowrap; }
.mgm-month-input { width:128px; }
.mgm-date-range { width:320px; }

@media (max-width:1200px) {
  .ntb-details { margin-left:0; }
  .ntb-main-rule { margin-right:36px; }
  .ntb-field-select { width:220px; }
  .layer-asset-row { gap:12px; }
  .layer-continuous-group { gap:12px; margin-left:0; }
  .mgm-trb-status { gap:12px; }
}
</style>
