<template>
  <view class="admin-page">
    <view class="admin-sections">
      <!-- 页面标题 -->
      <view class="page-header admin-card">
        <text class="title">翻译配置</text>
      </view>

      <!-- 配置表单 -->
      <view class="admin-card content-card form-container">
        <view class="form-item">
          <view class="form-label">
            <text class="required">*</text>
            <text>AccessKey:</text>
          </view>
          <view class="form-content">
            <input class="form-input" v-model="config.accessKey" placeholder="请输入 AccessKey" />
            <text class="form-tip">机器翻译仅支持火山翻译，注册地址 https://console.volcengine.com，在访问控制里面新建 api 密钥</text>
          </view>
        </view>

        <view class="form-item mt-24">
          <view class="form-label">
            <text class="required">*</text>
            <text>SecretKey:</text>
          </view>
          <view class="form-content">
            <input class="form-input" v-model="config.secretKey" placeholder="请输入 SecretKey" type="password" />
            <text class="form-tip">机器翻译仅支持火山翻译，注册地址 https://console.volcengine.com，在访问控制里面新建 api 密钥</text>
          </view>
        </view>

        <view class="form-actions mt-32">
          <button class="btn primary submit-btn" @click="onSubmit">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const config = ref({
  accessKey: 'AKLTMzkzZTEzNjg3OTg2NDVlMzlwnmFIYzhmNzkzMmE4MmI4YmI',
  secretKey: 'TVRneU16STFOVFV4WVRWVE5EERTJaV0pqWm1aa1U1UagINVFpPWld'
})

function onSubmit() {
  uni.showLoading({ title: '提交中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '保存成功' })
  }, 1000)
}
</script>

<style scoped lang="scss">
.admin-page {
  /* 使用 Layout 的背景和内边距 */
  min-height: 100vh;
}

.admin-card {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.form-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.form-label {
  width: 120px;
  padding-top: 8px;
  text-align: right;
  margin-right: 16px;
  font-size: 14px;
  color: #333;
}

.required {
  color: #ff4d4f;
  margin-right: 4px;
}

.form-content {
  flex: 1;
  max-width: 600px;
}

.form-input {
  width: 100%;
  height: 38px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 14px;
}

.form-tip {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #999;
}

.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

.form-actions {
  padding-left: 136px;
}

.btn {
  height: 38px;
  padding: 0 24px;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}

.btn.primary {
  background-color: #1890ff;
  color: #fff;
}

.submit-btn {
  width: 80px;
}
</style>
