<template>
  <div>
    <ElCard shadow="never">
      <ElAlert
        :title="$t('quotaPackage.alertConfig.tip.title')"
        :description="$t('quotaPackage.alertConfig.tip.description')"
        type="info"
        show-icon
        :closable="false"
        class="mb-4"
      />

      <ElForm :model="formModel" label-width="140px">
        <ElRow :gutter="16">
          <ElCol v-for="item in quotaTypeItems" :key="item.quotaType" :span="12">
            <ElFormItem :label="item.label">
              <div class="threshold-row">
                <ElSlider v-model="formModel[item.quotaType]" :min="0" :max="100" />
                <ElInputNumber
                  v-model="formModel[item.quotaType]"
                  :min="0"
                  :max="100"
                  :step="1"
                  controls-position="right"
                  class="threshold-input"
                />
                <span class="unit">%</span>
              </div>
            </ElFormItem>
          </ElCol>
        </ElRow>

        <div class="actions">
          <ElButton @click="handleResetForm">{{
            $t('quotaPackage.alertConfig.action.reset')
          }}</ElButton>
          <ElButton @click="handleResetDefault">
            {{ $t('quotaPackage.alertConfig.action.resetDefault') }}
          </ElButton>
          <ElButton type="primary" @click="handleSave" v-ripple>
            {{ $t('quotaPackage.alertConfig.action.save') }}
          </ElButton>
        </div>
      </ElForm>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { ElMessage } from 'element-plus'
  import { useQuotaAlertStore } from '@/store/modules/quota-alert'
  import {
    ElAlert,
    ElButton,
    ElCard,
    ElCol,
    ElForm,
    ElFormItem,
    ElInputNumber,
    ElRow,
    ElSlider
  } from 'element-plus'

  defineOptions({ name: 'QuotaAlertConfigPanel' })

  const { t } = useI18n()
  const quotaAlertStore = useQuotaAlertStore()

  // 1. 配额类型列表
  const quotaTypeItems = computed(() => [
    { quotaType: 0, label: t('quotaPackage.quotaType.storeCount') },
    { quotaType: 1, label: t('quotaPackage.quotaType.accountCount') },
    { quotaType: 2, label: t('quotaPackage.quotaType.storage') },
    { quotaType: 3, label: t('quotaPackage.quotaType.smsCredits') },
    { quotaType: 4, label: t('quotaPackage.quotaType.deliveryOrders') },
    { quotaType: 5, label: t('quotaPackage.quotaType.promotionSlots') }
  ])

  // 2. 表单模型（与 Store 解耦，避免输入过程直接写入持久化）
  const formModel = ref<Record<number, number>>({})

  const syncFromStore = () => {
    formModel.value = { ...quotaAlertStore.thresholds }
  }

  // 3. 保存
  const handleSave = () => {
    for (const item of quotaTypeItems.value) {
      quotaAlertStore.setThreshold(item.quotaType, formModel.value[item.quotaType] ?? 0)
    }
    ElMessage.success(t('quotaPackage.alertConfig.message.saveSuccess'))
  }

  // 4. 重置（仅重置当前表单）
  const handleResetForm = () => {
    syncFromStore()
    ElMessage.success(t('quotaPackage.alertConfig.message.resetSuccess'))
  }

  // 5. 重置为默认值
  const handleResetDefault = () => {
    quotaAlertStore.resetToDefault()
    syncFromStore()
    ElMessage.success(t('quotaPackage.alertConfig.message.resetDefaultSuccess'))
  }

  // 6. 生命周期
  onMounted(() => {
    syncFromStore()
  })
</script>

<style scoped>
  .threshold-row {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
  }

  .threshold-input {
    width: 120px;
  }

  .unit {
    color: var(--el-text-color-regular);
  }

  .actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
  }
</style>
