<template>
    <div class="cashout">
        <div class="mingxilist">
            <div class="tabs">
                <div class="beforetab">{{ lan.$t("xinzengzhanghu") }}</div>
            </div>
            <div class="line"></div>
            <div class="choose">
                <div class="label">
                    <span style="color: red">*</span
                    >{{ lan.$t("xuanzezhanghu") }}
                </div>
                <!-- <a-radio></a-radio> -->
                <div v-if="lan.$s() == 'zh'">
                    <a-radio-group
                        name="radioGroup"
                        class="accountlist"
                        @change="onChange"
                        v-model:value="accountinfo.type"
                    >
                        <a-radio :value="4">
                            <img
                                src="@/static/images/bank.png"
                                alt=""
                                class="icon icon1"
                            />
                            <span>{{ lan.$t("yinhangka") }}</span>
                        </a-radio>
                        <a-radio :value="2">
                            <img
                                src="@/static/images/walletzfb.png"
                                alt=""
                                class="icon"
                            />
                            <span>{{ lan.$t("zhifubao") }}</span>
                        </a-radio>
                        <a-radio :value="1">
                            <img
                                src="@/static/images/walletweixin.png"
                                alt=""
                                class="icon"
                            />
                            <span>{{ lan.$t("weixin") }}</span>
                        </a-radio>
                    </a-radio-group>
                </div>
                <div v-else>
                    <a-radio-group
                        name="radioGroup"
                        v-model="paytypeforign"
                        class="accountlist"
                        @change="onChange1"
                        :default-value="4"
                    >
                        <a-radio :value="4">
                            <img
                                src="@/static/images/foreignbank.png"
                                alt=""
                                class="icon icon1"
                            />
                            <span>{{ lan.$t("yinhangka") }}</span>
                        </a-radio>
                        <a-radio :value="3">
                            <img
                                src="@/static/images/paypi.png"
                                alt=""
                                class="icon"
                            />
                            <span>payple</span>
                        </a-radio>
                    </a-radio-group>
                </div>
            </div>
            <div
                class="cashoutmoney"
                v-if="accountinfo.type == 4 && lan.$s() == 'zh'"
            >
                <a-form>
                    <div>
                        <div class="infoitem">
                            <span class="label label1"
                                ><span style="color: red">*</span
                                >{{ lan.$t("xingming") }}</span
                            >
                            <a-input
                                v-model:value="accountinfo.mname"
                                class="shuru"
                                :placeholder="lan.$t('shuruxingming')"
                            />
                        </div>
                        <div class="infoitem">
                            <span class="label label1"
                                ><span style="color: red">*</span
                                >{{ lan.$t("kahao") }}</span
                            >
                            <a-input
                                v-model:value="accountinfo.bankcode"
                                class="shuru"
                                :placeholder="lan.$t('shurukahao')"
                            />
                        </div>
                        <div class="infoitem">
                            <span class="label label1"
                                ><span style="color: red">*</span
                                >{{ lan.$t("kaihuhang") }}</span
                            >
                            <a-input
                                v-model:value="accountinfo.bankname"
                                class="shuru shuru2"
                                :placeholder="lan.$t('shurukaihuhang')"
                            />
                        </div>
                    </div>
                </a-form>
            </div>
            <div
                class="cashoutmoney"
                v-if="accountinfo.type == 2 && lan.$s() == 'zh'"
            >
                <div>
                    <div class="infoitem">
                        <span class="label label1"
                            ><span style="color: red">*</span
                            >{{ lan.$t("zhanghao") }}</span
                        >
                        <a-input
                            v-model:value="accountinfo.account"
                            class="shuru"
                            :placeholder="lan.$t('shuruzhifubao')"
                        />
                    </div>
                </div>
            </div>
            <div
                class="cashoutmoney"
                v-if="accountinfo.type == 1 && lan.$s() == 'zh'"
            >
                <div class="label label1">
                    <span style="color: red">*</span
                    >{{ lan.$t("saomabangding") }}
                </div>
                <div class="ewmbox">
                    <img
                        src="@/static/images/erweima.png"
                        alt=""
                        class="ewmpic"
                    />
                    <div class="desc">{{ lan.$t("zhu") }}：</div>
                    <div class="desc desc1">
                        {{ lan.$t("weixinbangding") }}
                    </div>
                </div>
            </div>

            <div
                class="cashoutmoney"
                v-if="paytypeforign == 4 && lan.$s() == 'en'"
            >
                <div>
                    <div class="infoitem">
                        <span class="label label1"
                            ><span style="color: red">*</span
                            >{{ lan.$t("zhanghuming") }}</span
                        >
                        <a-input
                            v-model:value="accountinfo.mname"
                            class="shuru shuru2"
                            :placeholder="lan.$t('shuruxingming')"
                        />
                    </div>
                    <div class="infoitem">
                        <span class="label label1"
                            ><span style="color: red">*</span
                            >{{ lan.$t("yinhangzhanghu") }}</span
                        >
                        <a-input
                            v-model:value="accountinfo.bankcode"
                            class="shuru shuru2"
                            :placeholder="lan.$t('shurukahao')"
                        />
                    </div>
                    <div class="infoitem">
                        <span class="label label1">
                            <span style="color: red">*</span>{{ lan.$t('yinhangbic') }}
                        </span>
                        <a-input
                            v-model:value="accountinfo.bankname"
                            class="shuru shuru2"
                            :placeholder="lan.$t('shurukaihuhang')"
                        />
                    </div>
                </div>
            </div>

            <div
                class="cashoutmoney"
                v-if="paytypeforign == 3 && lan.$s() == 'en'"
            >
                <div>
                    <div class="infoitem">
                        <span class="label label1"
                            ><span style="color: red">*</span
                            >{{ lan.$t("zhanghao") }}</span
                        >
                        <a-input
                            v-model:value="accountinfo.account"
                            class="shuru"
                            :placeholder="lan.$t('shuruzhanghao')"
                        />
                    </div>
                </div>
            </div>
            <div class="cashoutall submit" @click="sub">
                {{ lan.$t("tijiao") }}
            </div>
            <NavBottom class="navbottom"></NavBottom>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, toRaw } from "vue";
import NavBottom from "@/components/NavBottom.vue";
import { accountadd, editaccount, getaccountinfo } from "@/api";
import { useRoute } from "vue-router";
import { useI18n } from "@/utils/i18n";
import { message } from "ant-design-vue";
export default defineComponent({
    name: "Cashout",
    components: {
        NavBottom,
    },
    setup() {
        const lan: any = useI18n();
        const money = ref(0);
        const paytype = ref(4);
        const paytypeforign = ref(4);
        const accountinfo = ref<any>({
            type: 4,
            account: "",
            mname: "",
            bankcode: "",
            bankname: "",
        });
        interface Changes {
            target: {
                value: number;
            };
        }

        const onChange: (e: Changes) => void = (e: Changes) => {
            console.log("radio checked", e.target.value);
            paytype.value = e.target.value;
            accountinfo.value.type = e.target.value;
        };
        const onChange1: (e: Changes) => void = (e: Changes) => {
            console.log("radio checked", e.target.value);
            accountinfo.value.type = e.target.value;
            paytypeforign.value = e.target.value;
        };
        function sub() {
            console.log(toRaw(accountinfo.value), 11);
            // cosnole.log(useRoute().query.id)
            const accountinfofin = toRaw(accountinfo.value);
            if (lan.$s() == "zh") {
                if (accountinfofin.type == 4) {
                    console.log(paytype.value);
                    if (accountinfofin.mname == "") {
                        message.error(lan.$t("xingmingweikong"));
                    } else if (accountinfofin.bankcode == "") {
                        message.error(lan.$t("kahaoweikong"));
                    } else if (accountinfofin.bankname == "") {
                        message.error(lan.$t("kaihuhangweikong"));
                    } else {
                        if (toRaw(accountinfo.value).accountid) {
                            console.log(300);
                            editaccount(toRaw(accountinfo.value).accountid, accountinfo.value);
                        } else {
                            console.log(111);
                            accountadd(toRaw(accountinfo.value));
                        }
                    }
                } else if (accountinfofin.type == 2) {
                    if (accountinfofin.account == "") {
                        message.error(lan.$t("zhanghaoweikong"));
                    } else {
                        if (toRaw(accountinfo.value).accountid) {
                            console.log(300);
                            editaccount(toRaw(accountinfo.value).accountid, accountinfo.value);
                        } else {
                            console.log(111);
                            accountadd(toRaw(accountinfo.value));
                        }
                    }
                } else if (accountinfofin.type == 1) {
                    if (toRaw(accountinfo.value).accountid) {
                        console.log(300);
                        editaccount(toRaw(accountinfo.value).accountid, accountinfo.value);
                    } else {
                        console.log(111);
                        accountadd(toRaw(accountinfo.value));
                    }
                }
            } else if (lan.$s() == "en") {
 
                if (paytypeforign.value == 4) {
                    console.log(paytype.value);
                    if (accountinfo.value.mname == "") {
                        message.error(lan.$t("xingmingweikong"));
                    } else if (accountinfo.value.bankcode == "") {
                        message.error(lan.$t("kahaoweikong"));
                    } else if (accountinfo.value.bankname == "") {
                        message.error(lan.$t("kaihuhangweikong"));
					} else {
                        if (toRaw(accountinfo.value).accountid) {
                            editaccount(toRaw(accountinfo.value).accountid, accountinfo.value);

                        } else {
                            accountadd(toRaw(accountinfo.value));
                        }
                    }
                } else if (paytypeforign.value == 3) {
					console.log(3333)
                    if (accountinfo.value.account == "") {
                        message.error(lan.$t("zhanghaoweikong"));
                    } else {
                        if (toRaw(accountinfo.value).accountid) {
                            console.log(300);
                            editaccount(toRaw(accountinfo.value).accountid, accountinfo.value);
                        } else {
                            console.log(111);
                            accountadd(toRaw(accountinfo.value));
                        }
                    }
                }
            }
            // if (accountinfofin.account == "") {
            //     message.error(lan.$t("zhanghaoweikong"));
            // } else {
            // if (toRaw(accountinfo.value).accountid) {
            //     console.log(300);
            //     editaccount(toRaw(accountinfo.value).accountid);
            // } else {
            //     console.log(111);
            //     accountadd(toRaw(accountinfo.value));
            // }
            // }
        }
        const ifchina = ref(true);

        onMounted(async () => {
            if (useRoute().query.id) {
                accountinfo.value = await getaccountinfo(useRoute().query.id);
                // console.log(await getaccountinfo(useRoute().query.id),233)
            }
            //  useRoute().query.id
        });
        return {
            money,
            onChange,
            paytype,
            ifchina,
            paytypeforign,
            onChange1,
            sub,
            accountinfo,
            lan,
        };
    },
});
</script>
<style lang="scss" scoped>
.cashout ::v-deep(.ant-breadcrumb) > span:last-child {
    color: #08ae98;
}
.cashout ::v-deep(.ant-radio-wrapper) {
    display: flex;
}
.cashout ::v-deep(.ant-radio-checked) ::v-deep(.ant-radio-inner) {
    border-color: #08ae98 !important;
}
.cashout ::v-deep(.ant-radio-inner::after) {
    background: #08ae98 !important;
}
// .cashout ::v-deep(.ant-radio) {
//   //   top: 43px;
// }
.cashout {
    .mingxilist {
        width: 1150px;
        // height: 533px;
        background: white;
        border-radius: 18px;
        margin-top: 18px;
        .tabs {
            display: flex;
            flex-wrap: nowrap;
            padding-top: 35px;
            padding-left: 40px;
            .residue {
                font-size: 11px;
                margin: auto 0;
                color: #08ae98;
                position: relative;
                left: -30px;
            }
            .topbtn {
                // width: 89px;
                min-height: 17px;
                padding-left: 14px;
                padding-right: 14px;
                line-height: 17px;
                border: 1px solid #08ae98;
                border-radius: 3px;
                font-size: 10px;
                color: #08ae98;
                font-weight: 500;
                margin: auto 0;
            }
            .topbtn2 {
                margin-left: 642px;
            }
            .topbtn1 {
                padding-left: 9px;
                padding-right: 9px;
                color: #d12c2e;
                border: 1px solid #d12c2e;
                margin-left: 11px;
            }
        }
        .line {
            width: 1070px;
            height: 1px;
            background: #eeeeee;
            margin: 0 auto;
            margin-top: 11px;
        }
        .beforetab {
            color: #121212;
            font-size: 13px;
            line-height: 35px;
            font-weight: bold;
            margin-right: 57px;
        }
        .choose {
            margin-top: 28px;
            margin-left: 40px;
            display: flex;
            .accountlist {
                display: flex;
                color: #404040;
                font-size: 11px;

                .icon {
                    width: 17px;
                    height: 17px;
                    margin-right: 6px;
                }
                .icon1 {
                    width: 28px;
                    height: 18px;
                }
            }
        }
        .label {
            color: #808080;
            font-size: 11px;
            margin-right: 28px;
        }
        .label1 {
            margin-left: 40px;
            display: inline-block;
            width: 100px;
        }
        .label2 {
            width: 90px;
            word-wrap: break-word !important;
        }
        .cashoutmoney {
            display: flex;
            margin-top: 31px;
            .infoitem {
                margin-bottom: 28px;
            }
            .infoitem1 {
                display: flex;
            }
            .shuru {
                width: 171px;
                height: 23px;
                margin-left: 30px;
            }
            .shuru1 {
                margin-left: -15px;
            }
            .shuru2 {
                // margin-left: 18px;
            }
            .ewmbox {
                display: flex;
                .ewmpic {
                    width: 114px;
                    height: 114px;
                    margin-right: 23px;
                }
                .desc {
                    color: #666666;
                    font-size: 10px;
                    // line-height: 114px;
                    margin: auto 0;
                }
                .desc1 {
                    width: 149px;
                    position: relative;
                    top: 10px;
                }
            }
        }
        .cashoutall {
            width: 67px;
            height: 23px;
            line-height: 23px;
            background: #08ae98;
            border-radius: 3px;
            color: white;
            text-align: center;
            margin-left: 23px;
            font-weight: bold;
        }
        .submit {
            font-size: 10px;
            font-weight: 500;
            position: relative;
            top: 56px;
            left: 20px;
        }
    }

    .navbottom {
        padding-top: 250px;
        padding-bottom: 30px;
    }
}
</style>