<script setup>
import ZFBICON from "../../../../../assets/images/zfb.png";
import YHKICON from "../../../../../assets/images/yhk.png";
import {onMounted, reactive, ref} from "vue";
import AddWithdrawalInformationModal from "../../../components/AddWithdrawalInformationModal.vue";
import LookWithdrawalInformationModal from "../../../components/LookWithdrawalInformationModal.vue";
import Api from "../../../../../api/index.js";
import {Message, Modal} from "@arco-design/web-vue";

const {businessInfo} = defineProps({
    businessInfo: {
        type: Object,
        default: {}
    }
});
const emits = defineEmits(['success']);
const money = ref(null);
const radioValue = ref(null);
const withdrawalList = reactive([]);
const getData = async () => {
    const {data} = await Api.merchant.getWithdrawalList();
    withdrawalList.length = 0;
    withdrawalList.push(...data);
}

const deleteAccount = (v) => {
    console.log(v)
    Modal.warning({
        title: '确定删除吗?',
        content: `账号: ${v.account}`,
        hideCancel: false,
        onOk: async () => {
            const {msg} = await Api.merchant.delWithdrawal(v.id);
            Message.success(msg);
            await getData();
        }
    });
}

onMounted(() => {
    getData();
});
</script>

<template>
    <!-- 我的提现 -->
    <div class="info-card mb-[40px]">
        <div>1.打款时间：工作日11:00-19:00。双休日和法定节假日期间，需要等正常上班之后处理。</div>
        <div>2.提现门槛：余额满1元即可提现</div>
        <div>3.提现账户：最多可设置6个提现账户，超出请删除再进行添加</div>
        <div>4.提示：如果填写的提现账户信息不正确，提现将无法成功</div>
    </div>

    <a-form
        class="ml-[100px]"
        :auto-label-width="true">
        <a-form-item label="提现账户">
            <a-radio-group v-model:model-value="radioValue">
                <div class="grid grid-cols-2 gap-[18px]">
                    <a-radio :value="index" v-for="(v, index) in withdrawalList">
                        <div class="flex items-center">
                            <div class="input-card flex w-[306px] items-center">
                                <img class="w-[15px] h-[15px] object-cover" :src="v.type === 1 ? ZFBICON : YHKICON"
                                     alt=""/>
                                <div class="ml-[14px]">{{ v.type_text }}</div>
                                <div class="ml-[12px] mr-auto">{{ v.account }}</div>

                                <AddWithdrawalInformationModal :id="v.id" @success="getData">
                                    <icon-edit class="cursor-pointer"/>
                                </AddWithdrawalInformationModal>
                            </div>
                            <icon-delete @click="deleteAccount(v)" class="ml-[8px]"/>
                        </div>
                    </a-radio>
                    <AddWithdrawalInformationModal @success="getData">
                        <div
                            class="input-card flex w-[306px] items-center ml-[28px] cursor-pointer hover:!bg-[var(--color-neutral-2)] duration-500 gap-[10px] justify-center">
                            <icon-plus/>
                            添加提现信息
                        </div>
                    </AddWithdrawalInformationModal>
                </div>
            </a-radio-group>
        </a-form-item>

        <a-form-item label="提现金额">
            <div class="max-w-[768px] flex gap-[20px] items-center">
                <a-input-number v-model:model-value="money" :precision="2"
                                :placeholder="`最多可提现${businessInfo.money}元`"></a-input-number>
                <a-link :hoverable="false" class="whitespace-nowrap" @click="money=businessInfo.money">全部提现</a-link>
            </div>
        </a-form-item>

        <a-form-item class="mt-[40px]">
            <!--            <a-button type="primary" @click="openWithdrawalStatus">立即提现</a-button>-->
            <LookWithdrawalInformationModal :id="withdrawalList[radioValue]?.id" :money="money"
                                            @success="emits('success')">
                <a-button type="primary" :disabled="!withdrawalList[radioValue]?.id || !money">立即提现</a-button>
            </LookWithdrawalInformationModal>
        </a-form-item>
    </a-form>
</template>

<style lang="scss" scoped>
.input-card {
    box-sizing: border-box;
    border: 1px solid rgb(229, 230, 235);
    border-radius: 2px;
    background: rgb(247, 248, 250);
    padding: 12px;
}

.info-card {
    background: rgb(247, 248, 250);
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    div {
        color: rgb(134, 144, 156);
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left;
    }
}
</style>
