<template>
  <view class="admin-page-container">
    <view class="page-header">
      <view class="breadcrumb">
        <text class="bc-item">设置</text>
        <text class="bc-sep">/</text>
        <text class="bc-item">接口配置</text>
        <text class="bc-sep">/</text>
        <text class="bc-item">一号通</text>
        <text class="bc-sep">/</text>
        <text class="bc-item active">一号通配置</text>
      </view>
    </view>
    <view class="content-card">
      <view class="tabs-header">
        <view class="tab-item" @click="navigateTo('/pages/mall/admin/setting/interface/onepass/index')">
          <text class="tab-text">一号通账户</text>
        </view>
        <view class="tab-item active">
          <text class="tab-text">一号通配置</text>
        </view>
      </view>
      <view class="form-section">
        <view class="section-title">一号通配置</view>
        <view class="form-content">
          <view class="form-row">
            <view class="form-label"><text class="star">*</text>AppId:</view>
            <view class="form-input-box">
              <input class="form-input" v-model="form.appId" placeholder="一号通账号内创建应用的AppId" />
              <text class="form-tips">一号通账号内创建应用的AppId</text>
            </view>
          </view>
          <view class="form-row">
            <view class="form-label"><text class="star">*</text>AppSecret:</view>
            <view class="form-input-box">
              <input class="form-input" v-model="form.appSecret" type="password" placeholder="一号通账号内创建应用的AppSecret" />
              <text class="form-tips">一号通账号内创建应用的AppSecret</text>
            </view>
          </view>
          <view class="form-row">
            <view class="form-label">电子发票状态:</view>
            <view class="form-input-box">
              <radio-group class="form-radio-group" @change="onInvoiceStatusChange">
                <label class="radio-label"><radio value="1" :checked="form.invoiceStatus == '1'" color="#2d8cf0" /><text class="radio-text">开启</text></label>
                <label class="radio-label"><radio value="0" :checked="form.invoiceStatus == '0'" color="#2d8cf0" /><text class="radio-text">关闭</text></label>
              </radio-group>
            </view>
          </view>
          <view class="form-actions">
            <button class="submit-btn" type="primary" @click="handleSubmit">提交</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="uts">
import { ref, reactive } from 'vue'
const form = reactive({ appId: 'Aiok6xUdyOmpgXNd8Syf', appSecret: 'IO30qpzHFLf2CPIPjcwTWTPVID1jeX9uTVDz', invoiceStatus: '0' })
const onInvoiceStatusChange = (e : any) => { form.invoiceStatus = e.detail.value }
const handleSubmit = () => { uni.showToast({ title: '提交成功' }) }
const navigateTo = (url : string) => { uni.navigateTo({ url }) }
</script>
<style scoped>
.admin-page-container {
  /* 使用 Layout 的背景和内边距 */
  padding: 0;
  background-color: transparent;
  min-height: auto;
}
.breadcrumb { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
.bc-item { font-size: 14px; color: #999; }
.bc-item.active { color: #333; }
.bc-sep { margin: 0 8px; color: #ccc; }
.content-card { background-color: #fff; border-radius: 4px; overflow: hidden; }
.tabs-header { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 0 20px; }
.tab-item { padding: 15px 20px; cursor: pointer; }
.tab-text { font-size: 14px; color: #666; }
.tab-item.active { border-bottom: 2px solid #2d8cf0; }
.tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; }
.form-section { padding: 20px; }
.section-title { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 40px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; }
.form-content { max-width: 800px; padding-left: 40px; }
.form-row { display: flex; flex-direction: row; margin-bottom: 24px; }
.form-label { width: 120px; font-size: 14px; color: #606266; text-align: right; padding-top: 8px; margin-right: 20px; }
.star { color: #ff4d4f; margin-right: 4px; }
.form-input-box { flex: 1; }
.form-input { width: 100%; max-width: 400px; border: 1px solid #dcdfe6; border-radius: 4px; height: 36px; padding: 0 12px; font-size: 14px; }
.form-tips { display: block; font-size: 12px; color: #999; margin-top: 8px; }
.form-radio-group { display: flex; flex-direction: row; align-items: center; height: 36px; }
.radio-label { display: flex; flex-direction: row; align-items: center; margin-right: 20px; }
.radio-text { font-size: 14px; margin-left: 8px; }
.form-actions { margin-top: 40px; padding-left: 140px; }
.submit-btn { width: 80px; height: 36px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 14px; line-height: 36px; text-align: center; }
</style>
