<template>
  <clinic-page-layout title="资金变动" :show-back="true">
    <view class="page-container">
      <view class="filter-bar">
        <picker :range="sourceTypeLabels" @change="onSourceTypeChange">
          <view class="picker-value">{{ currentSourceLabel }}</view>
        </picker>
        <input
          v-model="orderNo"
          class="search-input"
          placeholder="订单号"
          confirm-type="search"
          @confirm="reload"
        />
        <view class="search-btn" @click="reload">搜索</view>
      </view>

      <view class="list-wrap">
        <view v-for="item in list" :key="item.id" class="record-card">
          <view class="row head">
            <text class="source">{{ item.source_type_txt || '-' }}</text>
            <text class="change" :class="Number(item.change_amount) >= 0 ? 'inc' : 'dec'">
              {{ item.change_amount }}
            </text>
          </view>
          <view class="row"><text class="label">变更字段</text><text class="value">{{ item.field_name_txt || item.field_name }}</text></view>
          <view class="row"><text class="label">变动前</text><text class="value">{{ item.before_amount }}</text></view>
          <view class="row"><text class="label">变动后</text><text class="value">{{ item.after_amount }}</text></view>
          <view class="row" v-if="item.order_no"><text class="label">订单号</text><text class="value">{{ item.order_no }}</text></view>
          <view class="row"><text class="label">时间</text><text class="value">{{ item.created_at }}</text></view>
          <view class="row" v-if="item.remark"><text class="label">备注</text><text class="value">{{ item.remark }}</text></view>
          <view
            v-if="Number(item.order_type) === 1 && item.order_id"
            class="order-link"
            @click="goOrderDetail(item)"
          >查看订单详情</view>
        </view>
      </view>

      <view v-if="!loading && list.length === 0" class="empty-state">暂无资金变动记录</view>
    </view>
  </clinic-page-layout>
</template>

<script>
import ClinicPageLayout from '@/subPackages/sub_clinic_admin/components/clinic-page-layout.vue'
import { getAccountChangeLogList } from '@/api/clinicAdmin.js'

export default {
  components: { ClinicPageLayout },
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      orderNo: '',
      sourceType: '',
      sourceTypeOptions: [
        { label: '全部来源', value: '' },
        { label: '分账', value: 'settle' },
        { label: '提现', value: 'withdraw' },
        { label: '退款', value: 'refund' },
      ],
    }
  },
  computed: {
    sourceTypeLabels() {
      return this.sourceTypeOptions.map(o => o.label)
    },
    currentSourceLabel() {
      const hit = this.sourceTypeOptions.find(o => o.value === this.sourceType)
      return hit ? hit.label : '全部来源'
    },
  },
  onShow() {
    this.reload()
  },
  onReachBottom() {
    this.load(this.page + 1, true)
  },
  methods: {
    onSourceTypeChange(e) {
      const idx = Number(e.detail.value || 0)
      this.sourceType = this.sourceTypeOptions[idx].value
      this.reload()
    },
    reload() {
      this.load(1, false)
    },
    load(page, append) {
      this.loading = true
      const params = { page, pageSize: 15 }
      if (this.sourceType) params.source_type = this.sourceType
      if (this.orderNo.trim()) params.order_no = this.orderNo.trim()
      getAccountChangeLogList(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 })
    },
    goOrderDetail(item) {
      uni.navigateTo({
        url: '/subPackages/sub_clinic_admin/order/detail?id=' + item.order_id,
      })
    },
  },
}
</script>

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

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

.filter-bar {
  display: flex;
  gap: 12rpx;
  margin-bottom: 24rpx;
  align-items: center;
}

.picker-value,
.search-input {
  background: #fff;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 26rpx;
}

.picker-value {
  min-width: 160rpx;
}

.search-input {
  flex: 1;
}

.search-btn {
  background: $theme-primary;
  color: #fff;
  border-radius: 12rpx;
  padding: 16rpx 24rpx;
  font-size: 26rpx;
}

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

.record-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
}

.row {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  padding: 8rpx 0;
}

.row.head {
  border-bottom: 1rpx dashed #E5E6EB;
  margin-bottom: 12rpx;
  padding-bottom: 16rpx;
}

.source {
  font-weight: 600;
  color: $color-text-main;
}

.change {
  font-weight: 700;
  font-family: DIN Alternate, monospace, sans-serif;
}

.inc { color: $theme-primary; }
.dec { color: #F53F3F; }

.label {
  color: $color-text-muted;
}

.value {
  color: $color-text-main;
  text-align: right;
  flex: 1;
  margin-left: 16rpx;
  word-break: break-all;
}

.order-link {
  margin-top: 16rpx;
  text-align: right;
  color: $theme-primary;
  font-size: 26rpx;
}

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