
<template>
  <div class="container-box">
    <div class="header-bar">
      <h2>短信配置</h2>
    </div>

    <el-divider />

    <div class="content-box">
      <Edit :config="smsForm" @saved="loadSmsConfig" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import Edit from "./components/edit.vue";
import { getSmsInfo } from "../../../api/sms";

const smsForm = reactive({
  backendUrl: "",
  apiKey: "",
});

const loadSmsConfig = async () => {
  const res = await getSmsInfo();
  if (res.code === 200 && Array.isArray(res.data) && res.data.length > 0) {
    const item = res.data[0];
    smsForm.backendUrl = item.backend_url || item.backendUrl || "";
    smsForm.apiKey = item.api_key || item.apiKey || "";
  }
};

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

<style scoped lang="less">
.container-box {
  padding: 20px;
}

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

  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
  }
}

.content-box {
  margin-top: 20px;
}
</style>