{% extends "../layout.html" %}

{% block title %}网站配置{% endblock %}

{% block content %}
<div id="configApp">
  <el-tabs v-model="activeTab" type="border-card">
    <!-- 基础设置 -->
    <el-tab-pane label="基础设置" name="basic">
      <el-form :model="form.basic" label-width="120px" class="max-w-2xl">
        <el-form-item label="站点名称">
          <el-input v-model="form.basic.site_name" placeholder="请输入站点名称" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="站点副标题">
          <el-input v-model="form.basic.site_subtitle" placeholder="请输入站点副标题" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="网站域名">
          <el-input v-model="form.basic.site_domain" placeholder="请输入网站域名" style="width:400px;" disabled></el-input>
        </el-form-item>
        <el-form-item label="ICP备案号">
          <el-input v-model="form.basic.icp_number" placeholder="请输入ICP备案号" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="版权信息">
          <el-input v-model="form.basic.copyright" placeholder="请输入版权信息" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="网站Logo">
          <div class="flex items-center gap-3">
            <div class="upload-box" @click="handleUpload('basic', 'logo')">
              <img v-if="form.basic.logo" :src="form.basic.logo" class="upload-preview">
              <div v-else class="upload-placeholder">
                <el-icon :size="28"><Plus /></el-icon>
                <span>点击上传</span>
              </div>
            </div>
            <span class="text-xs text-gray-400">建议尺寸: 200×60px，PNG格式</span>
          </div>
        </el-form-item>
        <el-form-item label="公众号二维码">
          <div class="flex items-center gap-3">
            <div class="upload-box upload-box-square" @click="handleUpload('basic', 'wechat_qrcode')">
              <img v-if="form.basic.wechat_qrcode" :src="form.basic.wechat_qrcode" class="upload-preview">
              <div v-else class="upload-placeholder">
                <el-icon :size="28"><Plus /></el-icon>
                <span>上传二维码</span>
              </div>
            </div>
            <span class="text-xs text-gray-400">建议尺寸: 300×300px</span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveConfig('basic')" :loading="saving.basic">保存配置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <!-- SEO设置 -->
    <el-tab-pane label="SEO设置" name="seo">
      <el-form :model="form.seo" label-width="140px" class="max-w-2xl">
        <el-form-item label="页面标题(Title)">
          <el-input v-model="form.seo.page_title" placeholder="请输入页面标题" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="关键词(Keywords)">
          <el-input v-model="form.seo.keywords" placeholder="请输入关键词，用逗号分隔" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="描述(Description)">
          <el-input v-model="form.seo.description" type="textarea" :rows="3" placeholder="请输入页面描述" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="Favicon">
          <div class="flex items-center gap-3">
            <div class="upload-box upload-box-small" @click="handleUpload('seo', 'favicon')">
              <img v-if="form.seo.favicon" :src="form.seo.favicon" class="upload-preview">
              <div v-else class="upload-placeholder">
                <el-icon :size="20"><Plus /></el-icon>
                <span>上传</span>
              </div>
            </div>
            <span class="text-xs text-gray-400">建议尺寸: 32×32px，ICO/PNG格式</span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveConfig('seo')" :loading="saving.seo">保存配置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <!-- 联系信息 -->
    <el-tab-pane label="联系信息" name="contact">
      <el-form :model="form.contact" label-width="140px" class="max-w-2xl">
        <el-form-item label="联系电话">
          <el-input v-model="form.contact.phone" placeholder="请输入联系电话" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱">
          <el-input v-model="form.contact.email" placeholder="请输入联系邮箱" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="办公地址">
          <el-input v-model="form.contact.address" placeholder="请输入办公地址" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="form.contact.postcode" placeholder="请输入邮政编码" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="地图坐标(经度)">
          <el-input v-model="form.contact.map_lng" placeholder="如: 116.480881" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="地图坐标(纬度)">
          <el-input v-model="form.contact.map_lat" placeholder="如: 39.948692" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveConfig('contact')" :loading="saving.contact">保存配置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <!-- 社交媒体 -->
    <el-tab-pane label="社交媒体" name="social">
      <el-form :model="form.social" label-width="140px" class="max-w-2xl">
        <el-form-item label="微信公众号名称">
          <el-input v-model="form.social.wechat_name" placeholder="请输入公众号名称" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="微信公众号ID">
          <el-input v-model="form.social.wechat_id" placeholder="请输入公众号微信号" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="微博链接">
          <el-input v-model="form.social.weibo_url" placeholder="请输入微博主页链接" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="抖音链接">
          <el-input v-model="form.social.douyin_url" placeholder="请输入抖音主页链接" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="视频号链接">
          <el-input v-model="form.social.video_url" placeholder="请输入视频号链接" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveConfig('social')" :loading="saving.social">保存配置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</div>
{% endblock %}

{% block css %}
<style>
.upload-box {
  width: 160px;
  height: 80px;
  border: 2px dashed var(--el-border-color);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
}
.upload-box:hover {
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}
.upload-box-square {
  width: 120px;
  height: 120px;
}
.upload-box-small {
  width: 80px;
  height: 80px;
}
.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--el-text-color-placeholder);
  font-size: 12px;
}
.upload-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>
{% endblock %}

{% block js %}
<script>
const configsData = {{ configs | dump | safe }};

const { createApp, ref, reactive, onMounted } = Vue;

const app = createApp({
  setup() {
    const activeTab = ref('basic');
    const saving = reactive({ basic: false, seo: false, contact: false, social: false });

    // 将配置数组转为对象
    function arrayToObject(arr) {
      const obj = {};
      if (arr && Array.isArray(arr)) {
        arr.forEach(item => {
          obj[item.key] = item.value || '';
        });
      }
      return obj;
    }

    const form = reactive({
      basic: arrayToObject(configsData.basic),
      seo: arrayToObject(configsData.seo),
      contact: arrayToObject(configsData.contact),
      social: arrayToObject(configsData.social)
    });

    // 保存配置
    async function saveConfig(group) {
      saving[group] = true;
      try {
        const res = await fetch('/admin/system/config/save', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ group, data: form[group] })
        }).then(r => r.json());

        if (res.code === 0) {
          ElementPlus.ElMessage.success('保存成功');
        } else {
          ElementPlus.ElMessage.error(res.msg || '保存失败');
        }
      } finally {
        saving[group] = false;
      }
    }

    // 上传图片
    function handleUpload(group, key) {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.onchange = async (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const formData = new FormData();
        formData.append('file', file);

        try {
          ElementPlus.ElMessage.info('上传中...');
          const res = await fetch('/admin/upload', {
            method: 'POST',
            body: formData
          }).then(r => r.json());

          if (res.code === 0) {
            form[group][key] = res.data.url;
            ElementPlus.ElMessage.success('上传成功');
          } else {
            ElementPlus.ElMessage.error(res.msg || '上传失败');
          }
        } catch (err) {
          ElementPlus.ElMessage.error('上传失败: ' + err.message);
        }
      };
      input.click();
    }

    return {
      activeTab,
      form,
      saving,
      saveConfig,
      handleUpload
    };
  }
});

app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
// 注册 Element Plus Icons
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.mount('#configApp');
</script>
{% endblock %}