<template>
  <business-page-layout title="结算记录" :show-back="true">
    <view class="settlement-container">
      <view class="filter-bar">
        <input
          v-model="orderNo"
          class="search-input"
          placeholder="搜索订单号"
          confirm-type="search"
          @confirm="reload"
        />
        <view class="search-btn" @click="reload">搜索</view>
      </view>

      <view class="merge-bar">
        <text class="merge-label">同订单合并</text>
        <switch :checked="mergeByOrder" color="#6acdbb" @change="onMergeChange" />
      </view>

      <view class="list-wrap">
        <view
            v-for="item in list"
            :key="item.id"
            class="premium-card"
        >
          <view class="card-head">
            <view class="order-no">
              <text class="tag">单</text>
              <text class="no-text">{{ rowDisplay(item).orderNo }}</text>
            </view>
            <text class="amount" :class="rowDisplay(item).amountClass">
              {{ rowDisplay(item).typeText }} {{ rowDisplay(item).amountText }}
            </text>
          </view>

          <view class="card-body">
            <view class="info-row" v-if="rowDisplay(item).orderTypeText">
              <text class="label">订单类型</text>
              <text class="value">{{ rowDisplay(item).orderTypeText }}</text>
            </view>
            <view class="info-row">
              <text class="label">费用类型</text>
              <text class="value">{{ rowDisplay(item).feeTypeText }}</text>
            </view>
            <view class="info-row">
              <text class="label">结算时间</text>
              <text class="value">{{ rowDisplay(item).createdAt }}</text>
            </view>
            <view class="info-row" v-if="rowDisplay(item).content">
              <text class="label">费用说明</text>
              <text class="value">{{ rowDisplay(item).content }}</text>
            </view>
          </view>

          <view class="card-actions">
            <text class="action-link" @click.stop="goSettlementDetail(item)">结算明细</text>
            <text
              v-if="Number(item.order_type) === 1"
              class="action-link primary"
              @click.stop="goOrderDetail(item)"
            >订单详情</text>
          </view>
        </view>
      </view>

      <view v-if="!loading && list.length === 0" class="empty-state">
        暂无结算记录
      </view>
    </view>
  </business-page-layout>
</template>

<script>
import BusinessPageLayout from '@/subPackages/sub_business_shared/components/business-page-layout.vue'
import { mapSettlementRow } from '@/subPackages/sub_business_shared/common/display.js'
import businessMixin from '@/subPackages/sub_business_shared/common/businessMixin.js'

export default {
  mixins: [businessMixin],
  components: { BusinessPageLayout },
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      mergeByOrder: true,
      orderNo: '',
    }
  },
  onShow() {
    this.reload()
  },
  onReachBottom() {
    this.load(this.page + 1, true)
  },
  methods: {
    rowDisplay(item) {
      return mapSettlementRow(item)
    },
    onMergeChange(e) {
      this.mergeByOrder = !!e.detail.value
      this.reload()
    },
    reload() {
      this.load(1, false)
    },
    load(page, append) {
      this.loading = true
      const params = {
        page,
        pageSize: 15,
        merge_by_order: this.mergeByOrder ? 1 : 0,
        exclude_zero_amount: 1,
      }
      if (this.orderNo.trim()) {
        params.order_no = this.orderNo.trim()
      }
      this.bizApi.getLedgerLogList(params).then(w => {
        const items = (w.data && w.data.items) || []
        this.list = append ? this.list.concat(items) : items
        this.page = page
      }).finally(() => { this.loading = false })
    },
    goSettlementDetail(item) {
      if (item.merged) {
        uni.navigateTo({
          url: `${this.bizRoot}/withdrawal/settlement/detail?order_id=${item.order_id}&order_type=${item.order_type}`,
        })
        return
      }
      uni.navigateTo({
        url: `${this.bizRoot}/withdrawal/settlement/detail?ledger_log_id=${item.id}`,
      })
    },
    goOrderDetail(item) {
      if (Number(item.order_type) !== 1 || !item.order_id) {
        uni.showToast({ title: '暂不支持查看该订单详情', icon: 'none' })
        return
      }
      uni.navigateTo({
        url: `${this.bizRoot}/order/detail?id=${item.order_id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
$color-bg-base: #F5F7F8;
$color-text-main: #1D2129;
$color-text-body: #4E5969;
$color-text-muted: #86909C;
$theme-primary: #6acdbb;

.settlement-container {
  background-color: $color-bg-base;
  min-height: 100vh;
  padding: 24rpx;
}

.filter-bar {
  display: flex;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.search-input {
  flex: 1;
  background: #fff;
  border-radius: 12rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
}

.search-btn {
  background: $theme-primary;
  color: #fff;
  border-radius: 12rpx;
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.merge-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx 28rpx;
  margin-bottom: 24rpx;
}

.merge-label {
  font-size: 28rpx;
  color: $color-text-main;
}

.list-wrap {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.premium-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  border-bottom: 1rpx dashed #E5E6EB;
  padding-bottom: 24rpx;
}

.order-no {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.tag {
  font-size: 20rpx;
  color: #fff;
  background-color: #C9CDD4;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: 600;
}

.no-text {
  font-size: 26rpx;
  color: $color-text-main;
  font-family: monospace, sans-serif;
}

.amount {
  font-size: 32rpx;
  font-weight: 700;
  font-family: DIN Alternate, monospace, sans-serif;
}

.text-danger { color: #F53F3F !important; }
.text-success { color: #6acdbb !important; }

.card-body {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  line-height: 1.5;
}

.label {
  color: $color-text-muted;
  min-width: 120rpx;
}

.value {
  color: $color-text-body;
  text-align: right;
  flex: 1;
  word-break: break-all;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 32rpx;
  margin-top: 24rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #F2F3F5;
}

.action-link {
  font-size: 26rpx;
  color: $color-text-muted;
}

.action-link.primary {
  color: $theme-primary;
  font-weight: 600;
}

.empty-state {
  text-align: center;
  color: $color-text-muted;
  padding: 120rpx 0;
  font-size: 28rpx;
}
</style>
