<template>
  <view class="min-h-100vh bg-gray">
    <up-navbar
      bg-color="transparent"
      title="提现"
      @leftClick="back"
      :fixed="true"
    ></up-navbar>
    <view class="top">
      <image class="top_bg" src="/distribution/static/top_bg.png"></image>
      <view class="top_content">
        <view class="color-333 font-16"> 提现金额 </view>
        <view class="u-m-t-32 u-flex input-number-box">
          <text class="fuhao">¥</text>
          <input
            v-model="money"
            type="digit"
            class="input-number"
            placeholder="最小提现金额为30"
          />
          <text class="all-in" @click="allin">全部提现</text>
        </view>
        <view class="color-666 font-12 u-m-t-16">
          <text>可提现金额：￥{{ state.cashOutAmount || 0 }}</text>
          <text class="u-m-l-20">手续费为8%</text>
        </view>

        <view class="btn-group">
          <view class="btn shiming" @click="toShiming">实名认证</view>
          <view class="btn tixian u-m-t-32" @click="tixian">立即提现</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="u-flex">
        <view class="title">提现记录</view>
      </view>
      <view class="list">
        <view v-for="(item, index) in list" :key="index" class="shop-item">
          <view class="u-flex-1">
            <view class="u-flex justify-between">
              <view>
                <view class="name">提现</view>
                <view class="shouxufei u-m-t-16"
                  >手续费{{ item.serviceFee }}元</view
                >
                <view class="font-12 color-999 u-m-t-10">
                  时间：{{ item.createTime }}
                </view>
              </view>
              <view class="u-flex u-flex-col justify-center">
                <template v-if="item.status == 'pending'">
                  <view class="lingqu" @click="lingqu(item)">点击领取</view>
                  <view class="price reduce"
                    >-{{
                      BigNumber(item.serviceFee).plus(item.amount).toFixed(2)
                    }}</view
                  >
                </template>
                <template v-if="item.status == 'finish'">
                  <view class="status">提现成功</view>
                  <view class="price reduce"
                    >-{{
                      BigNumber(item.serviceFee).plus(item.amount).toFixed(2)
                    }}</view
                  >
                </template>
                <template v-if="item.status == 'fail'">
                  <view class="status fail">提现失败</view>
                  <view class="price"
                    >+{{
                      BigNumber(item.serviceFee).plus(item.amount).toFixed(2)
                    }}</view
                  >
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="" style="padding-bottom: 60rpx;">
      <up-loadmore
      :status="isEnd?'no-more':'loadmore'"
    ></up-loadmore>
    </view>
 
  </view>
</template>
  
<script setup>
import * as distributionApi from "@/common/api/market/distribution.js";
import { productStore } from "@/stores/user.js";
const storeuser = productStore();
import { ref, onMounted, reactive } from "vue";
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
import BigNumber from "bignumber.js";
function back() {
  uni.navigateBack({
    delta: 1,
  });
}
async function lingqu(item) {
  const res = await distributionApi.withdrawDetail({ id: item.id });
  if (res) {
    uni.requestMerchantTransfer({
      ...res,
      success: (res) => {
        uni.showToast({
          title: "领取成功",
          icon: "none",
        });
        refesh();
      },
      fail: (res) => {
        uni.showToast({
          title: "领取失败",
          icon: "none",
        });
        refesh();
      },
    });
  }
}
function toShiming() {
  uni.navigateTo({
    url: "/distribution/shiming/index",
  });
}
const userinfo = ref(uni.cache.get("userinfo") || {});
const query = reactive({
  page: 1,
  size: 10,
});
const list = ref([]);
const isEnd = ref(false);
async function withdrawFlow() {
  const res = await distributionApi.withdrawFlow(query);
  if (res) {
    if (query.page == 1) {
      list.value = res.records;
    } else {
      list.value.push(...res.records);
    }
    isEnd.value = query.page >= res.totalPage * 1;
  }
}

const state = reactive({
  cashOutAmount: 0,
  pendingIncome: 0,
  totalIncome: 0,
});
async function centerUser() {
  const res = await distributionApi.centerUser();
  if (res) {
    Object.assign(state, res);
  }
}

const money = ref(0);

function allin() {
  money.value = state.cashOutAmount;
}
async function tixian() {
  if (!userinfo.value.idCard) {
    uni.showToast({
      title: "请先实名认证",
      icon: "none",
    });
    setTimeout(() => {
      toShiming();
    }, 1500);
    return;
  }
  if (money.value <= 0) {
    uni.showToast({
      title: "请输入提现金额",
      icon: "none",
    });
    return;
  }
  if (money.value > state.cashOutAmount) {
    uni.showToast({
      title: "提现金额不能大于可提现金额",
      icon: "none",
    });
    return;
  }
  const res = await distributionApi.withdraw({
    amount: money.value,
  });
  if (res) {
    uni.showToast({
      title: "提现成功",
      icon: "none",
    });
  }

  refesh();
}
function refesh() {
  setTimeout(() => {
    query.page = 1;
    init();
  }, 3000);
}
async function init() {
  await centerUser();
  await withdrawFlow();
}
onReachBottom(async () => {
  console.log('onReachBottom', isEnd.value);
  if (!isEnd.value) {
    query.page++;
    await withdrawFlow();
  }
});
onLoad(() => {
  init();
});

onShow(() => {
  storeuser.actionsAPIuser().then((res) => {
    userinfo.value = res;
  });
});
</script>
  
  <style scoped lang="scss">
.input-number-box {
  width: 428rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #999;
  font-size: 28rpx;
  align-items: baseline;
  .fuhao {
    font-size: 64rpx;
    color: #333;
  }
  .input-number {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    color: #333;
    padding-left: 24rpx;
    padding-right: 10rpx;
  }
  .all-in {
    font-size: 28rpx;
    color: #fe7e00;
  }
}
.list {
  .shop-item {
    padding: 32rpx 28rpx;
    border-bottom: 2rpx solid #ededed;
    font-size: 28rpx;
    color: #666;
    display: flex;
    align-items: center;
    &:last-child {
      border-bottom: none;
    }
    .fufei {
      color: #e8ad7b;
    }
    .tag {
      font-size: 24rpx;
      color: #ff1c1c;
      background-color: #ffe4e4;
      padding: 8rpx 20rpx;
      border-radius: 8rpx;
    }
    .name {
      color: #333;
      font-weight: 700;
    }
    .shouxufei {
    }
    .shouyi {
      font-size: 24rpx;
      color: #666;
      text-align: center;
    }
  }
}
.status {
  font-size: 28rpx;
  font-weight: 700;
  text-align: right;
  color: #333333;
  &.fail {
    color: #ff1c1c;
  }
}
.lingqu {
  font-size: 28rpx;
  border-radius: 8rpx;
  background: #fe6d11;
  padding: 8rpx 16rpx;
  color: #ffffff;
}
.price {
  font-weight: 700;
  font-size: 48rpx;
  margin-top: 16rpx;
  color: #fe7e00;
  text-align: right;
  &.reduce {
    color: #666;
  }
}
.top {
  position: relative;
  .top_content {
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 28rpx;
    right: 28rpx;
    bottom: 52rpx;
    padding: 28rpx 28rpx 52rpx 28rpx;
    border-radius: 16rpx;

    flex-shrink: 0;
    fill: #ffffff3b;
    stroke-width: 2rpx;
    stroke: #fff;
    filter: drop-shadow(2rpx -4rpx 13.4rpx #ff6f0124);
    backdrop-filter: blur(5.1rpx);
    .btn-group {
      position: absolute;
      right: 28rpx;
      top: 50%;
      transform: translateY(-50%);
      .btn {
        padding: 8rpx 16rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        border: 2rpx solid #fe6d11;
        &.shiming {
          color: #fe6d11;
        }
        &.tixian {
          color: #fff;
          background-color: #fe6d11;
        }
      }
    }
  }
}
.top_bg {
  width: 100%;
  height: 580rpx;
}
.bottom {
  margin: 0 28rpx;
  border-radius: 16rpx 16rpx 0 0;
  background-color: #fff;
  transform: translateY(-20rpx);
}
.title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  padding: 28rpx;
}
.small-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #333;
}
</style>