<template>
    <BasePage>
        <van-cell-group class="b_l_w" style="margin-bottom: 132px;">
            <van-swipe-cell v-for="item in data" :key="item.id">
                <van-cell>
                    <template #title>
                        <div class="bank-card">
                            <img class="bank-icon"
                                :src="item.bankid == '91' ? '/img/AliPay.png' : '/img/transfer-i2.png'" fit="cover"
                                height="30" width="30" />
                            <div style="display: flex; flex-direction: column; margin-left: 6px">
                                <span style=" font-size: 6.667vw; display: flex; align-items: center;">
                                    <span style="font-size: 4.667vw;">{{ item.realname || item.RealName }}
                                        {{ item.bankcellphone || item.CardCode }}</span>
                                </span>
                            </div>
                        </div>
                    </template>
                </van-cell>
                <template #right>
                    <van-button style="height: 100%;" square text="删除" type="danger" class="delete-button"
                        @click="deleted(item)" />
                </template>
            </van-swipe-cell>
        </van-cell-group>
        <!-- <div class="bank-card-desc">
            <span style="color: red">注意：</span>绑定添加银行卡必须保证银行卡号、银行预留手机号要同一个人信息才能添加成功，仅限<span
                style="color: red">“添加成功”</span>状态的银行卡才可用于提现，添加不成功的银行卡无法用于提现！
        </div> -->
        <van-action-sheet v-model:show="showAddAliPayPopup" :title="'新增支付宝账户'" style="min-height: 80vw;">
            <div class="bankcard-edit">
                <van-form @submit="save" label-align="top">
                    <van-cell-group inset>
                        <van-field v-model="tempData.Realname" label="真实姓名" placeholder="请输入支付宝账号绑定真实姓名"
                            :rules="[{ required: true, message: '请填写真实姓名' }]" clearable required />
                        <van-field v-model="tempData.Bankcellphone" label="支付宝账号" placeholder="请输入支付宝账号"
                            :rules="[{ required: true, message: '请填写支付宝账号' }]" clearable required />
                        <div class="w"
                            style="position: fixed;left:0;bottom: 0;padding: 3.333vw;border-top:1px solid #f5f5f5">
                            <van-button block round style="width: 100%" type="primary" native-type="save"
                                :loading="saving">保存</van-button>
                        </div>
                    </van-cell-group>
                </van-form>
            </div>
        </van-action-sheet>
        <van-action-sheet v-model:show="showAddPopup" :title="'新增银行卡'">
            <div class="bankcard-edit">
                <van-form @submit="saveBanks" label-align="top">
                    <van-cell-group inset>
                        <van-field v-model="tempData.RealName" label="姓名" placeholder="请输入真实姓名"
                            :rules="[{ required: true, message: '请填写真实姓名' }]" clearable required />
                        <van-field v-model="tempData.IDCode" label="身份证" placeholder="请输入身份证号"
                            :rules="[{ required: true, message: '请输入身份证号' }]" clearable required
                            :formatter="formatter" />
                        <van-field v-model="tempData.IatDate" label="身份证起始日期" placeholder="请选择身份证起始日期"
                            :rules="[{ required: true, message: '请选择身份证起始日期' }]" clearable required is-link
                            @click="tempData.obj = 'IatDate'; showDate = true;" readonly />

                        <van-field class="maxDate" name="radio" label="身份证截止日期" required>
                            <template #input>
                                <van-radio-group v-model="checked" direction="horizontal">
                                    <van-radio :name="0">短期</van-radio>
                                    <van-radio :name="1">长期</van-radio>
                                </van-radio-group>
                            </template>
                        </van-field>
                        <van-field v-model="tempData.ExpDate" v-if="!checked" label=" " placeholder="请选择身份证截止日期"
                            :rules="[{ required: true, message: '请选择身份证起截止日期' }]" clearable is-link
                            @click="tempData.obj = 'ExpDate'; showDate = true;" readonly />
                        <van-field v-model="tempData.Phone" label="手机号" placeholder="请输入手机号"
                            :rules="[{ required: true, message: '请填写手机号' }]" type="phone" clearable required
                            :formatter="formatter" />
                        <van-field v-model="tempData.CardCode" label="银行卡号" placeholder="请输入银行卡号"
                            :rules="[{ required: true, message: '请填写银行卡号' }]" clearable required
                            :formatter="formatter" />
                        <van-field v-model="tempData.ReceiveRegionName" label="开户地区" placeholder="请选择开户地区"
                            :rules="[{ required: true, message: '请选择开户地区' }]" clearable required is-link
                            @click="showRegion = true;" readonly />
                        <van-cell>
                            <template #title>
                                <van-button style="width: 100%" round type="primary" native-type="saveBanks"
                                    :loading="saving">保存</van-button>
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-form>
            </div>
        </van-action-sheet>
        <van-action-bar>
            <van-action-bar-button type="primary" text="添加支付宝" @click="addAliPay" />
            <!-- <van-action-bar-button type="success" text="添加银行卡" @click="addBanks" /> -->
            <van-action-bar-button type="danger" text="去提现" @click="cashout" />
        </van-action-bar>

        <van-popup v-model:show="showDate" position="bottom">
            <van-date-picker v-model="currentDate" title="选择年月日" :columns-type="['year', 'month', 'day']"
                :min-date="minDate" :max-date="maxDate" @confirm="onconfirm" @cancel="showDate = false" />
        </van-popup>

        <van-popup v-model:show="showRegion" round position="bottom">
            <van-cascader v-model="region" title="请选择地区" :options="options" :field-names="defaultProps"
                @change="onChange" @finish="onFinish" @close="showRegion = false" />
        </van-popup>
    </BasePage>
</template>

<script>

export default {
    name: 'AliPayAccount',
    mounted() {
        this.init();
    },
    data() {
        return {
            data: [

            ],
            showAddAliPayPopup: false,
            showAddPopup: false,
            bankData: [],
            tempData: {},
            saving: false,
            showDate: false,
            currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
            minDate: new Date('1900/01/01'),
            maxDate: new Date('2099/12/31'),
            showRegion: false,
            options: [],
            defaultProps: {
                value: "val",
            },
            checked: 0,
        }
    },
    methods: {
        init() {
            this.$get('/v1/client/DUserbankcardsClient').then(data => {
                this.data = data.data;
            }).catch(err => {
                this.$showFailToast(err.errmsg);
            });
        },
        formatter(value) {
            return value.replace(/\s/g, '');
        },
        onconfirm(value) {
            this.tempData[this.tempData.obj] = this.currentDate.join('-');
            this.showDate = false;
        },
        onChange(e) {
            if (e.selectedOptions[e.tabIndex].leaf) {
                e.selectedOptions[e.tabIndex].children = null;
                this.showRegion = false;
                return;
            }
        },
        onFinish(e) {
            this.showRegion = false;
            this.tempData.CardProvince = e.selectedOptions.map(x => x.val)[0];
            this.tempData.CardCity = e.selectedOptions.map(x => x.val)[1];
            this.tempData.ReceiveRegionName = e.selectedOptions.map(x => x.text).join('');
        },
        addAliPay() {
            this.tempData = new Object();
            this.showAddAliPayPopup = true;
        },
        addBanks() {
            this.tempData = new Object();
            this.showAddPopup = true;
        },
        save() {
            this.saving = true;
            this.$post('/v1/client/DUserbankcardsClient', { ...this.tempData, Bankid: 91 }).then(data => {
                this.$showSuccessToast('添加成功');
                this.tempData = {};
                // this.$refs.BaseList.refresh();
                this.showAddAliPayPopup = false;
                this.init();
            }).catch(err => {
                this.$showFailToast(err.errmsg);
            }).finally(() => {
                this.saving = false;
            });
        },
        saveBanks() {
            if (!this.$validPhone(this.tempData.Phone)) {
                this.$showFailToast('手机号格式错误');
                return;
            }
            if (!this.$validIdCard(this.tempData.IDCode)) {
                this.$showFailToast('身份证格式错误');
                return;
            }

            this.saving = true;
            this.tempData.IatDate = this.tempData.IatDate.replaceAll('-', '');
            if (!this.checked)
                this.tempData.ExpDate = this.tempData.ExpDate.replaceAll('-', '');
            else
                this.tempData.ExpDate = '';

            this.$post('Member/AddHuifuBankCard', this.tempData).then(res => {
                this.$showSuccessToast('添加成功');
                this.tempData = {};
                this.$refs.BaseList.refresh();
                this.showAddPopup = false;
            }).catch(err => {
                this.$showFailToast(err.errmsg);
            }).finally(() => {
                this.saving = false;
            });
        },
        deleted(e) {
            this.$del(`/v1/client/DUserbankcardsClient/${e.id}`).then(data => {
                this.$showSuccessToast('删除成功');
                this.init();
            }).catch(err => {
                this.$showFailToast(err.errmsg);
            });
        },
        cashout() {
            location.href = '#/Cashout';
        },
    }
}
</script>

<style>
.bank-card {
    border-radius: 1.333vw;
    display: flex;
    align-items: center;
    padding: 3.333vw;

    .bank-icon {
        margin-right: 10px;
    }
}

.bank-card-desc {
    position: fixed;
    bottom: 40px;
    padding: 3.333vw 3.333vw;
    font-size: 3.333vw;
    background: #fff;
}
</style>