<script setup>
import ICON1 from "../../static/icons/payICON.png";
import ICON2 from "../../static/icons/right_blue.png";
import XNav from "../../components/XNav.vue";
import XLink from "../../components/XLink.vue";
import Right from "../../static/icons/right.png";
import {toPage} from "../../utils/uils.js";
</script>

<template>
    <!--钱包-->
    <x-nav></x-nav>

    <view class="!flex flex-col gap-[20rpx] p-[20rpx]">
        <view class="py-[20rpx] pl-[30rpx] pr-[24rpx] rounded-[12rpx] bg-[#fff] w-full !flex gap-[22rpx] items-center"
              @click="toPage('/pages/paymentAccount/index')">
            <image class="!size-[72rpx]" mode="aspectFill" :src="ICON1"></image>
            <view class="text-[#86909C] test-28r">您还没有添加收款信息~</view>
            <x-link class="test-28r !ml-auto">去添加</x-link>
            <image class="!w-[12rpx]" mode="widthFix" :src="ICON2"></image>
        </view>

        <view class="py-[32rpx] px-[24rpx] rounded-[12rpx] bg-[#fff] w-full">
            <view class="!flex items-center justify-between">
                <view>
                    <view class="test-28r">可提现余额(元）</view>
                    <view class="HarmonyOS" style="font-size: 60rpx;font-weight: 500;">0.00</view>
                </view>
                <view
                    class="py-[8rpx] bg-[var(--primary-color)] text-[#fff] rounded-full w-[200rpx] !flex justify-center items-center">
                    立即提现
                </view>
            </view>

            <view class="h-[3rpx] bg-[#E5E6EB] !my-[20rpx]"></view>

            <view class="wxts">
                温馨提示<br/>
                1.提现门槛为1元<br/>
                2.打款时间:工作日11:00-18:00;<br/>
                3.工作日18:00前提现的当日到款<br/>
                4.工作日18:00后提现的次日到账;<br/>
                5.如遇打款失败，可在提现记录中查看原因
            </view>
        </view>

        <view class="w-full !grid grid-cols-3 gap-[20rpx]">
            <view class="py-[24rpx] px-[20rpx] bg-[#fff] rounded-[16rpx]">
                <view class="text-[#4E5969] test-22r">总收益</view>
                <view class="test-36r" style="font-weight: 700;">0.00</view>
            </view>
            <view class="py-[24rpx] px-[20rpx] bg-[#fff] rounded-[16rpx]">
                <view class="text-[#4E5969] test-22r">打款中</view>
                <view class="test-36r" style="font-weight: 700;">0.00</view>
            </view>
            <view class="py-[24rpx] px-[20rpx] bg-[#fff] rounded-[16rpx]">
                <view class="text-[#4E5969] test-22r">已提现</view>
                <view class="test-36r" style="font-weight: 700;">0.00</view>
            </view>
        </view>

        <view class="w-full bg-[#fff] rounded-[16rpx] overflow-hidden">
            <view class="!flex items-center h-[108rpx] px-[32rpx]">
                <view class="title">变动记录</view>
                <view class="!ml-auto whitespace-nowrap value"></view>
                <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
            </view>
            <view class="h-[2rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>

            <view class="!flex items-center h-[108rpx] px-[32rpx]">
                <view class="title">提现记录</view>
                <view class="!ml-auto whitespace-nowrap value"></view>
                <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
            </view>
            <view class="h-[2rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>

            <view class="!flex items-center h-[108rpx] px-[32rpx]">
                <view class="title">收益记录</view>
                <view class="!ml-auto whitespace-nowrap value"></view>
                <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.wxts {
    color: rgb(134, 144, 156);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0;
}
</style>
