<template>
  <view class="admin-order-config">
    <view class="content-body">
      <!-- 顶部选项卡 -->
      <view class="tabs-card border-shadow">
        <scroll-view class="tabs-scroll" direction="horizontal" :show-scrollbar="false">
          <view class="tabs-list">
            <view 
              v-for="(tab, index) in tabs" 
              :key="index" 
              :class="['tab-item', currentTab == index ? 'tab-active' : '']"
              @click="currentTab = index"
            >
              <text :class="['tab-txt', currentTab == index ? 'tab-txt-active' : '']">{{ tab }}</text>
              <view v-if="currentTab == index" class="tab-line"></view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 配置内容区 -->
      <view class="config-card border-shadow">
        <!-- 1. 包邮设置 -->
        <view v-if="currentTab == 0" class="form-container">
          <view class="form-item">
            <view class="label-box"><text class="label-txt">满额包邮:</text></view>
            <view class="input-box">
              <input class="input-base" type="number" v-model="config.freeShippingPrice" placeholder="请输入满额包邮金额" />
              <text class="hint-txt">商城商品满多少金额即可包邮，此项优先于其他的运费设置</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">线下支付是否包邮:</text></view>
            <view class="input-box">
              <radio-group class="radio-group" @change="e => config.offlineFreeShipping = e.detail.value == '1'">
                <label class="radio-label">
                  <radio value="1" :checked="config.offlineFreeShipping" color="#2d8cf0" style="transform:scale(0.8)" />
                  <text class="radio-txt">包邮</text>
                </label>
                <label class="radio-label">
                  <radio value="0" :checked="!config.offlineFreeShipping" color="#2d8cf0" style="transform:scale(0.8)" />
                  <text class="radio-txt">不包邮</text>
                </label>
              </radio-group>
              <text class="hint-txt">用户选择线下支付时是否包邮</text>
            </view>
          </view>
        </view>

        <!-- 2. 发票功能配置 -->
        <view v-if="currentTab == 1" class="form-container">
          <view class="form-item">
            <view class="label-box"><text class="label-txt">发票功能启用:</text></view>
            <view class="input-box">
              <radio-group class="radio-group" @change="e => config.invoiceEnabled = e.detail.value == '1'">
                <label class="radio-label">
                  <radio value="1" :checked="config.invoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
                  <text class="radio-txt">开启</text>
                </label>
                <label class="radio-label">
                  <radio value="0" :checked="!config.invoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
                  <text class="radio-txt">关闭</text>
                </label>
              </radio-group>
              <text class="hint-txt">发票功能开启|关闭</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">专用发票启用:</text></view>
            <view class="input-box">
              <radio-group class="radio-group" @change="e => config.specialInvoiceEnabled = e.detail.value == '1'">
                <label class="radio-label">
                  <radio value="1" :checked="config.specialInvoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
                  <text class="radio-txt">开启</text>
                </label>
                <label class="radio-label">
                  <radio value="0" :checked="!config.specialInvoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
                  <text class="radio-txt">关闭</text>
                </label>
              </radio-group>
              <text class="hint-txt">专用发票功能开启|关闭</text>
            </view>
          </view>
        </view>

        <!-- 3. 售后退款配置 -->
        <view v-if="currentTab == 2" class="form-container">
          <view class="form-item">
            <view class="label-box"><text class="label-txt">退货收货人姓名:</text></view>
            <view class="input-box">
              <input class="input-base" v-model="config.refundContactName" placeholder="请输入退货收货人姓名" />
              <text class="hint-txt">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员姓名</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">退货收货人电话:</text></view>
            <view class="input-box">
              <input class="input-base" v-model="config.refundContactPhone" placeholder="请输入退货收货人电话" />
              <text class="hint-txt">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员电话</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">退货收货人地址:</text></view>
            <view class="input-box">
              <input class="input-base" v-model="config.refundAddress" placeholder="请输入退货收货人地址" />
              <text class="hint-txt">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员地址信息</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">退货理由:</text></view>
            <view class="input-box">
              <textarea class="textarea-base" v-model="config.refundReasons" placeholder="请输入退货理由"></textarea>
              <text class="hint-txt">配置退货理由，一行一个理由</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">优惠券退还状态:</text></view>
            <view class="input-box">
              <radio-group class="radio-group" @change="e => config.refundCoupon = e.detail.value == '1'">
                <label class="radio-label">
                  <radio value="1" :checked="config.refundCoupon" color="#2d8cf0" style="transform:scale(0.8)" />
                  <text class="radio-txt">退还</text>
                </label>
                <label class="radio-label">
                  <radio value="0" :checked="!config.refundCoupon" color="#2d8cf0" style="transform:scale(0.8)" />
                  <text class="radio-txt">不退还</text>
                </label>
              </radio-group>
              <text class="hint-txt">优惠券是否退回开关，商品成功退款后，退回/不退回使用的优惠券</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">售后期限:</text></view>
            <view class="input-box">
              <input class="input-base" type="number" v-model="config.afterSalesDays" placeholder="0" />
              <text class="hint-txt">订单收货之后，在多少天内可以进行退款，超出天数前端不显示退款按钮，设置0则永远显示</text>
            </view>
          </view>
        </view>

        <!-- 4. 订单取消配置 -->
        <view v-if="currentTab == 3" class="form-container">
          <view class="form-item">
            <view class="label-box"><text class="label-txt">普通未支付订单取消:</text></view>
            <view class="input-box">
              <input class="input-base" type="number" v-model="config.normalOrderCancelHour" />
              <text class="hint-txt">普通商品未支付订单的自动取消时间，单位（小时）</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">活动未支付订单取消:</text></view>
            <view class="input-box">
              <input class="input-base" type="number" v-model="config.activityOrderCancelHour" />
              <text class="hint-txt">活动商品未支付订单的自动取消时间，单位（小时）</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">砍价未支付订单取消:</text></view>
            <view class="input-box">
              <input class="input-base" type="number" v-model="config.bargainOrderCancelHour" />
              <text class="hint-txt">砍价未支付订单自动取消时间，单位（小时），如果为0将使用默认活动取消时间，优先使用单独活动配置</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">秒杀未支付订单取消:</text></view>
            <view class="input-box">
              <input class="input-base" type="number" v-model="config.seckillOrderCancelHour" />
              <text class="hint-txt">秒杀未支付订单自动取消时间，单位（小时），如果为0将使用默认活动取消时间，优先使用单独活动配置</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">拼团未支付订单取消:</text></view>
            <view class="input-box">
              <input class="input-base" type="number" v-model="config.combinationOrderCancelHour" />
              <text class="hint-txt">拼团未支付订单自动取消时间，单位（小时），如果为0将使用默认活动取消时间，优先使用单独活动配置</text>
            </view>
          </view>
        </view>

        <!-- 5. 自动收货配置 -->
        <view v-if="currentTab == 4" class="form-container">
          <view class="form-item">
            <view class="label-box"><text class="label-txt">自动收货时间:</text></view>
            <view class="input-box">
              <input class="input-base" type="number" v-model="config.autoReceiveDays" />
              <text class="hint-txt">商城订单发货之后，用户如果不手动点击收货，则在N天后自动收货，设置0为不自动收货，单位（天）</text>
            </view>
          </view>
        </view>

        <!-- 6. 自动评价配置 -->
        <view v-if="currentTab == 5" class="form-container">
          <view class="form-item">
            <view class="label-box"><text class="label-txt">自动评价时间:</text></view>
            <view class="input-box">
              <input class="input-base" type="number" v-model="config.autoCommentDays" />
              <text class="hint-txt">商城订单在收货之后，用户如果不主动评价订单商品，则在N天后自动评价，设置0为永远不自动评价</text>
            </view>
          </view>
          <view class="form-item">
            <view class="label-box"><text class="label-txt">自动评价文字:</text></view>
            <view class="input-box">
              <input class="input-base" v-model="config.autoCommentText" />
              <text class="hint-txt">自动评价显示的评价文字</text>
            </view>
          </view>
        </view>

        <!-- 7. 到店自提配置 -->
        <view v-if="currentTab == 6" class="form-container">
          <view class="form-item">
            <view class="label-box"><text class="label-txt">开启到店自提:</text></view>
            <view class="input-box">
              <radio-group class="radio-group" @change="e => config.storeSelfPickup = e.detail.value == '1'">
                <label class="radio-label">
                  <radio value="1" :checked="config.storeSelfPickup" color="#2d8cf0" style="transform:scale(0.8)" />
                  <text class="radio-txt">开启</text>
                </label>
                <label class="radio-label">
                  <radio value="0" :checked="!config.storeSelfPickup" color="#2d8cf0" style="transform:scale(0.8)" />
                  <text class="radio-txt">关闭</text>
                </label>
              </radio-group>
              <text class="hint-txt">开启后下单页面支持到店自提，需要在设置->发货设置->提货点设置中添加提货点，关闭则隐藏此功能</text>
            </view>
          </view>
        </view>

        <!-- 8. 警戒库存配置 -->
        <view v-if="currentTab == 7" class="form-container">
          <view class="form-item">
            <view class="label-box"><text class="label-txt">警戒库存:</text></view>
            <view class="input-box">
              <input class="input-base" type="number" v-model="config.stockWarningCount" />
              <text class="hint-txt">商品库存数量低于多少时，提示库存不足</text>
            </view>
          </view>
        </view>

        <!-- 提交按钮 -->
        <view class="btn-footer">
          <view class="btn-submit" @click="handleSave">
            <text class="btn-submit-txt">提交</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, reactive, onMounted } from 'vue'
import { getOrderSettings, saveOrderSettings } from '@/services/orderService.uts'

const tabs = ['包邮设置', '发票功能配置', '售后退款配置', '订单取消配置', '自动收货配置', '自动评价配置', '到店自提配置', '警戒库存配置']
const currentTab = ref(0)

const config = reactive({
  // 1. 包邮设置
  freeShippingPrice: 0,
  offlineFreeShipping: false,
  // 2. 发票功能配置
  invoiceEnabled: false,
  specialInvoiceEnabled: false,
  // 3. 售后退款配置
  refundContactName: '',
  refundContactPhone: '',
  refundAddress: '',
  refundReasons: '',
  refundCoupon: true,
  afterSalesDays: 0,
  // 4. 订单取消配置
  normalOrderCancelHour: 1,
  activityOrderCancelHour: 1,
  bargainOrderCancelHour: 1,
  seckillOrderCancelHour: 1,
  combinationOrderCancelHour: 1,
  // 5. 自动收货配置
  autoReceiveDays: 7,
  // 6. 自动评价配置
  autoCommentDays: 0,
  autoCommentText: '',
  // 7. 到店自提配置
  storeSelfPickup: false,
  // 8. 警戒库存配置
  stockWarningCount: 10
})

const loadSettings = async () => {
  try {
    const data = await getOrderSettings()
    if (data != null) {
      const remoteConfig = data as UTSJSONObject
      // 逐项对齐，避免结构丢失
      Object.keys(config).forEach(key => {
        if (remoteConfig[key] !== undefined) {
          (config as any)[key] = remoteConfig[key]
        }
      })
    }
  } catch (e) {
    uni.showToast({ title: '加载配置失败', icon: 'none' })
  }
}

onMounted(() => {
  loadSettings()
})

const handleSave = async () => {
  uni.showLoading({ title: '保存中...' })
  try {
    const ok = await saveOrderSettings(config as UTSJSONObject)
    uni.hideLoading()
    if (ok) {
      uni.showToast({ title: '保存成功', icon: 'success' })
    } else {
      uni.showToast({ title: '保存失败', icon: 'none' })
    }
  } catch (e) {
    uni.hideLoading()
    uni.showToast({ title: '保存出错', icon: 'none' })
  }
}
</script>

<style scoped lang="scss">
.admin-order-config {
  /* 使用 Layout 的背景和内边距 */
  min-height: 100vh;
}

.border-shadow {
  background-color: #fff;
  border-radius: 4px;
}

.content-body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-section-gap);
}

/* 顶部选项卡 */
.tabs-card {
  background-color: #fff;
}

.tabs-scroll {
  width: 100%;
}

.tabs-list {
  display: flex;
  flex-direction: row;
  padding: 0 20px;
}

.tab-item {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

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

.tab-txt-active {
  color: #2d8cf0;
  font-weight: bold;
}

.tab-line {
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background-color: #2d8cf0;
}

/* 配置内容区 */
.config-card {
  padding: 40px;
}

.form-container {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.form-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.label-box {
  width: 150px;
  text-align: right;
  margin-right: 20px;
  margin-top: 8px;
}

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

.input-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

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

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

.hint-txt {
  font-size: 12px;
  color: #c0c4cc;
  margin-top: 10px;
}

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

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

.radio-txt {
  font-size: 14px;
  color: #333;
  margin-left: 4px;
}

.btn-footer {
  margin-top: 40px;
  padding-left: 170px;
}

.btn-submit {
  background-color: #2d8cf0;
  width: 80px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-submit-txt {
  color: #fff;
  font-size: 14px;
}
</style>


