<template>
    <view class="main">
        <!-- nav -->
        <navigation :bgTransparent=true>{{ i18n.CharityDetails }}</navigation>
        <view class="body">
            <view class="titleBody">
                <!-- 海报 -->
                <u--image class="img" :showLoading="true" src="../../static/charity/Rectangle 2.png" width="750rpx"
                    height="762rpx"></u--image>
                <!-- 文章标题 -->
                <view class="title">New Balance Raff Simons Bright </view>
            </view>

            <view class="contentBody">
                <view class="about">{{ i18n.About }}</view>
                <!-- 文字内容 -->
                <view class="content">Minimum deposit amount: 10 USDT. Deposit less than the minimum amount will not be
                    posted
                    and cannot be returned
                    This address is your latest deposit address. When the system receives deposit, it will be
                    automatically
                    credited to the account。The transfer needs to be confirmed by the entire blockchain network. When it
                    reaches 10 network confirmations, your USDT will be automatically deposit into the account。
                    Minimum deposit amount: 10 USDT. Deposit less than the minimum amount will not be posted and cannot
                    be
                    returned
                    This address is your latest deposit address. When the system receives deposit, it will be
                    automatically
                    credited to the account。The transfer needs to be confirmed by the entire blockchain network. When it
                    reaches 10 network confirmations, your USDT will be automatically deposit into the account。Minimum
                    deposit amount: 10 USDT. Deposit less than the minimum amount will not be posted and cannot be
                    returned
                    This address is your latest deposit address. When the </view>
                <!-- 捐赠详情 -->
                <view class="Participants">
                    <view class="title">{{ i18n.Participants }}</view>
                    <!-- 进度条 -->
                    <u-line-progress class="progressbar" :showText="false" :percentage="50" activeColor="#00E8A2"
                        height="32rpx">
                    </u-line-progress>
                    <!-- 百分比 -->
                    <view class="progress">50%</view>
                    <!-- 捐赠用户头像 -->
                    <view class="userIconList">
                        <u--image v-for="(item, index) in 10" :key="index" class="userIcon" :showLoading="true"
                            src="../../static/charity/Ellipse 502.png" width="64rpx" height="64rpx"></u--image>
                    </view>

                </view>
                <!-- 按钮 -->
                <u-button class="button" color="#00E8A2" throttleTime="500" @click="DonatePopupShow = true">{{
                        i18n.DonateNow
                }}
                </u-button>

                <!-- DonateNow按钮通知弹出层 -->
                <u-popup class="DonatePopup" :show="DonatePopupShow" round="40rpx" mode="bottom"
                    @close="DonatePopupShow = false" @open="DonatePopupShow = true" bgColor="#211F32">
                    <view class="content">
                        <view class="close" @click="DonatePopupShow = false"></view>
                        <u--form class="form" :model="coinInfo" :rules="rules" ref="form1" errorType="toast">
                            <!-- coin选择框 -->
                            <u-form-item class="input-item" prop="verificationCode" ref="item1">
                                <u-input class="input" v-model="coinInfo.verificationCode" color="#fff" fontSize="32rpx"
                                    border="none" :placeholder="i18n.PleaseChooseCoin">
                                </u-input>
                                <view class="selectCoinBtn" @click="USDTPopupShow = true">USDT
                                </view>
                            </u-form-item>
                            <view class="Available">{{ i18n.AvailableBlance }}:0USDT</view>
                            <!-- 数量 -->
                            <u-form-item class="input-item" prop="number" ref="item1">
                                <u-input class="input" v-model="coinInfo.number" color="#fff" fontSize="32rpx"
                                    border="none" :placeholder="i18n.Quantity">
                                </u-input>
                            </u-form-item>
                            <!-- 密码 -->
                            <u-form-item class="input-item" prop="password" ref="item1">
                                <u-input class="input" v-model="coinInfo.password" color="#fff" fontSize="32rpx"
                                    border="none" :placeholder="i18n.WithdrawalPassword">
                                </u-input>
                            </u-form-item>

                        </u--form>
                        <u-button class="button" color="#00E8A2" throttleTime="500" :disabled="DonatePopupDisabled"
                            @click="DonatePopupShow = false">{{ i18n.DonateNow }}
                        </u-button>
                    </view>
                </u-popup>

                <!-- 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: 580rpx;" scroll-with-animation="true"
                            @touchmove.stop.prevent="">
                            <radio-group class="radioGroup" @change="radioChange" v-model="radioValue">
                                <label class="checkBox" v-for="(item, index) in 40" :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>


            </view>

        </view>


    </view>
</template>

<script>
import UButton from '../../uview-ui/components/u-button/u-button'
export default {
    name: "charityDetails",
    data() {
        return {
            DonatePopupShow: false,
            USDTPopupShow: false,
            DonatePopupDisabled: true,
            coinInfo: {},
            rules: {},
            radioValue: '',
        };
    },
    computed: {
        i18n() {
            return this.$t("charity");
        },
    },
    onLoad() {
        // console.log(this.$t('login.emailInputMessage'));
    },
    onShow() { },
    methods: {
        radioChange(e) {
            // console.log(e);
        }
    },
    components: { UButton }
}
</script>

<style lang="scss" scoped>
.main {

    .body {
        overflow: hidden;

        .titleBody {
            position: relative;
            height: 762rpx;

            .title {
                position: absolute;
                bottom: 48rpx;
                font-size: 40rpx;
                font-weight: 800;
                z-index: 20;
                margin: 0 48rpx;
            }
        }

        .contentBody {
            padding: 0 48rpx;

            .about {
                margin: 32rpx 0;
                font-size: 32rpx;
                color: #A2A0A8;
            }

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

            .Participants {
                background: #211F32;
                border-radius: 32rpx;
                padding: 32rpx;

                .title {
                    font-size: 28rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    margin-bottom: 20rpx;
                    color: #A1A0A8;
                }

                // .progressBody{
                .progressbar {
                    vertical-align: top;
                    display: inline-block;
                    width: 426rpx;
                    margin: 8rpx 0;
                }

                .progress {
                    margin-left: 20rpx;
                    display: inline-block;
                    width: 144rpx;
                    height: 48rpx;
                    line-height: 48rpx;
                    font-size: 32rpx;
                }


                .userIconList {
                    height: 104rpx;

                    .userIcon {
                        overflow: hidden;
                        border-radius: 64rpx;
                        display: inline-block;
                        margin-left: -20rpx;
                        margin-top: 34rpx;

                        &:first-child {
                            margin-left: 0;
                        }

                    }
                }


            }

            .button {
                margin-top: 64rpx;
                margin-bottom: 120rpx;
                height: 112rpx;
                line-height: 112rpx;
                border-radius: 32rpx;
                font-size: 32rpx;
                color: #15141F !important;
            }

            .DonatePopup {
                .content {
                    height: 844rpx;

                    /deep/.u-button--disabled {
                        background-color: #A1A0A8 !important;
                        border-color: #A1A0A8 !important;
                    }

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

                    .form {
                        font-size: 32rpx;
                        margin: 0 32rpx;

                        .Available {
                            height: 44rpx;
                            margin: 32rpx 0;
                            font-size: 28rpx;
                        }

                        .input-item {
                            overflow: hidden;
                            height: 124rpx;
                            line-height: 124rpx;
                            background: #323045;
                            margin-bottom: 48rpx;
                            border-radius: 32rpx;
                            padding: 0 40rpx;

                            /deep/.u-form-item__body {
                                padding: 0;
                            }

                            .input {
                                height: 124rpx;
                            }

                            .selectCoinBtn {
                                position: relative;
                                width: 150rpx;
                                height: 54rpx;
                                right: 0rpx;
                                line-height: 56rpx;
                                font-size: 36rpx;
                                padding: 0;
                                color: #fff;

                                &::after {
                                    display: block;
                                    position: absolute;
                                    content: '';
                                    background-image: url(../../static/charity/ic_ma_arrow_down.png);
                                    background-repeat: no-repeat;
                                    background-size: 32rpx;
                                    width: 32rpx;
                                    height: 32rpx;
                                    top: 12rpx;
                                    right: 10rpx;
                                }
                            }
                        }
                    }

                    .button {
                        width: 654rpx;
                        margin: 0 48rpx;
                    }

                }

            }

            .USDTPopup {
                .content {
                    height: 844rpx;

                    .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: 580rpx;

                        .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;
                    }

                }

            }
        }




    }

}
</style>
