<template>
  <view class="admin-page">
    <view class="content-card">
      <view class="tabs-row">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="activeTab = index"
        >
          <text>{{ tab }}</text>
        </view>
      </view>

      <view class="form-container">
        <!-- 分销模式 -->
        <view v-if="activeTab === 0" class="form-content">
          <view class="form-item">
            <text class="label">分销启用：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.statue = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.statue === '1'" color="#1890ff" /> 开启
              </label>
              <label class="radio-label">
                <radio value="0" :checked="form.statue === '0'" color="#1890ff" /> 关闭
              </label>
            </radio-group>
            <text class="hint">商城分销功能开启关闭</text>
          </view>

          <view class="form-item">
            <text class="label">分销模式：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.extract_type = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.extract_type === '1'" color="#1890ff" /> 指定分销
              </label>
              <label class="radio-label">
                <radio value="2" :checked="form.extract_type === '2'" color="#1890ff" /> 人人分销
              </label>
              <label class="radio-label">
                <radio value="3" :checked="form.extract_type === '3'" color="#1890ff" /> 满额分销
              </label>
            </radio-group>
            <text class="hint">人人分销"默认每个人都可以分销，“指定分销”仅后台手动设置推广员，“满额分销”指用户购买商品满足消费金额后自动开启分销</text>
          </view>

          <view class="form-item">
            <text class="label">分销关系绑定：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.bind_type = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.bind_type === '1'" color="#1890ff" /> 所有用户
              </label>
              <label class="radio-label">
                <radio value="2" :checked="form.bind_type === '2'" color="#1890ff" /> 新用户
              </label>
            </radio-group>
            <text class="hint">所有用户”指所有没有上级推广人的用户点击或扫码即绑定分销关系，“新用户”指新注册的用户或首次进入系统的用户才会绑定推广关系</text>
          </view>

          <view class="form-item">
            <text class="label">绑定模式：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.store_brokerage_binding_status = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.store_brokerage_binding_status === '1'" color="#1890ff" /> 永久
              </label>
              <label class="radio-label">
                <radio value="2" :checked="form.store_brokerage_binding_status === '2'" color="#1890ff" /> 有效期
              </label>
              <label class="radio-label">
                <radio value="3" :checked="form.store_brokerage_binding_status === '3'" color="#1890ff" /> 临时
              </label>
            </radio-group>
            <text class="hint">永久”一次绑定永久有效，“有效期”绑定后一段时间内有效，“临时”临时有效</text>
          </view>

          <view class="form-item">
            <text class="label">分销海报图：</text>
            <view class="poster-upload">
              <image class="poster-preview" v-if="form.brokerage_poster_status" :src="form.brokerage_poster_status" mode="aspectFill"></image>
              <view v-else class="upload-btn" @click="onUploadPoster">
                <text class="plus">+</text>
              </view>
            </view>
            <text class="hint">个人中心分销海报图片，建议尺寸600x1000</text>
          </view>
          
          <view class="form-item">
            <text class="label">分销层级：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.brokerage_level = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.brokerage_level === '1'" color="#1890ff" /> 一级分销
              </label>
              <label class="radio-label">
                <radio value="2" :checked="form.brokerage_level === '2'" color="#1890ff" /> 二级分销
              </label>
            </radio-group>
            <text class="hint">分销层级，一级是只返上一层的佣金，二级是返上级 and 上上级的佣金</text>
          </view>

          <view class="form-item">
            <text class="label">事业部开关：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_area_manager = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.is_area_manager === '1'" color="#1890ff" /> 开启
              </label>
              <label class="radio-label">
                <radio value="0" :checked="form.is_area_manager === '0'" color="#1890ff" /> 关闭
              </label>
            </radio-group>
            <text class="hint">事业部开关，关闭后不计算事业部佣金</text>
          </view>

          <view class="form-item">
            <text class="label">代理商申请开关：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_agent_apply = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.is_agent_apply === '1'" color="#1890ff" /> 开启
              </label>
              <label class="radio-label">
                <radio value="0" :checked="form.is_agent_apply === '0'" color="#1890ff" /> 关闭
              </label>
            </radio-group>
            <text class="hint">控制移动端我的推广页面的代理商申请按钮是否显示</text>
          </view>

          <view class="form-item">
            <text class="label">佣金悬浮窗开关：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_commission_window = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.is_commission_window === '1'" color="#1890ff" /> 开启
              </label>
              <label class="radio-label">
                <radio value="0" :checked="form.is_commission_window === '0'" color="#1890ff" /> 关闭
              </label>
            </radio-group>
            <text class="hint">佣金悬浮窗开关，关闭之后，商品详情不显示佣金悬浮窗</text>
          </view>

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

        <!-- 返佣设置 -->
        <view v-if="activeTab === 1" class="form-content">
          <view class="form-item">
            <text class="label">自购返佣：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_self_brokerage = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.is_self_brokerage === '1'" color="#1890ff" /> 开启
              </label>
              <label class="radio-label">
                <radio value="0" :checked="form.is_self_brokerage === '0'" color="#1890ff" /> 关闭
              </label>
            </radio-group>
            <text class="hint">是否开启自购返佣（开启：分销员自己购买商品，享受一级返佣，上级享受二级返佣；关闭：分销员自己购买商品没有返佣）</text>
          </view>

          <view class="form-item">
            <text class="label">购买付费会员返佣：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_member_brokerage = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.is_member_brokerage === '1'" color="#1890ff" /> 开启
              </label>
              <label class="radio-label">
                <radio value="0" :checked="form.is_member_brokerage === '0'" color="#1890ff" /> 关闭
              </label>
            </radio-group>
            <text class="hint">购买付费会员是否按照设置的佣金比例进行返佣</text>
          </view>

          <view class="form-item">
            <text class="label">返佣类型：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.brokerage_type = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.brokerage_type === '1'" color="#1890ff" /> 按照商品价格返佣
              </label>
              <label class="radio-label">
                <radio value="2" :checked="form.brokerage_type === '2'" color="#1890ff" /> 按照实际支付价格返佣
              </label>
            </radio-group>
            <text class="hint">选择返佣类型，按照商品价格返佣（按照商品售价计算返佣金额）以及按照实际支付价格返佣（按照商品的实际支付价格计算返佣）</text>
          </view>

          <view class="form-item">
            <text class="label">推广用户返佣：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_promoter_brokerage = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.is_promoter_brokerage === '1'" color="#1890ff" /> 开启
              </label>
              <label class="radio-label">
                <radio value="0" :checked="form.is_promoter_brokerage === '0'" color="#1890ff" /> 关闭
              </label>
            </radio-group>
            <text class="hint">分销推广用户获取佣金</text>
          </view>

          <view class="form-item">
            <text class="label">推广佣金单价：</text>
            <view class="input-with-unit">
              <input class="form-input" :value="form.promoter_brokerage_price" @input="(e: UniInputEvent) => form.promoter_brokerage_price = e.detail.value" />
            </view>
            <text class="hint">分销推广佣金单价（每推广一个用户）</text>
          </view>

          <view class="form-item">
            <text class="label">每日推广佣金上限：</text>
            <view class="input-with-unit">
              <input class="form-input" :value="form.promoter_brokerage_day_max" @input="(e: UniInputEvent) => form.promoter_brokerage_day_max = e.detail.value" />
            </view>
            <text class="hint">每日推广佣金上限（0:不发佣金;-1:不限制；最好是推广佣金单价的整数倍）</text>
          </view>

          <view class="form-item">
            <text class="label">一级返佣比例：</text>
            <view class="input-with-unit">
              <input class="form-input" :value="form.store_brokerage_ratio" @input="(e: UniInputEvent) => form.store_brokerage_ratio = e.detail.value" />
            </view>
            <text class="hint">订单交易成功后给上级返佣的比例0 - 100,例:5 = 反订单商品金额的5%</text>
          </view>

          <view class="form-item">
            <text class="label">二级返佣比例：</text>
            <view class="input-with-unit">
              <input class="form-input" :value="form.store_brokerage_two_ratio" @input="(e: UniInputEvent) => form.store_brokerage_two_ratio = e.detail.value" />
            </view>
            <text class="hint">订单交易成功后给上上级返佣的比例0 - 100,例:5 = 反订单商品金额 of 5%</text>
          </view>

          <view class="form-item">
            <text class="label">冻结时间：</text>
            <view class="input-with-unit">
              <input class="form-input" :value="form.extract_frozen_time" @input="(e: UniInputEvent) => form.extract_frozen_time = e.detail.value" />
            </view>
            <text class="hint">防止用户退款，佣金被提现了，所以需要设置佣金冻结时间(天)</text>
          </view>

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

        <!-- 提现设置 -->
        <view v-if="activeTab === 2" class="form-content">
          <view class="form-item">
            <text class="label">提现最低金额：</text>
            <input class="form-input" :value="form.user_extract_min_price" @input="(e: UniInputEvent) => form.user_extract_min_price = e.detail.value" />
            <text class="hint">用户提现最低金额限制</text>
          </view>

          <view class="form-item">
            <text class="label">提现银行卡：</text>
            <textarea class="form-textarea" :value="form.extract_bank_list" @input="(e: UniInputEvent) => form.extract_bank_list = e.detail.value" placeholder="配置提现银行卡类型，每个银行换行"></textarea>
            <text class="hint">配置提现银行卡类型，每个银行换行</text>
          </view>

          <view class="form-item">
            <text class="label">提现方式：</text>
            <checkbox-group class="checkbox-group" @change="(e: UniCheckboxGroupChangeEvent) => form.extract_type_list = e.detail.value">
              <label class="checkbox-label"><checkbox value="bank" :checked="form.extract_type_list.includes('bank')" color="#1890ff" /> 银行卡</label>
              <label class="checkbox-label"><checkbox value="wechat" :checked="form.extract_type_list.includes('wechat')" color="#1890ff" /> 微信</label>
              <label class="checkbox-label"><checkbox value="alipay" :checked="form.extract_type_list.includes('alipay')" color="#1890ff" /> 支付宝</label>
            </checkbox-group>
            <text class="hint">开启后用户可以选择该提现方式</text>
          </view>

          <view class="form-item">
            <text class="label">微信提现：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.wechat_extract_type = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.wechat_extract_type === '1'" color="#1890ff" /> 手动线下转账
              </label>
              <label class="radio-label">
                <radio value="2" :checked="form.wechat_extract_type === '2'" color="#1890ff" /> 自动转账到零钱
              </label>
            </radio-group>
            <text class="hint">微信提现方式：手动线下转账，自动转账到零钱(需开通商家转账到零钱)</text>
          </view>

          <view class="form-item">
            <text class="label">支付宝提现：</text>
            <radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.alipay_extract_type = e.detail.value">
              <label class="radio-label">
                <radio value="1" :checked="form.alipay_extract_type === '1'" color="#1890ff" /> 手动线下转账
              </label>
              <label class="radio-label">
                <radio value="2" :checked="form.alipay_extract_type === '2'" color="#1890ff" /> 自动转账到余额
              </label>
            </radio-group>
            <text class="hint">支付宝提现方式：手动线下转账，自动转账到余额(需开通支付宝转账)</text>
          </view>

          <view class="form-item">
            <text class="label">提现手续费：</text>
            <input class="form-input" :value="form.user_extract_fee" @input="(e: UniInputEvent) => form.user_extract_fee = e.detail.value" />
            <text class="hint">提现手续费百分比，范围0-100，0为无提现手续费，例：设置10，即收取10%手续费，提现100元，到账90元，10元手续费</text>
          </view>

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

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

const activeTab = ref(0)
const tabs = ['分销模式', '返佣设置', '提现设置']

const form = ref({
  // 分销模式
  statue: '1',
  extract_type: '2',
  bind_type: '2',
  store_brokerage_binding_status: '1',
  brokerage_poster_status: '',
  brokerage_level: '2',
  is_area_manager: '1',
  is_agent_apply: '1',
  is_commission_window: '1',
  
  // 返佣设置
  is_self_brokerage: '1',
  is_member_brokerage: '0',
  brokerage_type: '1',
  is_promoter_brokerage: '1',
  promoter_brokerage_price: '2',
  promoter_brokerage_day_max: '-1',
  store_brokerage_ratio: '20',
  store_brokerage_two_ratio: '2',
  extract_frozen_time: '1',
  
  // 提现设置
  user_extract_min_price: '1',
  extract_bank_list: '中国银行',
  extract_type_list: ['bank', 'wechat', 'alipay'],
  wechat_extract_type: '1',
  alipay_extract_type: '1',
  user_extract_fee: '0'
})

function onUploadPoster() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      form.value.brokerage_poster_status = res.tempFilePaths[0]
    }
  })
}

function onSubmit() {
  uni.showToast({ title: '保存成功', icon: 'success' })
}
</script>

<style scoped lang="scss">
.admin-page {
  display: flex;
  flex-direction: column;
}

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

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

.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;
    }
  }
}

.form-container {
  padding: 32px 24px;
}

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

.label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.radio-group, .checkbox-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}

.radio-label, .checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.hint {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  line-height: 1.5;
  max-width: 800px;
}

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

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

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

.poster-preview {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  .plus {
    font-size: 24px;
    color: #999;
  }
}

.input-with-unit {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.submit-btn {
  margin-top: 24px;
  width: 80px;
  height: 36px;
  background: #1890ff;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &:active {
    opacity: 0.8;
  }
}
</style>
