<template>
  <h2>
    系统
  </h2>
  <hr>
  <div>
    <hr>
    <div class="section mb-2">
      <h4>默认验证模型配置</h4>
      <div>
        默认验证模型：
        <select class="form-control" v-model="default_verification_model_id">
          <option value="">无（使用服务器默认）</option>
          <option v-for="vm in verification_models" :key="vm.id" :value="vm.id">{{ vm.name }}</option>
        </select>
      </div>
      <button class="my-1 btn btn-primary" @click="save_default_verification_model">保存</button>
    </div>
  </div>
  <div class="fade-in">
    <div class="section">
      <h4>
        备份和恢复
      </h4>
      <hr>
      <BackupRestore />
      <Modal
        title="删除"
        body="确定要删除吗？"
        ref="delete_modal"
        ></Modal>
    </div>
  </div>
</template>

<script>
import BackupRestore from '../components/backup-restore';

export default {
  name: 'SystemSettings',
  props: [],
  components: {
    BackupRestore,
  },
  data: function () {
    return {
      verification_models: [],
      default_verification_model_id: '',
    };
  },
  computed: {
  },
  methods: {
    async reload() {
      // Load verification models
      try {
        const models = await this.$root.api_get_all("/api/v1/verification-model/");
        this.verification_models = models;
      } catch (e) {
        this.verification_models = [];
      }

      // Load default verification model - treat 404 as empty
      try {
        const r = await this.$root.api_get("/api/v1/global-config/?name=default_verification_model");
        this.default_verification_model_id = r.data.value || '';
      } catch (e) {
        // 404 or any other error - treat as empty/default
        this.default_verification_model_id = '';
      }
    },
    async save_default_verification_model() {
      await this.$root.api_post("/api/v1/global-config/", {
        name: 'default_verification_model',
        value: this.default_verification_model_id || '',
      });
      await this.reload();
      this.$root.notify("保存成功", "默认验证模型配置已更新");
    },
  },
  mounted() {
    this.reload();
  },
}
</script>

<style scoped>
div.section {
  border: 1px solid #888;
  border-radius: 5px;
  padding: 1rem;
}
</style>

