<template>
  <view class="page">
    <uv-navbar title="我的钱包" bgColor="#C6171E" leftIconColor="#FFFFFF" :titleStyle="{ color: '#FFFFFF' }" :autoBack="true" :placeholder="true"></uv-navbar>
    <!-- 钱包头部 -->
    <view class="wallet-header">
      <view class="wallet-header_top">
        <view class="wallet-header_refund" @click="handleRefund">
          <uv-icon name="kefu-ermai" color="#C6171E" size="16"></uv-icon>
          <text>退款</text>
        </view>
      </view>

      <view class="wallet-header_balance">
        <text class="balance-label">账户余额(元)</text>
        <view class="balance-amount">
          <text class="balance-symbol">¥</text>
          <text class="balance-number">{{ ((account?.balance || 0) / 100).toFixed(2) }}</text>
        </view>
      </view>

      <view class="wallet-header_detail">
        <view class="detail-item">
          <view class="detail-icon">
            <uv-icon name="integral-fill" color="#E84545" size="18"></uv-icon>
          </view>
          <view class="detail-info">
            <text class="detail-label">充值余额</text>
            <text class="detail-value">¥{{ ((account?.rechargeBalance || 0) / 100).toFixed(2) }}</text>
          </view>
        </view>
        <view class="detail-divider"></view>
        <view class="detail-item">
          <view class="detail-icon">
            <uv-icon name="gift-fill" color="#C6171E" size="18"></uv-icon>
          </view>
          <view class="detail-info">
            <text class="detail-label">赠款余额</text>
            <text class="detail-value">¥{{ ((account?.grantsBalance || 0) / 100).toFixed(2) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 交易记录区域 -->
    <view class="wallet-body">
      <view class="transaction-header">
        <view class="transaction-title">
          <uv-icon name="list" color="#303133" size="18"></uv-icon>
          <text>交易记录</text>
        </view>
      </view>

      <view class="tabs-wrapper">
        <uv-tabs
          :list="tabs"
          :current="tab"
          @click="handleTabClick"
          activeColor="#C6171E"
          lineColor="#C6171E"
          lineHeight="3"
          lineWidth="20"
          :bold="true"
        ></uv-tabs>
      </view>

      <view class="transaction-list">
        <view
          class="transaction-card"
          v-for="(item, index) in dataList"
          :key="index"
          @click="handleClickDetail(item)"
        >
          <view class="transaction-card_header">
            <view class="transaction-type">
              <view class="type-icon" :class="'type-icon-' + item.type">
                <uv-icon
                  :name="getTypeIcon(item.type)"
                  color="#FFFFFF"
                  size="16"
                ></uv-icon>
              </view>
              <text class="type-name">{{ fmtDictName('WalletDetail.type', item.type) }}</text>
            </view>
            <view class="transaction-amount" :class="getAmountClass(item.type)">
              <text>{{ getAmountPrefix(item.type) }}{{ (item.amount / 100).toFixed(2) }}</text>
            </view>
          </view>

          <view class="transaction-card_body">
            <view class="transaction-info">
              <view class="info-item">
                <text class="info-label">订单号</text>
                <text class="info-value">{{ item.orderNo }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">时间</text>
                <text class="info-value">{{ fmtDateTime(item.transactionTime) }}</text>
              </view>
            </view>

            <view class="transaction-status">
              <view
                class="status-tag"
                :class="'status-' + (item.status == 0 ? 'primary' : (item.status == 1 ? 'success' : 'error'))"
              >
                {{ fmtDictName('WalletDetail.status', item.status) }}
              </view>
              <uv-icon
                name="arrow-right"
                v-if="item.type === 3"
                color="#C0C4CC"
                size="16"
              ></uv-icon>
            </view>
          </view>
        </view>
      </view>

      <uv-empty
        mode="order"
        v-if="!dataList || dataList.length === 0"
        text="暂无交易记录"
        :marginTop="100"
      ></uv-empty>
    </view>

    <view class="wallet-bottom">
      <uv-button
        shape="circle"
        type="primary"
        color="#C6171E"
        @click="to('/pages-user/wallet/recharge')"
      >充值</uv-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onPullDownRefresh, onShow, onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { get } from "@/utils/https";
import { checkLogin } from "@/utils/auth";
import { fmtDictName, fmtDateTime } from "@/utils/common";

const account = ref({
  balance: 0,
  rechargeBalance: 0,
  grantsBalance: 0,
});

const dataList = ref<any[]>([]);
const tab = ref(0);
const tabs = ref([
  { name: "全部", value: 0 },
  { name: "充值", value: 1 },
  { name: "退款", value: 2 },
  { name: "消费", value: 3 },
]);

const handleRefund = () => {
  uni.showToast({
    icon: "none",
    title: "请联系在线客服申请退款",
  });
};

const getTypeIcon = (type: number) => {
  const iconMap: Record<number, string> = {
    1: 'integral-fill',
    2: 'red-packet',
    3: 'shopping-cart-fill',
  };
  return iconMap[type] || 'list';
};

const getAmountClass = (type: number) => {
  return type === 3 ? 'amount-expense' : 'amount-income';
};

const getAmountPrefix = (type: number) => {
  return type === 3 ? '-¥' : '+¥';
};

onLoad((options: any) => {
  if (options.tab) {
    tab.value = Number(options.tab);
  }
});

onShow(() => {
  checkLogin().then(() => {
    loadData();
  });
});

onPullDownRefresh(() => {
  loadData();
});

const to = (url: string) => {
  uni.navigateTo({ url });
};

const handleTabClick = (e: any) => {
  tab.value = e.index;
  loadData();
};

const loadData = () => {
  Promise.all([
    get("/account/balance"),
    get("/account/walletDetailList", { type: tab.value })
  ])
    .then(([res, list]: [any, any]) => {
      account.value = res;
      dataList.value = list || [];
    })
    .catch(() => {
      uni.showToast({ title: '加载失败', icon: 'none' });
    })
    .finally(() => {
      uni.stopPullDownRefresh();
    });
};

const handleClickDetail = (walletDetail: any) => {
  if (walletDetail.type !== 3) return;
  uni.navigateTo({
    url: `/pages-order/detail/index?id=${walletDetail.id}&type=${walletDetail.type}&orderNo=${walletDetail.orderNo}`,
  });
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  width: 100vw;
  background: $uni-bg-color-page;
  display: flex;
  flex-direction: column;
  padding-bottom: 140rpx;
}

// 钱包头部
.wallet-header {
  background: $uni-bg-color-card;
  margin: 20rpx;
  border-radius: 24rpx;
  padding: 32rpx 28rpx;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50rpx;
    right: -50rpx;
    width: 200rpx;
    height: 200rpx;
    background: rgba($uni-color-primary, 0.03);
    border-radius: 50%;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -80rpx;
    left: -80rpx;
    width: 260rpx;
    height: 260rpx;
    background: rgba($uni-color-primary, 0.02);
    border-radius: 50%;
  }

  &_top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 32rpx;
    position: relative;
    z-index: 1;
  }

  &_title {
    display: flex;
    align-items: center;
    gap: 12rpx;

    .wallet-title-text {
      color: $uni-text-color-inverse;
      font-size: 32rpx;
      font-weight: $uni-font-weight-semibold;
      letter-spacing: 1rpx;
    }
  }

  &_refund {
    display: flex;
    align-items: center;
    gap: 6rpx;
    background-color: rgba($uni-color-primary, 0.08);
    color: $uni-color-primary;
    padding: 10rpx 24rpx;
    border-radius: 32rpx;
    font-size: 26rpx;
    font-weight: $uni-font-weight-medium;

    &:active {
      transform: scale(0.95);
      opacity: 0.9;
    }
  }

  &_balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28rpx;
    position: relative;
    z-index: 1;

    .balance-label {
      color: $uni-text-color-hint;
      font-size: 26rpx;
      margin-bottom: 12rpx;
      letter-spacing: 1rpx;
    }

    .balance-amount {
      display: flex;
      align-items: baseline;

      .balance-symbol {
        color: $uni-text-color-dark;
        font-size: 36rpx;
        font-weight: $uni-font-weight-semibold;
        margin-right: 8rpx;
      }

      .balance-number {
        color: $uni-text-color-dark;
        font-size: 72rpx;
        font-weight: $uni-font-weight-bold;
        line-height: 1;
        letter-spacing: 2rpx;
      }
    }
  }

  &_detail {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba($uni-color-primary, 0.06);
    border-radius: 16rpx;
    padding: 24rpx 20rpx;
    position: relative;
    z-index: 1;

    .detail-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12rpx;

      .detail-icon {
        width: 44rpx;
        height: 44rpx;
        background: rgba($uni-color-primary, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .detail-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6rpx;

        .detail-label {
          color: $uni-text-color-hint;
          font-size: 24rpx;
        }

        .detail-value {
          color: $uni-text-color;
          font-size: 28rpx;
          font-weight: $uni-font-weight-semibold;
        }
      }
    }

    .detail-divider {
      width: 2rpx;
      height: 60rpx;
      background: $uni-border-color-light;
      margin: 0 20rpx;
    }
  }
}

// 交易记录区域
.wallet-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20rpx;

  .transaction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .transaction-title {
      display: flex;
      align-items: center;
      gap: 12rpx;
      font-size: 32rpx;
      font-weight: $uni-font-weight-semibold;
      color: $uni-text-color;
    }
  }

  .tabs-wrapper {
    background: $uni-bg-color-card;
    border-radius: 16rpx;
    padding: 10rpx 0;
    margin-bottom: 20rpx;
  }

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

  .transaction-card {
    padding: 28rpx 24rpx;
    @include card-interactive(16rpx);

    &_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      padding-bottom: 16rpx;
      border-bottom: 1px solid $uni-border-color-light;

      .transaction-type {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .type-icon {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          &-1 {
            background: $uni-color-success;
          }

          &-2 {
            background: $uni-color-warning;
          }

          &-3 {
            background: $uni-color-primary;
          }
        }

        .type-name {
          font-size: 30rpx;
          font-weight: $uni-font-weight-semibold;
          color: $uni-text-color;
        }
      }

      .transaction-amount {
        font-size: 40rpx;
        font-weight: $uni-font-weight-bold;

        &.amount-income {
          color: $uni-color-success;
        }

        &.amount-expense {
          color: $uni-color-primary;
        }
      }
    }

    &_body {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .transaction-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12rpx;

        .info-item {
          display: flex;
          align-items: center;
          gap: 16rpx;

          .info-label {
            font-size: 26rpx;
            color: $uni-text-color-tertiary;
            width: 80rpx;
          }

          .info-value {
            font-size: 26rpx;
            color: $uni-text-color-secondary;
            flex: 1;
            word-break: break-all;
          }
        }
      }

      .transaction-status {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rpx;

        .status-tag {
          font-size: 24rpx;
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          font-weight: $uni-font-weight-medium;

          &.status-primary {
            background: rgba($uni-color-primary, 0.08);
            color: $uni-color-primary;
          }

          &.status-success {
            background: rgba($uni-color-success, 0.08);
            color: $uni-color-success;
          }

          &.status-error {
            background: rgba($uni-color-error, 0.08);
            color: $uni-color-error;
          }
        }
      }
    }
  }
}

// 底部充值按钮
.wallet-bottom {
  width: calc(100vw - 40rpx);
  position: fixed;
  bottom: 30rpx;
  bottom: calc(30rpx + constant(safe-area-inset-bottom));
  bottom: calc(30rpx + env(safe-area-inset-bottom));
  left: 20rpx;
  z-index: 100;

  :deep(.uv-button) {
    font-size: 32rpx;
    font-weight: $uni-font-weight-semibold;
    height: 88rpx;
  }
}
</style>
