<template>
  <div class="website-config-setting">
    <!-- 顶部提示信息 -->
    <div class="setting-hint">
      <el-alert :closable="false" type="info" class="custom-alert">
        <template #title>
          <div class="alert-content">
            <el-icon class="info-icon"><InfoFilled /></el-icon>
            <span>在此配置系统各端的展示信息，包括浏览器标题、图标及登录页背景等。</span>
          </div>
        </template>
      </el-alert>
    </div>

    <!-- 配置表单区 -->
    <div class="setting-body">
      <el-form ref="websiteFormRef" :model="form" :rules="rules" label-width="140px" label-position="right" class="premium-setting-form">

        <!-- 客户端选择 -->
        <el-form-item label="配置端：">
          <el-radio-group v-model="form.id" @change="handleTypeChange" class="custom-radio-group">
            <el-radio :label="1" border>平台端</el-radio>
            <el-radio :label="2" border>商户端</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 网站标题 -->
        <el-form-item label="网站标题：" prop="title">
          <el-input v-model="form.title" placeholder="请输入浏览器显示的网站标题" class="config-input" />
          <div class="form-tip">用于浏览器标签页显示的标题内容</div>
        </el-form-item>

        <!-- 登录页标题 -->
        <el-form-item label="登录页标题：" prop="loginTitle">
          <el-input v-model="form.loginTitle" placeholder="请输入登录页面显示的标题" class="config-input" />
        </el-form-item>

        <!-- 侧边栏标题 -->
        <el-form-item label="菜单标题：" prop="menuTitle">
          <el-input v-model="form.menuTitle" placeholder="请输入左侧菜单顶部的标题" class="config-input" />
        </el-form-item>

        <!-- 网站图标 -->
        <el-form-item label="网站图标：" prop="icon">
          <image-upload v-model="form.icon" :limit="1" :can-delete="false" />
          <div class="form-tip">建议尺寸：32x32，支持 png/ico 格式</div>
        </el-form-item>

        <!-- 登录背景图 -->
        <el-form-item label="登录页背景：" prop="loginBackground">
          <image-upload v-model="form.loginBackground" :limit="1" :can-delete="false" />
          <div class="form-tip">建议尺寸：1920x1080，支持 jpg/png 格式</div>
        </el-form-item>

        <!-- 保存按钮 -->
        <el-form-item class="action-item">
          <el-button type="primary" class="save-btn" :loading="buttonLoading" @click="submitForm">保存修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup name="WebsiteConfig" lang="ts">
import { getWebsiteSetting, editWebsiteSetting } from '@/api/system/websiteSetting';
import { WebsiteSettingVO, WebsiteSettingEditForm } from '@/api/system/websiteSetting/types';
import { InfoFilled } from '@element-plus/icons-vue';
import ImageUpload from '@/components/ImageUpload/index.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const buttonLoading = ref(false);
const websiteFormRef = ref<ElFormInstance>();

// 我们在表单中使用 any 处理，因为 ImageUpload 的 v-model 可能在展示时是 ID 字符串，获取时是 number
const form = ref<any>({
  id: 1,
  icon: undefined,
  title: '',
  loginTitle: '',
  loginBackground: undefined,
  menuTitle: ''
});

const rules = {
  title: [{ required: true, message: "网站标题不能为空", trigger: "blur" }],
  loginTitle: [{ required: true, message: "登录页标题不能为空", trigger: "blur" }],
  menuTitle: [{ required: true, message: "菜单标题不能为空", trigger: "blur" }],
};

/** 加载配置 */
const loadConfig = async (id: number) => {
  const res = await getWebsiteSetting(id);
  if (res.code === 200) {
    // 接口返回的数据中 icon 和 loginBackground 是 ID，可以直接给 form
    form.value = { ...res.data };
    // 如果返回的是 number，转成 string 给 ImageUpload (它内部处理字符串 ID)
    if (typeof form.value.icon === 'number') form.value.icon = String(form.value.icon);
    if (typeof form.value.loginBackground === 'number') form.value.loginBackground = String(form.value.loginBackground);
  }
};

/** 切换配置端 */
const handleTypeChange = (val: any) => {
  loadConfig(val);
};

/** 提交保存 */
const submitForm = () => {
  websiteFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      try {
        const submitData: WebsiteSettingEditForm = {
            id: form.value.id,
            icon: form.value.icon,
            title: form.value.title,
            loginTitle: form.value.loginTitle,
            loginBackground: form.value.loginBackground,
            menuTitle: form.value.menuTitle
        };
        await editWebsiteSetting(submitData);
        proxy?.$modal.msgSuccess("保存成功");
        loadConfig(form.value.id);
      } finally {
        buttonLoading.value = false;
      }
    }
  });
};

/** 从 URL 或者返回数据中提取 ID 的辅助方法 (根据项目具体逻辑) */
const extractIdFromUrl = (url: string) => {
    // 逻辑根据具体的 Oss 上传组件返回而定
    // 常规做法是 ImageUpload 在上传后 emit 一个对象包含 url 和 ossId
    return undefined;
};

// 监听图片组件可能的 ID 返回（如果 ImageUpload 封装了的话）
// 这里为了简化，我们假设后端 edit 接口可以处理或有相应字段映射
const handleIconUploadFinish = (ossId: number) => {
    form.value.icon = ossId;
};
const handleBgUploadFinish = (ossId: number) => {
    form.value.loginBackground = ossId;
};

onMounted(() => {
  loadConfig(1);
});
</script>

<style scoped lang="scss">
.website-config-setting {
  padding: 8px 0;
}

.setting-hint {
  margin-bottom: 32px;

  .custom-alert {
    background-color: #e8f4ff;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;

    .alert-content {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #1890ff;
      font-size: 14px;
      line-height: 1.5;

      .info-icon {
        font-size: 18px;
      }
    }
  }
}

.setting-body {
  padding-left: 20px;
}

.premium-setting-form {
  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #4e5969;
    padding-right: 24px;
  }

  .config-input {
    max-width: 520px;

    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 1px #e5e6eb inset;
      padding: 4px 12px;
      border-radius: 6px;

      &.is-focus {
        box-shadow: 0 0 0 1px #409eff inset;
      }
    }
  }

  .form-tip {
    font-size: 13px;
    color: #86909c;
    margin-top: 8px;
    line-height: 1.4;
  }

  .custom-radio-group {
    :deep(.el-radio) {
      margin-right: 16px;
      border-radius: 6px;
      padding: 0 20px;
      height: 36px;

      &.is-bordered.is-checked {
        border-color: #409eff;
        background-color: rgba(64, 158, 255, 0.04);
      }

      .el-radio__label {
        font-size: 14px;
      }
    }
  }

  .action-item {
    margin-top: 40px;
  }

  .save-btn {
    padding: 12px 32px;
    height: auto;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(64, 158, 255, 0.2);
  }
}
</style>
