<template>
    <div class="cashout">
        <div class="mingxilist">
            <div class="tabs">
                <div class="beforetab">{{lan.$t('tixianzhanghu')}}</div>
                <span class="residue">{{lan.$t('yue')}}：{{ danwei + yue }}</span>
                <div class="topbtn topbtn2" @click="navto('/mine/addaccount')">{{lan.$t('tianjiatixian')}}</div>
                <div class="topbtn topbtn1" @click="navto('/mine/transaction')">{{lan.$t('tixianjilu')}}</div>
            </div>
            <div class="line"></div>
            <div class="choose">
                <div class="chooseitem">
                    <div class="label">{{lan.$t('xuanzezhanghu')}}</div>
                    <!-- <a-radio></a-radio> -->
                    <!-- {{payinfo.type}} -->
                    <a-radio-group
                        v-model:value="payinfo.type"
                        @change="onChange"
                    >
                        <div class="accountlist">
                            <a-radio
                                v-for="(i, j) in accountlist"
                                :key="j"
                                :value="j"
                            >
                                <div class="accountitem">
                                    <div class="hostinfo" v-if="i.type == 4">
                                        <div>
                                            <img
                                                src="@/static/images/bank.png"
                                                alt=""
                                                class="icon"
                                            />
                                            <span class="accounttype"
                                                >{{lan.$t('yinhangka')}}</span
                                            >
                                        </div>
                                    </div>
                                    <div class="hostinfo" v-if="i.type == 2">
                                        <div>
                                            <img
                                                src="@/static/images/walletzfb.png"
                                                alt=""
                                                class="icon icon1"
                                            />
                                            <span class="accounttype"
                                                >{{lan.$t('zhifubao')}}</span
                                            >
                                        </div>
                                    </div>
                                    <div class="hostinfo" v-if="i.type == 1">
                                        <div>
                                            <img
                                                src="@/static/images/walletweixin.png"
                                                alt=""
                                                class="icon icon1"
                                            />
                                            <span class="accounttype"
                                                >{{lan.$t('weixin')}}</span
                                            >
                                        </div>
                                    </div>
                                    <div class="zhanghao">
                                        {{lan.$t('zhanghao')}}：{{i.account || i.bankcode}}
                                    </div>
                                </div>
                            </a-radio>

                            <!-- <a-radio :value="2">
                <div class="accountitem">
                  <div class="hostinfo">
                    <div>
                      <img
                        src="@/static/images/walletzfb.png"
                        alt=""
                        class="icon icon1"
                      />
                      <span class="accounttype">支付宝</span>
                    </div>
                  </div>
                  <div class="zhanghao">账号：6217 **** **** **** 175</div>
                </div>
              </a-radio>
              <a-radio :value="1">
                <div class="accountitem">
                  <div class="hostinfo">
                    <div>
                      <img
                        src="@/static/images/walletweixin.png"
                        alt=""
                        class="icon icon1"
                      />
                      <span class="accounttype">微信</span>
                    </div>
                  </div>
                  <div class="zhanghao">账号：6217 **** **** **** 175</div>
                </div>
              </a-radio> -->
                        </div>
                    </a-radio-group>
                </div>
                <div class="cashoutmoney">
                    <div class="label">{{lan.$t('tixianjine')}}</div>
                    <div class="moneynum">
                        <a-input v-model:value="payinfo.money" class="shuru" />
                        <div>{{danwei}}</div>
                        <div class="cashoutall" @click="all">{{lan.$t('quanbujine')}}</div>
                        <div class="desc">
                            {{lan.$t('tixianzhu')}}
                        </div>
                    </div>
                </div>
                <div
                    class="ale"
                    v-if="
                        payinfo.money <  parseInt(minwithdraw) || payinfo.money > parseFloat(yue)
                    "
                >
                    *{{lan.$t('yueshu')}} {{danwei + parseFloat(yue) }}，{{lan.$t('zuiditixian')}}
                </div>
            </div>
            <div class="cashoutall submit" @click="sub">{{lan.$t('lijitixian')}}</div>
            <NavBottom class="navbottom"></NavBottom>
        </div>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref, toRaw } from "vue";
import NavBottom from "@/components/NavBottom.vue";
import { cashout, getwallect } from "@/api";
import store from "@/store";
import { message } from "ant-design-vue";
import router from '@/router';
import { useI18n } from '@/utils/i18n';
export default defineComponent({
    name: "Cashout",
    components: {
        NavBottom,
    },
    setup() {
        
        const lan: any = useI18n();
        const money = ref(0);
        const payinfo = ref<any>({
            type: 0,
            money: 0,
            account: "",
            mname: "",
            bankcode: "",
            bankname: "",
            international: 0,
        });
        const moneychange: (e: number) => void = (e: number) => {
            console.log(e);
        };
        const yue=computed( () => store.state.userinfo.moneyValue)
        const danwei = computed(() => store.state.userinfo.symbol)
        // const yue = ref<number>(10000);
        // yue.value=store.state.userinfo.money
        const accountlist = ref<Array<any>>([]);

        onMounted(async () => {
            accountlist.value = await getwallect();
            console.log(store.state.userinfo);
        });
        function onChange(e: any) {
            console.log(e.target.value);
            payinfo.value.type = e.target.value;
            // payinfo.value.typeid=toRaw(accountlist.value)[e.target.value].wallectid
            // payinfo.value.type=toRaw(accountlist.value)[e.target.value].wallectid
        }
        function all() {
            payinfo.value.money = yue.value;
        }
        
        function sub() {
            console.log(toRaw(payinfo.value));

            payinfo.value.money = Number(payinfo.value.money);
            console.log(toRaw(payinfo.value));
            if (accountlist.value.length == 0) {
                message.error(lan.$t('kongzhanghaoliebiao'));
                return;
            } else if (payinfo.value.money < store.state.seting.minwithdraw) {
                message.error(lan.$t('zuiditixian'));
                return;
            } else if (payinfo.value.money > yue.value) {
                message.error(lan.$t('yuebuzu'));
            } else {
                cashout(
                    toRaw(payinfo.value),
                    toRaw(accountlist.value)[payinfo.value.type]
                ).then((res: boolean)=>{
                    if(res){
                        router.push("/mine/wallet")
                    }
                })
            }

            // cashout(
            //     toRaw(payinfo.value),
            //     toRaw(accountlist.value)[payinfo.value.type]
            // );
        }

        function navto(url: string){
            router.push(url)
        }

        const minwithdraw = computed(()=>store.state.seting.minwithdraw)

        return {
            money,
            moneychange,
            payinfo,
            onChange,
            all,
            yue,
            sub,
            accountlist,
            store,
            lan,
            navto,
            danwei,
            minwithdraw
        };
    },
});
</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) {
    top: 43px;
    height: 13px;
}
.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;

            .label {
                color: #808080;
                font-size: 11px;
                margin-right: 28px;
                flex-shrink: 0;
            }
            .chooseitem {
                display: flex;
                margin-bottom: 34px;
                // .label {
                //     width: 150px;
                // }
                .accountlist {
                    display: flex;
                    flex-wrap: wrap;
                    .accountitem {
                        // width: 200px;
                        padding-bottom: 16px;
                        padding-right: 20px;
                        border: 1px solid #dcdfe0;
                        background: white;
                        border-radius: 17px;
                        margin-left: 17px;
                        width: 256px;
                        margin-right: 30px;
                        margin-bottom: 17px;
                        .hostinfo {
                            display: flex;
                            padding-top: 17px;
                            .icon {
                                width: 47px;
                                height: 29px;
                                margin-right: 11px;
                                margin-left: 17px;
                            }
                            .icon1 {
                                width: 29px !important;
                                height: 29px !important;
                            }
                            .accounttype {
                                font-size: 13px;
                                color: #111111;
                                font-weight: 500;
                            }
                        }
                        .zhanghao {
                            color: #111111;
                            font-size: 10px;
                            margin-top: 38px;
                            margin-left: 17px;
                        }
                    }
                }
            }
            .cashoutmoney {
                display: flex;
                .moneynum {
                    display: flex;
                    font-size: 11px;
                    line-height: 23px;
                    color: #808080;
                    .shuru {
                        width: 171px;
                        height: 23px;
                        margin-right: 8px;
                    }

                    .desc {
                        margin-left: 17px;
                    }
                }
            }
        }
        .cashoutall {
            width: 67px;
            height: 23px;
            line-height: 23px;
            background: #08ae98;
            border-radius: 3px;
            color: white;
            text-align: center;
            margin-left: 23px;
            font-weight: bold;
        }
        .ale {
            color: #d12c2e;
            font-size: 10px;
            position: relative;
            left: 80px;
            top: 11px;
            display: inline-block;
        }
        .submit {
            font-size: 10px;
            font-weight: 500;
            position: relative;
            top: 56px;
            left: 20px;
        }
    }

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