<template>
  <view class="admin-page">
    <view class="admin-card content-card">
      <view class="tabs-row">
        <view class="tab-item active">APP配置</view>
      </view>
      
      <view class="config-form">
        <view class="form-item">
          <text class="label">APPID：</text>
          <input class="form-input" v-model="formData.appid" placeholder="微信开放平台申请移动应用后给予的APPID" />
          <text class="tip">微信开放平台申请移动应用后给予的APPID</text>
        </view>
        <view class="form-item">
          <text class="label">AppSecret：</text>
          <input class="form-input" v-model="formData.appsecret" placeholder="微信开放平台申请移动应用后给予的AppSecret" />
          <text class="tip">微信开放平台申请移动应用后给予的AppSecret</text>
        </view>
        
        <view class="form-btns">
          <button class="btn primary" @click="handleSubmit">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, reactive, onMounted } from 'vue'
import { getSystemConfig, saveSystemConfig } from "@/services/admin/systemConfigService.uts"

const formData = reactive({
  appid: '',
  appsecret: ''
})

onMounted(() => {
  loadConfig()
})

async function loadConfig() {
  const res = await getSystemConfig('mobile_app_config')
  if (res != null) {
    Object.assign(formData, res as any)
  }
}

async function handleSubmit() {
  uni.showLoading({ title: '正在保存...' })
  try {
    const ok = await saveSystemConfig('mobile_app_config', formData as UTSJSONObject, '移动应用(APP)配置')
    if (ok) {
      uni.showToast({ title: '保存成功', icon: 'success' })
    } else {
      uni.showToast({ title: '保存失败', icon: 'none' })
    }
  } catch (e) {
    uni.showToast({ title: '系统错误', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}
</script>

<style scoped>
.config-form {
  padding: 40px 10%;
}

.form-item {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}

.form-item .label {
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.form-input {
  border: 1px solid #dcdfe6;
  padding: 10px 15px;
  border-radius: 4px;
}

.tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.form-btns {
  margin-top: 50px;
}

.btn.primary {
  width: 80px;
  background-color: #2d8cf0;
  color: #fff;
}
</style>
