<template>
  <view class="admin-page">
    <view class="admin-card content-card">
      <view class="tabs-row">
        <view class="tab-item active">
          <text class="tab-text">PC站点配置</text>
        </view>
      </view>

      <view class="config-form">
        <view class="form-item row">
          <text class="label">PC端LOGO：</text>
          <view class="form-content">
            <view class="logo-upload" @click="handleUploadLogo">
              <image v-if="config.logo" :src="config.logo" mode="aspectFit" class="logo-preview" />
              <view v-else class="upload-placeholder">
                <text class="plus">+</text>
              </view>
            </view>
            <text class="tip">PC端LOGO</text>
          </view>
        </view>

        <view class="form-item row">
          <text class="label">联系电话：</text>
          <view class="form-content">
            <input class="form-input" v-model="config.phone" placeholder="请输入联系电话" />
            <text class="tip">PC底部显示的联系电话</text>
          </view>
        </view>

        <view class="form-item row">
          <text class="label">公司地址：</text>
          <view class="form-content">
            <input class="form-input" v-model="config.address" placeholder="请输入公司地址" />
            <text class="tip">PC底部显示的公司地址</text>
          </view>
        </view>

        <view class="form-item row">
          <text class="label">关键词：</text>
          <view class="form-content">
            <input class="form-input" v-model="config.keywords" placeholder="请输入关键词" />
            <text class="tip">网站关键词</text>
          </view>
        </view>

        <view class="form-item row">
          <text class="label">网站描述：</text>
          <view class="form-content">
            <textarea class="form-textarea" v-model="config.description" placeholder="网站描述"></textarea>
            <text class="tip">网站描述</text>
          </view>
        </view>

        <view class="form-item row">
          <text class="label">二维码类型：</text>
          <view class="form-content">
            <view class="radio-group">
              <view class="radio-item" @click="config.qrCodeType = 'official'">
                <view class="radio-circle" :class="{ active: config.qrCodeType === 'official' }"></view>
                <text class="radio-text">公众号</text>
              </view>
              <view class="radio-item" @click="config.qrCodeType = 'routine'">
                <view class="radio-circle" :class="{ active: config.qrCodeType === 'routine' }"></view>
                <text class="radio-text">小程序</text>
              </view>
            </view>
            <text class="tip">商品详情手机购买显示公众号或者小程序码</text>
          </view>
        </view>

        <view class="form-item row">
          <text class="label">精品推荐个数：</text>
          <view class="form-content">
            <input class="form-input" type="number" v-model="config.recommendCount" placeholder="3" />
            <text class="tip">首页配置精品推荐个数</text>
          </view>
        </view>

        <view class="form-item row">
          <text class="label">首发新品个数：</text>
          <view class="form-content">
            <input class="form-input" type="number" v-model="config.newProductCount" placeholder="5" />
            <text class="tip">首页配置首发新品个数</text>
          </view>
        </view>

        <view class="form-btns">
          <button class="btn primary" @click="handleSubmit">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

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

const config = reactive({
  logo: '',
  phone: '',
  address: '',
  keywords: '',
  description: '',
  qrCodeType: 'routine',
  recommendCount: 3,
  newProductCount: 5
})

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

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

const handleUploadLogo = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      config.logo = res.tempFilePaths[0]
    }
  })
}

const handleSubmit = async () => {
  uni.showLoading({ title: '正在保存...' })
  try {
    const ok = await saveSystemConfig('pc_site_config', config as UTSJSONObject, 'PC站点配置')
    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 lang="scss">
.admin-page {
  /* 使用 Layout 的背景和内边距 */
  min-height: 100vh;
}

.content-card {
  background: #fff;
  border-radius: 4px;
}

.tabs-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 20px;
}

.tab-item {
  padding: 15px 20px;
  position: relative;
  
  &.active {
    .tab-text {
      color: #1890ff;
    }
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: #1890ff;
    }
  }
}

.tab-text {
  font-size: 14px;
  color: #333;
}

.config-form {
  padding: 30px 20px;
  max-width: 800px;
}

.form-item {
  margin-bottom: 25px;
  
  &.row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
}

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

.form-content {
  flex: 1;
}

.logo-upload {
  width: 80px;
  height: 80px;
  border: 1px dashed #dcdee2;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  &:hover {
    border-color: #1890ff;
  }
}

.logo-preview {
  width: 100%;
  height: 100%;
}

.upload-placeholder {
  .plus {
    font-size: 24px;
    color: #ccc;
  }
}

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

.form-textarea {
  width: 100%;
  max-width: 460px;
  height: 100px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
}

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

.radio-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 36px;
}

.radio-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 25px;
  cursor: pointer;
}

.radio-circle {
  width: 16px;
  height: 16px;
  border: 1px solid #dcdee2;
  border-radius: 50%;
  margin-right: 6px;
  position: relative;
  
  &.active {
    border-color: #1890ff;
    &::after {
      content: '';
      width: 8px;
      height: 8px;
      background: #1890ff;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.radio-text {
  font-size: 14px;
  color: #333;
}

.form-btns {
  margin-top: 40px;
  padding-left: 155px;
}

.btn.primary {
  width: 64px;
  height: 32px;
  line-height: 32px;
  background: #1890ff;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  text-align: center;
  border: none;
}
</style>
