<script setup>
import XNav from "../../components/XNav.vue";
import {showToast, toPage} from "../../utils/uils.js";
import ICON1 from "../../static/icons/payICON.png";
import ICON2 from "../../static/icons/right_blue.png";
import ICON3 from "../../static/icons/icon-edit-white.png";
import ICON4 from "../../static/icons/icon-delete-white.png";
import ICON5 from "../../static/icons/icon-radio.png";
import ICON6 from "../../static/icons/icon-radio-s.png";
import XLink from "../../components/XLink.vue";
import XConfirmModal from "../../components/XConfirmModal.vue";

const deletePayment = async () => {
    showToast({
        icon: 'success',
        title: '删除成功'
    });
}
</script>

<template>
    <x-nav></x-nav>

    <view class="p-[20rpx] !flex flex-col gap-[20rpx]">
        <view class="py-[20rpx] pl-[30rpx] pr-[24rpx] rounded-[12rpx] bg-[#fff] w-full !flex gap-[22rpx] items-center"
              @click="toPage('/pages/addPaymentAccount/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="bg-[#3878F6] p-[32rpx] rounded-[12rpx]" v-for="i in 10">
            <view class="!flex items-center">
                <view class="text-[#fff]">支付宝</view>
                <image class="!size-[35rpx] !ml-auto" mode="aspectFill" :src="ICON3"></image>
                <x-confirm-modal title="确定删除银行卡" info="135 7777 9865" @success="deletePayment">
                    <image class="!size-[30rpx] !ml-[20rpx]" mode="aspectFill" :src="ICON4"></image>
                </x-confirm-modal>
            </view>
            <view class="HarmonyOS account">
                135 7777 9865
            </view>
            <view class="radio-info">
                <image v-if="false" class="!size-[30rpx]" mode="aspectFill" :src="ICON5"></image>
                <image v-else class="!size-[30rpx]" mode="aspectFill" :src="ICON6"></image>
                设为默认打款信息
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.radio-info {
    color: rgb(255, 255, 255);
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.account {
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    margin-top: 26rpx;
    margin-bottom: 22rpx;
}
</style>
