<template>
  <view class="admin-page">
    <view class="admin-card content-card">
      <view class="tabs-row">
        <view 
          v-for="tab in tabs" 
          :key="tab.key"
          class="tab-item"
          :class="{ active: currentTab === tab.key }"
          @click="currentTab = tab.key"
        >
          {{ tab.label }}
        </view>
      </view>
      
      <view v-if="currentTab === 'basic'" class="config-form">
        <view class="form-item">
          <text class="label">AppID：</text>
          <input class="form-input" value="wxa815e4f2ef7bdb0b" />
          <text class="tip">微信公众号的AppID</text>
        </view>
        <view class="form-item">
          <text class="label">AppSecret：</text>
          <input class="form-input" value="2c9f1ef4cc695c05c4462fef4e081120" />
          <text class="tip">微信公众号的AppSecret</text>
        </view>
        <view class="form-item">
          <text class="label">关注二维码：</text>
          <view class="upload-box">
            <text class="plus">+</text>
          </view>
          <text class="tip">引导关注公众号显示的公众号关注二维码</text>
        </view>
        <view class="form-item">
          <text class="label">微信校验文件：</text>
          <view class="upload-btn">
            <text class="icon">⤒</text>
            <text>点击上传</text>
          </view>
          <text class="tip">配置微信网页授权域名时候下载的微信校验文件，在此处上传</text>
        </view>
        
        <view class="form-btns">
          <button class="btn primary">提交</button>
        </view>
      </view>
      
      <view v-else class="config-form">
        <view class="form-item">
          <text class="label">接口地址：</text>
          <input class="form-input" readonly value="https://v5.crmeb.net/api/wechat/serve" />
          <text class="tip">配置服务器域名使用的接口地址，直接复制输入框内容（此项系统生成，无法修改）</text>
        </view>
        <view class="form-item">
          <text class="label">消息加解密方式：</text>
          <radio-group class="radio-group">
            <label><radio value="1" checked />明文模式</label>
            <label><radio value="2" />兼容模式</label>
            <label><radio value="3" />安全模式</label>
          </radio-group>
          <text class="tip">如需使用安全模式请在管理中心修改，仅限服务号和认证订阅号</text>
        </view>
        <view class="form-btns">
          <button class="btn primary">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

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

const currentTab = ref('basic')
const tabs = [
  { key: 'basic', label: '公众号配置' },
  { key: 'server', label: '服务器域名配置' }
]
</script>

<style scoped>
.config-form {
  padding: 30px 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;
  width: 100%;
}

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

.upload-box {
  width: 80px;
  height: 80px;
  border: 1px dashed #dcdfe6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  background-color: #fafafa;
}

.upload-btn {
  width: 120px;
  height: 40px;
  border: 1px solid #dcdfe6;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  gap: 5px;
}

.radio-group label {
  margin-right: 30px;
}
</style>
