<template>
    <view class="main">
        <!-- nav -->
        <navigation>{{ i18n.WalletHistory }}</navigation>
        <view class="body">
            <view class="form">
                <!-- coin选择框 -->
                <view class="text">{{ i18n.SelectCurrency }}</view>
                <view class="input-item">
                    <u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
                        :placeholder="i18n.PleaseChooseCoin">
                    </u-input>
                    <view class="downSelect" @click="USDTPopupShow = true"></view>
                </view>
                <!-- form地址选择框 -->
                <view class="text">{{ i18n.From }}</view>
                <view class="input-item">
                    <u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
                        :placeholder="i18n.OptionAccount">
                    </u-input>
                    <view class="downSelect" @click="accountPopupShow = true"></view>
                </view>
                <!-- to地址选择框 -->
                <view class="text">{{ i18n.To }}</view>
                <view class="input-item">
                    <u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
                        :placeholder="i18n.TradingAccount">
                    </u-input>
                    <view class="downSelect" @click="accountPopupShow = true"></view>
                </view>
                <!-- 数量 -->
                <view class="text">{{ i18n.TransferNumber }}</view>
                <view class="input-item">
                    <u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
                        :placeholder="i18n.PleaseEnterNumber">
                    </u-input>
                    <view class="numberDownSelect">USDT <view class="all">ALL</view>
                    </view>
                </view>
                <view class="Usable">{{ i18n.Usable }} <view class="number">560878.90000000</view>
                </view>
            </view>

            <!-- 按钮 -->
            <u-button class="transferButton" color="#00E8A2" throttleTime="500">{{
                    i18n.Transfer
            }}</u-button>

            <!-- USDT按钮通知弹出层 -->
            <u-popup class="USDTPopup" :show="USDTPopupShow" round="40rpx" mode="bottom" @close="USDTPopupShow = false"
                @open="USDTPopupShow = true" bgColor="#211F32">
                <view class="content">
                    <view class="close" @click="USDTPopupShow = false"></view>
                    <scroll-view scroll-y="true" style="height: 432rpx;" scroll-with-animation="true" @touchmove.stop>
                        <radio-group class="radioGroup" @change="USDTRadioChange" v-model="USDTRadioValue">
                            <label class="checkBox" v-for="(item, index) in 10" :key="index">
                                <view class="icon">
                                    <u-icon name="../../static/maskets/bye.png" size="52rpx" width="52rpx"></u-icon>
                                </view>
                                <view class="iconName">
                                    <view class="top">USDT</view>
                                    <view class="bottom">BTC</view>
                                </view>

                                <radio color="#00E8A2" shape="square"></radio>
                            </label>

                        </radio-group>
                    </scroll-view>

                    <u-button class="button" color="#00E8A2" throttleTime="500" @click="USDTPopupShow = false">OK
                    </u-button>
                </view>
            </u-popup>

            <!-- account账户按钮通知弹出层 -->
            <u-popup class="accountPopup" :show="accountPopupShow" round="40rpx" mode="bottom"
                @close="accountPopupShow = false" @open="accountPopupShow = true" bgColor="#211F32">
                <view class="content">
                    <view class="close" @click="accountPopupShow = false"></view>
                    <scroll-view scroll-y="true" style="height: 200rpx;" scroll-with-animation="true" @touchmove.stop>
                        <radio-group class="radioGroup" @change="accountRadioChange" v-model="accountRadioValue">
                            <label class="checkBox" v-for="(item, index) in 3" :key="index">
                                <view class="name">Option account</view>
                                <radio color="#00E8A2" shape="square"></radio>
                            </label>

                        </radio-group>
                    </scroll-view>

                    <u-button class="button" color="#00E8A2" throttleTime="500" @click="accountPopupShow = false">OK
                    </u-button>
                </view>
            </u-popup>

        </view>

    </view>
</template>

<script>
export default {
    name: "transfer",
    data() {
        return {
            coin: '',
            USDTPopupShow: false,
            accountPopupShow: false,
            USDTRadioValue: '',
            accountRadioValue: '',
        };
    },
    computed: {
        i18n() {
            return this.$t("me");
        },
    },
    onLoad() {
    },
    onShow() { },
    methods: {
        USDTRadioChange(e) {
            console.log(e);
        },
        accountRadioChange(e) {
            console.log(e);
        }

    },
}
</script>

<style lang="scss" scoped>
.main {
    .body {
        .form {
            margin: 232rpx 32rpx 0;
            background: #211F32;
            border-radius: 32rpx;
            padding: 0 32rpx;
            overflow: hidden;

            .text {
                margin: 32rpx 0 20rpx;
                font-size: 32rpx;
                color: #A1A0A8;
            }

            .input-item {
                position: relative;
                background: #323045;
                border-radius: 32rpx;

                .input {
                    width: 400rpx;
                    height: 112rpx;
                    padding-left: 40rpx !important;
                }

                .downSelect {
                    position: absolute;
                    width: 32rpx;
                    height: 32rpx;
                    top: 36rpx;
                    right: 32rpx;
                    background-image: url(../../static/me/ic_input_arrow_down.png);
                    background-repeat: no-repeat;
                    background-size: 32rpx;


                }

                .numberDownSelect {
                    position: absolute;
                    width: 32rpx;
                    height: 32rpx;
                    top: 36rpx;
                    right: 148rpx;

                    .all {
                        padding-left: 16rpx;
                        display: inline;
                        font-size: 28rpx;
                        color: #00E8A2;
                    }
                }

            }

            .Usable {
                margin: 32rpx 0;
                color: #FFFFFF;
                font-size: 12px;

                .number {
                    display: inline;
                    color: #00E8A2;
                }
            }

        }

        .transferButton {
            box-sizing: border-box;
            margin: 64rpx 32rpx;
            width: 686rpx;
            height: 112rpx;
            line-height: 112rpx;
            border-radius: 32rpx;
            font-size: 32rpx;
            color: #15141F !important;
        }

        .USDTPopup {
            .content {
                height: 730rpx;

                .close {
                    margin: 48rpx 346rpx;
                    width: 58rpx;
                    height: 20rpx;
                    background-image: url(../../static/charity/Turn.png);
                    background-repeat: no-repeat;
                    background-size: 58rpx 20rpx;
                }

                .radioGroup {
                    height: 432rpx;

                    .checkBox {
                        height: 84rpx;
                        width: 670rpx;
                        display: flex;
                        align-items: center;
                        margin: 0 40rpx 32rpx;

                        .icon {
                            width: 84rpx;
                            height: 84rpx;
                            border-radius: 20rpx;
                            overflow: hidden;
                            display: inline-block;
                            box-sizing: border-box;
                            background: #323045;
                            padding: 16rpx;
                            margin-right: 20rpx;
                        }

                        .iconName {
                            width: 520rpx;

                            .top {
                                font-size: 32rpx;
                                color: #fff;
                            }


                            .bottom {
                                font-size: 24rpx;
                                color: #A1A0A8;
                            }


                        }

                        /deep/.uni-radio-input {
                            width: 48rpx;
                            height: 48rpx;
                            border-radius: 16rpx;
                            background: #323045;
                        }

                        /deep/.uni-radio-input-checked::before {
                            font-size: 36rpx;
                        }
                    }

                }

                .button {
                    width: 654rpx;
                    margin: 40rpx 48rpx;
                    border-radius: 32rpx;
                    height: 112rpx;
                    line-height: 112rpx;
                    color: #15141F !important;
                }

            }

        }


        .accountPopup {
            .content {
                height: 484rpx;

                .close {
                    margin: 48rpx 346rpx;
                    width: 58rpx;
                    height: 20rpx;
                    background-image: url(../../static/charity/Turn.png);
                    background-repeat: no-repeat;
                    background-size: 58rpx 20rpx;
                }

                .radioGroup {
                    height: 200rpx;

                    .checkBox {
                        height: 84rpx;
                        width: 670rpx;
                        display: flex;
                        align-items: center;
                        margin: 0 40rpx 32rpx;

                        .name {
                            width: 600rpx;
                            font-size: 32rpx;
                            color: #fff;
                        }

                        /deep/.uni-radio-input {
                            width: 48rpx;
                            height: 48rpx;
                            border-radius: 16rpx;
                            background: #323045;
                        }

                        /deep/.uni-radio-input-checked::before {
                            font-size: 36rpx;
                        }
                    }

                }

                .button {
                    width: 654rpx;
                    margin: 20rpx 48rpx;
                    border-radius: 32rpx;
                    height: 112rpx;
                    line-height: 112rpx;
                    color: #15141F !important;
                }

            }

        }
    }




}
</style>
