<template>
    <div class="min-h-screen bg-gray-50 p-8">
      <div class="mx-auto max-w-7xl">
        <!-- 标题区域 -->
        <div class="mb-8 bg-white rounded-lg p-6 shadow-sm">
          <h1 class="text-3xl font-bold text-gray-900">业务设置</h1>
          <p class="mt-2 text-gray-600">在此配置系统的业务规则和相关参数</p>
        </div>
        <!-- 配置卡片区域 -->
        <div class="grid gap-6">
          <!-- 多次来电配置 -->
          <div class="rounded-lg bg-white p-6 shadow-sm">
            <div class="mb-6 flex items-center justify-between">
              <div>
                <h2 class="text-xl font-semibold text-gray-900">重复来电配置</h2>
                <p class="mt-1 text-sm text-gray-500">设置多次来电的触发条件</p>
              </div>
              <el-button
                type="primary"
                class="!rounded-button whitespace-nowrap"
                @click="saveSettings"
                :loading="saving"
              >
                保存配置
              </el-button>
            </div>
            <div class="flex items-center space-x-4">
              <div class="flex items-center">
                <el-input
                  v-model="dayCount"
                  type="number"
                  :min="1"
                  :max="365"
                  class="w-24"
                  @change="validateDayCount"
                >
                  <template #append>天</template>
                </el-input>
              </div>
              <span class="text-gray-600">内超过</span>
              <div class="flex items-center">
                <el-input
                  v-model="callCount"
                  type="number"
                  :min="1"
                  :max="100"
                  class="w-24"
                  @change="validateCallCount"
                >
                  <template #append>次</template>
                </el-input>
              </div>
              <span class="text-gray-600">来电</span>
            </div>
            <div class="mt-4 text-sm text-gray-500">
              注：当客户在设定天数内的来电次数超过设定值时，系统将自动标记为重复来电客户。
            </div>
          </div>
          <!-- 保存成功提示 -->
          <el-dialog
            v-model="showSuccessDialog"
            title="保存成功"
            width="30%"
            :show-close="false"
            center
          >
            <div class="flex items-center justify-center py-4">
              <el-icon class="mr-2 text-green-500"><CircleCheckFilled /></el-icon>
              <span>配置已成功保存</span>
            </div>
            <template #footer>
              <div class="flex justify-center">
                <el-button
                  type="primary"
                  class="!rounded-button whitespace-nowrap"
                  @click="showSuccessDialog = false"
                >
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { CircleCheckFilled } from "@element-plus/icons-vue";
const dayCount = ref<number | null>(7);
const callCount = ref<number | null>(3);
const saving = ref(false);
const showSuccessDialog = ref(false);
const validateDayCount = (value: number) => {
  if (value < 1) {
    dayCount.value = 1;
    ElMessage.warning("天数不能小于1天");
  } else if (value > 365) {
    dayCount.value = 365;
    ElMessage.warning("天数不能超过365天");
  }
};
const validateCallCount = (value: number) => {
  if (value < 1) {
    callCount.value = 1;
    ElMessage.warning("次数不能小于1次");
  } else if (value > 100) {
    callCount.value = 100;
    ElMessage.warning("次数不能超过100次");
  }
};
const saveSettings = async () => {
  if (!dayCount.value || !callCount.value) {
    ElMessage.error("请填写完整的配置信息");
    return;
  }
  saving.value = true;
  try {
    // 模拟保存操作
    await new Promise((resolve) => setTimeout(resolve, 1000));
    showSuccessDialog.value = true;
  } catch (error) {
    ElMessage.error("保存失败，请重试");
  } finally {
    saving.value = false;
  }
};
</script>

<style scoped>
.el-input-number :deep(.el-input__wrapper) {
  padding-right: 0;
}
.el-input :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e7eb inset;
}
.el-input :deep(.el-input__wrapper):hover {
  box-shadow: 0 0 0 1px #d1d5db inset;
}
.el-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset;
}
.el-input :deep(.el-input-group__append) {
  background-color: #f3f4f6;
  border-left: 1px solid #e5e7eb;
  color: #374151;
  padding: 0 12px;
}
</style>
  