<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { request, bizApi } from "@/api/utils";

defineOptions({
  name: "sysSettings"
});

// 定义配置数据
const settingsData = ref({
  issuance_bids: {
    max_vadlid_days: 7,
    bidding_num: 3,
    cut_in_num: 5
  },
  subscribe: {
    subscribe_words: 3,
    word_length: 10
  },
  purchases: [
    { purchase_type: 1, valid_day: 7, need_points: 2000 },
    { purchase_type: 2, need_points: 3000 },
    { purchase_type: 3, need_points: 300 },
    { purchase_type: 4, need_points: 200000 },
    { purchase_type: 5, need_points: 100 },
    { purchase_type: 6, need_points: 1000 }
  ],
  membership_config: {
    issuance_num_per_month_company: 10,
    issuance_num_per_month_person: 5
  }
});

// 道具类型映射
const purchaseTypeMap = {
  1: "置顶卡",
  2: "提升卡",
  3: "排他卡",
  4: "直通卡",
  5: "插队卡",
  6: "跳转卡"
};

// 加载设置数据
const loadSettings = async () => {
  try {
    const res = await request(bizApi("getSysSettings"), {
      method: "POST"
    });
    console.info(res);
    if (res.status === 200) {
      res.data.forEach(item => {
        settingsData.value[item.settingsKey] = JSON.parse(item.settingsContent);
      });
    }
  } catch (error) {
    console.error("获取系统设置失败:", error);
    ElMessage.error("获取系统设置失败");
  }
};

// 保存设置
const saveSettings = async (key: string) => {
  try {
    const params = {
      settingsKey: key,
      settingsContent: JSON.stringify(settingsData.value[key])
    };
    const res = await request(bizApi("updateSysSettings"), {
      method: "POST",
      body: JSON.stringify(params)
    });
    if (res.status === 200) {
      ElMessage.success("保存成功");
    } else {
      ElMessage.error(res.msg || "保存失败");
    }
  } catch (error) {
    console.error("保存系统设置失败:", error);
    ElMessage.error("保存系统设置失败");
  }
};

onMounted(() => {
  loadSettings();
});
</script>

<template>
  <div class="settings-container">
    <!-- 发标设置 -->
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>发标设置</span>
          <el-button type="primary" @click="saveSettings('issuance_bids')"
            >保存</el-button
          >
        </div>
      </template>
      <el-form
        label-width="160px"
        :model="settingsData.issuance_bids"
        class="settings-form"
      >
        <el-form-item label="最大有效天数">
          <el-input-number
            v-model="settingsData.issuance_bids.max_vadlid_days"
            :min="1"
            :max="30"
          />
        </el-form-item>
        <el-form-item label="投标数量">
          <el-input-number
            v-model="settingsData.issuance_bids.bidding_num"
            :min="1"
            :max="10"
          />
        </el-form-item>
        <el-form-item label="插队数量">
          <el-input-number
            v-model="settingsData.issuance_bids.cut_in_num"
            :min="1"
            :max="10"
          />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 订阅设置 -->
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>订阅设置</span>
          <el-button type="primary" @click="saveSettings('subscribe')"
            >保存</el-button
          >
        </div>
      </template>
      <el-form
        label-width="160px"
        :model="settingsData.subscribe"
        class="settings-form"
      >
        <el-form-item label="订阅关键词数量">
          <el-input-number
            v-model="settingsData.subscribe.subscribe_words"
            :min="1"
            :max="10"
          />
        </el-form-item>
        <el-form-item label="关键词最大长度">
          <el-input-number
            v-model="settingsData.subscribe.word_length"
            :min="1"
            :max="20"
          />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 道具设置 -->
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>道具设置</span>
          <el-button type="primary" @click="saveSettings('purchases')"
            >保存</el-button
          >
        </div>
      </template>
      <el-table :data="settingsData.purchases" border class="settings-table">
        <el-table-column label="道具类型" align="center">
          <template #default="{ row }">
            {{ purchaseTypeMap[row.purchase_type] }}
          </template>
        </el-table-column>
        <el-table-column label="有效天数" align="center">
          <template #default="{ row }">
            <el-input-number
              v-if="row.valid_day !== undefined"
              v-model="row.valid_day"
              :min="1"
              :max="30"
              controls-position="right"
            />
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="所需积分" align="center">
          <template #default="{ row }">
            <el-input-number
              v-model="row.need_points"
              :min="1"
              controls-position="right"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 会员配置 -->
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>会员配置</span>
          <el-button type="primary" @click="saveSettings('membership_config')"
            >保存</el-button
          >
        </div>
      </template>
      <el-form
        label-width="160px"
        :model="settingsData.membership_config"
        class="settings-form"
      >
        <el-form-item label="公司每月发标数量">
          <el-input-number
            v-model="
              settingsData.membership_config.issuance_num_per_month_company
            "
            :min="1"
            :max="100"
          />
        </el-form-item>
        <el-form-item label="个人每月发标数量">
          <el-input-number
            v-model="
              settingsData.membership_config.issuance_num_per_month_person
            "
            :min="1"
            :max="50"
          />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.settings-container {
  padding: 20px;

  .settings-card {
    margin-bottom: 20px;

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .settings-form {
      max-width: 600px;
    }

    .settings-table {
      width: 100%;
      margin-top: 20px;
    }
  }
}
</style>
