<template>
  <view class="user-config-page">
    <view class="config-card">
      <!-- 顶部 Tab 切换 -->
      <view class="config-tabs">
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 0 }"
          @click="activeTab = 0"
        >
          <text>用户等级配置</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 1 }"
          @click="activeTab = 1"
        >
          <text>新用户设置</text>
        </view>
      </view>
      
      <view class="config-content">
        <!-- 用户等级配置表单 -->
        <view v-if="activeTab === 0" class="config-form">
          <view class="form-item">
            <view class="item-label">
              <text class="label-text">用户等级启用：</text>
            </view>
            <view class="item-content">
              <radio-group class="radio-group" @change="onLevelEnabledChange">
                <label class="radio-label">
                  <radio value="1" :checked="levelConfig.enabled === '1'" color="#2f54eb" />
                  <text class="radio-text">开启</text>
                </label>
                <label class="radio-label">
                  <radio value="0" :checked="levelConfig.enabled === '0'" color="#2f54eb" />
                  <text class="radio-text">关闭</text>
                </label>
              </radio-group>
              <text class="item-desc">商城用户等级功能开启关闭</text>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label">
              <text class="label-text">订单赠送经验：</text>
            </view>
            <view class="item-content">
              <input class="config-input" v-model="levelConfig.orderExp" type="number" />
              <text class="item-desc">下单赠送用户经验比例 (实际支付1元赠送多少经验)</text>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label">
              <text class="label-text">邀新赠送经验：</text>
            </view>
            <view class="item-content">
              <input class="config-input" v-model="levelConfig.inviteExp" type="number" />
              <text class="item-desc">邀请一个新用户赠送用户经验值</text>
            </view>
          </view>

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

        <!-- 新用户设置表单 -->
        <view v-else class="config-form">
          <view class="form-item">
            <view class="item-label">
              <text class="label-text">用户默认头像：</text>
            </view>
            <view class="item-content">
              <view class="avatar-upload">
                <image class="avatar-preview" src="https://img.crmeb.com/crmeb_demo/75211.png" mode="aspectFill" />
                <view class="upload-mask">
                  <text class="upload-icon">+</text>
                </view>
              </view>
              <text class="item-desc">内用户默认头像，后台添加用户以及用户登录的默认头像显示，尺寸(80*80)</text>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label">
              <text class="label-text">强制手机号登录：</text>
            </view>
            <view class="item-content">
              <radio-group class="radio-group" @change="onForcePhoneChange">
                <label class="radio-label">
                  <radio value="1" :checked="newUserConfig.forcePhone === '1'" color="#2f54eb" />
                  <text class="radio-text">强制</text>
                </label>
                <label class="radio-label">
                  <radio value="0" :checked="newUserConfig.forcePhone === '0'" color="#2f54eb" />
                  <text class="radio-text">不强制</text>
                </label>
              </radio-group>
              <text class="item-desc">用户在授权之后强制绑定手机号，可以实现用户多端统一</text>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label">
              <text class="label-text">赠送余额(元)：</text>
            </view>
            <view class="item-content">
              <input class="config-input" v-model="newUserConfig.giftBalance" type="number" />
              <text class="item-desc">新用户奖励金额，必须大于等于0，0为不赠送</text>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label">
              <text class="label-text">赠送积分：</text>
            </view>
            <view class="item-content">
              <input class="config-input" v-model="newUserConfig.giftIntegral" type="number" />
              <text class="item-desc">新用户奖励积分，必须大于等于0，0为不赠送</text>
            </view>
          </view>

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

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

const activeTab = ref(0)

const levelConfig = ref({
  enabled: '1',
  orderExp: '1',
  inviteExp: '100'
})

const newUserConfig = ref({
  forcePhone: '1',
  giftBalance: '88888',
  giftIntegral: '88888'
})

function onLevelEnabledChange(e: any) {
  levelConfig.value.enabled = e.detail.value
}

function onForcePhoneChange(e: any) {
  newUserConfig.value.forcePhone = e.detail.value
}

function onSubmit() {
  uni.showLoading({ title: '提交中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '修改成功',
      icon: 'success'
    })
  }, 800)
}
</script>

<style scoped lang="scss">
.user-config-page {
  padding: 16px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.config-card {
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
}

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

.tab-item {
  padding: 16px 20px;
  cursor: pointer;
  position: relative;
  
  text {
    font-size: 15px;
    color: #666;
  }

  &.active {
    text {
      color: #1890ff;
      font-weight: 500;
    }
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: #1890ff;
    }
  }
}

.config-content {
  padding: 32px 24px;
}

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

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

.item-label {
  width: 160px;
  padding-top: 6px;
  display: flex;
  justify-content: flex-end;
  margin-right: 24px;
}

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

.item-content {
  flex: 1;
}

.radio-group {
  display: flex;
  flex-direction: row;
  gap: 32px;
  margin-bottom: 8px;
}

.radio-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

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

.config-input {
  width: 400px;
  height: 36px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 14px;
  margin-bottom: 8px;
}

.item-desc {
  display: block;
  font-size: 12px;
  color: #bfbfbf;
}

.avatar-upload {
  width: 60px;
  height: 60px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
}

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

.upload-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  
  &:hover {
    opacity: 1;
  }
}

.upload-icon {
  color: #fff;
  font-size: 24px;
}

.form-actions {
  margin-top: 48px;
  padding-left: 184px;
}

.submit-btn {
  width: 72px;
  height: 32px;
  background-color: #2f54eb;
  border-color: #2f54eb;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin: 0;
}
</style>
