<template>
    <div class="page">
        <NavBar
            backIcon="#ffffff"
            :showIcon="true"
            :showTitle="true"
            title="账户申诉"
            backgroundBox="#1F86FF"
            textColor="#ffffff"
        ></NavBar>
        <view class="welcome flex-between">
            <view class="text">
                <view class="t1">Welcome</view>
                <view class="t2">进入乐业观山湖</view>
            </view>
            <image src="@/static/image/postion/hi.png"></image>
        </view>
        <view class="content">
            <view class="name">
                <view class="t1">账户申述</view>
                <textarea v-model="reason" placeholder="请填写申述理由" />
            </view>
        </view>
        <view class="btn-wrap flex-center">
            <button class="bottom-btn" @tap="appealFn">提交</button>
        </view>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { appeal } from "@/api/user.js";
const reason = ref("");
onLoad(() => {});
const appealFn = () => {
    appeal({ appealMessage: reason.value }).then(res => {
        if (res.code === 200) {
            xma.showToast({
                title: res.message,
                icon: "none",
                duration: 1900
            });
            setTimeout(() => {
                xma.reLaunch({
                    url: "/pages/login/index"
                });
            }, 2000);
        }
    });
};
</script>

<style></style>
<style lang="scss" scoped>
:deep(.uni-page-head-hd) {
    display: none;
}
.page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;

    // padding-top: 54rpx;
    background-color: #1f86ff;
}
.welcome {
    padding: 54rpx 80rpx 0 66rpx;
    image {
        width: 164rpx;
        height: 164.46rpx;
    }
    .t1 {
        font-size: 48rpx;
        line-height: 40rpx;
        color: #ffffff;
    }
    .t2 {
        margin-top: 26rpx;
        font-size: 48rpx;
        line-height: 40rpx;
        color: #ffffff;
    }
}
.content {
    flex: 1;
    padding: 80rpx 32rpx 0;
    margin-top: 52rpx;
    background-color: #ffffff;
    border-top-left-radius: 80rpx;
    border-top-right-radius: 80rpx;
    .item {
        display: flex;
        align-items: center;

        // justify-content: space-between;
        padding: 16px 0;
        border-bottom: 1px solid #f3f4f8;
        .label {
            flex: 0 0 100px;
            font-size: 12px;
            font-weight: 500;
            line-height: 18px;
            color: #77818f;
            .red {
                color: red;
            }
        }
        input {
            font-size: 14px;
            font-weight: normal;
            line-height: 18px;
            color: #1b2026;
        }
        image {
            width: 28px;
            height: 28px;
            border-radius: 50%;
        }
    }
    .t1 {
        font-size: 32rpx;
        line-height: 54rpx;
        color: #1b2026;
    }
    .t2 {
        font-size: 24rpx;
        line-height: 36rpx;
        color: #a3a7b3;
    }
    .name {
        input {
            padding: 32rpx 0 16rpx;
            margin-top: 16rpx;
            border-bottom: 2rpx solid #f3f4f8;
        }
        textarea {
            position: relative;
            box-sizing: border-box;
            width: 686rpx;
            height: 272rpx;
            padding: 32rpx;
            padding-bottom: 54rpx;
            margin-top: 32rpx;
            background: #f2f5fb;
            border-radius: 8rpx;
            opacity: 1;
            text {
                position: absolute;
                right: 20rpx;
                bottom: 16rpx;
                font-size: 24rpx;
                color: #77818f;
            }
        }
    }
    .image-upload {
        .t2 {
            margin-top: 16rpx;
        }
        image {
            width: 686rpx;
            height: 386rpx;
            margin-top: 84rpx;
        }
    }
}
.popout-wrap {
    .tips {
        padding: 32rpx 0 94rpx;
        background-color: #ffffff;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        .title {
            margin: 0 0 70rpx;
            font-size: 36rpx;
            font-weight: 600;
            line-height: 54rpx;
            color: #1b2026;
            text-align: center;
        }
        image {
            width: 340rpx;
            height: 222rpx;
        }
        .flex-between {
            padding: 0 32rpx 0 16rpx;
            .text-wrap {
                margin-left: 10rpx;
            }
            .m16 {
                margin: 32rpx 0;
            }
            .orange {
                color: #ff561b;
            }
            view {
                font-size: 24rpx;
                line-height: 36rpx;
                color: #1b2026;
            }
        }
    }
    .select-list {
        margin-top: 14rpx;
        text-align: center;
        background-color: #ffffff;
        .item {
            height: 108rpx;
            line-height: 108rpx;
            &:not(:first-child) {
                border-top: 2rpx solid #f3f4f8;
            }
        }
    }
}
.btn-wrap {
    box-sizing: border-box;
    height: 112rpx;
    padding: 16rpx 0;
    background-color: #ffffff;
    border-top: 2rpx solid rgb(31 35 41 / 15%);
    .bottom-btn {
        background: #1f86ff;
        width: 622rpx;
        height: 80rpx;
        line-height: 80rpx;
        color: #ffffff;
    }
}
.wd-transition {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
</style>
