<template>
    <view class="withdraw">
        <view class="withdraw__total">
            <text>可提现金额（元）</text>
            <text>
                ￥
                <text class="strong">
                    {{ allowWithDrawMoney }}
                </text>
            </text>
        </view>
        <view class="withdraw__money">
            <view class="title">提现金额</view>
            <view class="line">
                <text class="unit">￥</text>
                <input
                    :value="withdrawMoney"
                    class="input"
                    placeholder-class="placeholder"
                    placeholder-style="placeholder"
                    placeholder="请输入金额"
                    @input="handleWithDrawMoneyInput"
                />
                <text class="all" @click="allWithdraw">全部提现</text>
            </view>
            <div v-if="notValidKey" class="text-error">{{ notValidMap[notValidKey] }}</div>
            <view class="channel" @click="handleShowPicker">
                <text>提现至</text>
                <view class="value">
                    <text class="label">{{ channel.label }}</text>
                    <u-picker
                        mode="selector"
                        v-model="showPicker"
                        :range="channelOptions"
                        range-key="label"
                        :default-selector="[0]"
                        @confirm="handleConfirm"
                    ></u-picker>
                </view>
            </view>
            <view class="btn" @click="handleWithDraw">
                <text>申请提现</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { toast } from '@/utils/util'
import { computed, ref, unref, onMounted } from 'vue'
import { applyForWithdraw } from '@/api/wallet'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'
import { useLockFn } from '@/hooks/useLockFn'
import { getDistributorCenter } from '@/api/distributor_center'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const channelOptions = [{ value: 1, label: '微信' }]
const allowWithDrawMoney = ref('0')
const withdrawMoney = ref()
let channel = ref({
    label: '微信',
    value: 1
})
const showPicker = ref(false)
const handleShowPicker = () => {
    showPicker.value = true
}
const notValidMap = {
    formatError: '金额格式错误',
    balance: '余额不足',
    less: '金额不能小于0.1'
}
const notValidKey = ref('')
/**绑定提现金额 */
const handleWithDrawMoneyInput = (event: any) => {
    const {
        detail: { value }
    } = event
    withdrawMoney.value = value
    validateAmount(value)
}

// 全部提现
const allWithdraw = () => {
    withdrawMoney.value = allowWithDrawMoney.value
    validateAmount(withdrawMoney.value)
}

const validateAmount = (value: string) => {
    if (!value) return true
    const regex = /^(0|[1-9]\d{0,8})(\.\d{1,2})?$/
    if (!regex.test(value)) notValidKey.value = 'formatError'
    else if (withdrawMoney.value > allowWithDrawMoney.value) notValidKey.value = 'balance'
    else if (withdrawMoney.value < 0.1) notValidKey.value = 'less'
    else notValidKey.value = ''
}
/**选择提现方式 */
const handleConfirm = (list: any) => {
    const index = list[0]
    channel.value = {
        label: channelOptions[index].label,
        value: channelOptions[index].value
    }
}
/**申请提现 */
const handleWithDraw = () => {
    if (!withdrawMoney.value) return toast('请输入提现金额')
    if (notValidKey.value) return
    applyForWithdraw({
        distributorId: unref(userInfo).distributorId,
        withdrawMoney: withdrawMoney.value
        // userName: ''
    }).then(res => {
        withdrawMoney.value = ''
        toast('已发起提现申请')
        lockFn()
    })
}

onMounted(() => lockFn())

const { lockFn } = useLockFn(async () => {
    const data = await getDistributorCenter({ distributorId: unref(userInfo).distributorId })
    if (data?.canWithdrawCommission) {
        allowWithDrawMoney.value = Number(data?.canWithdrawCommission).toFixed(2)
    } else {
        allowWithDrawMoney.value = '0.00'
    }
})
</script>
<style lang="scss" scoped>
.withdraw {
    height: 600rpx;
    background-color: #2077fe;

    &__total {
        color: $white;
        padding: 40rpx 30rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        line-height: 1.6;

        .strong {
            font-size: 60rpx;
            font-weight: 600;
        }
    }

    &__money {
        background-color: #fff;
        margin: 30rpx;
        border-radius: 16rpx;
        padding: 30rpx 30rpx 40rpx;

        .unit {
            font-size: 84rpx;
        }

        .line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;
            margin-top: 20rpx;

            .input {
                flex: 1;
                padding: 0 12rpx;
                font-size: 60rpx;
                height: 90rpx;
            }

            :deep(.placeholder) {
                color: #777;
                font-size: 32rpx;
            }

            .all {
                color: #2077fe;
                font-size: 28rpx;
            }
        }

        .channel {
            display: flex;
            justify-content: space-between;
            margin-top: 30rpx;
            color: #919191;

            .value {
                position: relative;

                .label {
                    margin-right: 20rpx;
                }

                &::after {
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 50%;
                    width: 12rpx;
                    height: 12rpx;
                    border-top: 1px solid #919191;
                    border-right: 1px solid #919191;
                    transform: translateY(-50%) rotate(45deg);
                }
            }
        }

        .btn {
            background-color: #2077fe;
            height: 100rpx;
            border-radius: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            margin-top: 80rpx;
            font-size: 36rpx;
        }
    }
}
</style>
