<template>
    <mobile-sub-layout :title="$t('account.header.feedbackTitle')" :lineHeight="4">
        <view class="feed-back-body">
            <view class="feed-back-content"
                :style="{ backgroundColor: themeStore.theme.account.feedBack.lightBgColor }">
                <view class="feed-back-content-item" :style="{ color: themeStore.theme.account.feedBack.text.lable }">
                    <view class="feed-back-content-item-left">{{ $t("account.feedBack.label.yourId") }}:</view>
                    <view class="feed-back-content-item-right">{{ params.userId }}</view>
                </view>
                <view class="feed-back-content-item" :style="{ color: themeStore.theme.account.feedBack.text.lable }">
                    <view class="feed-back-content-item-left">{{ $t("account.feedBack.label.phoneNumber") }}:</view>
                    <view class="feed-back-content-item-right" v-if="!isShowInput">{{ appStore.phoneNumberPrefix }}
                        {{ params.phone.replace(appStore.phoneNumberPrefix.replace('+', ''), '') }}
                    </view>
                    <template v-else>
                        <view style="width: 70rpx; margin-left: 24rpx">
                            {{ appStore.phoneNumberPrefix }}
                        </view>
                        <input class="feed-back-content-item-input" :style="{
        color: themeStore.theme.account.feedBack.text.inputColor,
        backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor
    }" v-model="params.phone" :placeholder-style="JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
        " :placeholder="$t('account.feedBack.label.phonePlaceholder')" />
                    </template>
                </view>
                <view class="feed-back-content-item" style="margin-top: 10rpx">
                    <view class="feed-back-content-item-left"
                        :style="{ color: themeStore.theme.account.feedBack.text.lable }">{{
        $t("account.feedBack.label.email") }}:</view>
                    <input class="feed-back-content-item-input" :style="{
        marginLeft: '24rpx',
        color: themeStore.theme.account.feedBack.text.inputColor,
        backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor
    }" v-model="params.email" :placeholder-style="JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
        " :placeholder="$t('account.feedBack.label.emailPlaceholder')" />
                </view>
                <view class="feed-back-content-item-scenes"
                    :style="{ color: themeStore.theme.account.feedBack.text.lable }">
                    <view class="feed-back-content-item-scenes-list">
                        <view class="feed-back-content-item-scenes-list-item" v-for="(item, index) in scenes"
                            :key="index" :style="{
        color:
            index == checkScene
                ? themeStore.theme.account.feedBack.text.scenesItemActiveColor
                : themeStore.theme.account.feedBack.text.scenesItemColor,
        backgroundColor:
            index == checkScene
                ? themeStore.theme.account.feedBack.scenesItemActiveBgColor
                : themeStore.theme.account.feedBack.scenesItemBgColor,
    }" @click="checkSceneClick(index)">
                            {{ item }}
                        </view>
                    </view>
                </view>
                <view class="feed-back-content-item-textarea-label"
                    :style="{ color: themeStore.theme.account.feedBack.text.lable }">{{
        $t("account.feedBack.label.suggestion") }}:</view>
                <view class="feed-back-content-item-textarea">
                    <textarea type="textarea" rows="7" :placeholder-style="JSON.stringify({ color: themeStore.theme.account.feedBack.text.placeHolderColor })
        " :style="{
        color: themeStore.theme.account.feedBack.text.inputColor,
        backgroundColor: themeStore.theme.account.feedBack.placeHolderBgColor,
    }" v-model="params.content" class="feed-back-content-item-textarea-style"
                        :placeholder="$t('account.feedBack.label.suggestionPlaceholder')" />
                </view>
                <view class="submit-content">
                    <view class="submit-btn" :style="{
        background: themeStore.theme.button.normal,
        color: themeStore.theme.button.textNormal,
    }" @click="submit">{{ $t("account.button.submit") }}</view>
                </view>
            </view>
        </view>
    </mobile-sub-layout>
</template>

<script setup>
import { ref, reactive } from "vue";
import { updateFeedbackApi } from "@/api/account.js";
import { useAppStore } from "@/store/useAppStore";
import { useI18n } from "vue-i18n";
import { useThemeStore } from "@/store/useThemeStore";
import { useUserStore } from "@/store/useUserStore";
const userStore = useUserStore();
const themeStore = useThemeStore();
const { t } = useI18n();
const appStore = useAppStore();

let scenes = ref([
    t("account.feedBack.screen.game"),
    t("account.feedBack.screen.deposit"),
    t("account.feedBack.screen.withdraw"),
    t("account.feedBack.screen.vip"),
    t("account.feedBack.screen.invite"),
    t("account.feedBack.screen.account"),
    t("account.feedBack.screen.other"),
]);
let checkScene = ref(0);
let isShowInput =
    userStore.userInfo.mobile == null || userStore.userInfo.mobile == ""
        ? true
        : false;
let params = reactive({
    userId: userStore.userInfo.id,
    phone: userStore.userInfo.mobile == null ? "" : userStore.userInfo.mobile,
    email: "",
    content: "",
    appPackageName: appStore.packageName,
});
/**
 * 选择 Scene
 */
const checkSceneClick = (index) => {
    checkScene.value = index;
};
/**
 * 提交反馈
 */
const submit = async () => {
    const { code, data } = await updateFeedbackApi({
        type: checkScene.value,
        userId: params.userId,
        email: params.email,
        mobile: params.phone,
        content: params.content,
        appPackageName: params.appPackageName,
    });
    if (code == 200) {
        uni.navigateBack()
    }
};
</script>

<style lang="scss" scoped>
.feed-back-body {
    width: 100vw;
    height: calc(100vh - 88rpx);
    // background: #2c0303;
    box-sizing: border-box;
    padding-top: 10rpx;

    .feed-back-content {
        height: 100%;
        // background: #610606;
        box-sizing: border-box;
        padding: 0 30rpx 30rpx 30rpx;
        overflow: hidden;
        position: relative;

        .feed-back-content-item {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            height: 79rpx;
            line-height: 79rpx;
            // color: #fff;
            font-size: 30rpx;

            .feed-back-content-item-left {
                width: 231rpx;
                text-align: right;
            }

            .feed-back-content-item-right {
                margin-left: 24rpx;
                width: calc(100% - 255rpx);
            }

            .feed-back-content-item-input {
                border-radius: 20rpx;
                height: 79rpx;
                border: none;
                outline: none;
                box-sizing: border-box;
                padding-left: 20rpx;
                font-size: 26rpx;
                line-height: 79rpx;
            }

            .feed-back-content-item-input::placeholder {
                font-size: 26rpx;
                // color: #f98585;
            }
        }

        .feed-back-content-item-scenes {
            width: 100%;
            margin-top: 57rpx;

            // color: #fff;
            .feed-back-content-item-scenes-list::before {
                content: "Scenes:";
                width: 231rpx;
                text-align: right;
                line-height: 65rpx;
                margin-right: 20rpx;
                font-size: 30rpx;
            }

            .feed-back-content-item-scenes-list {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;

                .feed-back-content-item-scenes-list-item {
                    width: 213rpx;
                    height: 65rpx;
                    // background: #963333;
                    margin-bottom: 29rpx;
                    border-radius: 33rpx;
                    color: #fff;
                    text-align: center;
                    line-height: 65rpx;
                    margin-right: 6rpx;
                }

                .feed-back-content-item-scenes-list-item-active {
                    // background: #f37e1c;
                }
            }
        }

        .feed-back-content-item-textarea-label {
            width: 231rpx;
            text-align: right;
            height: 79rpx;
            line-height: 79rpx;
            // color: #fff;
        }

        .feed-back-content-item-textarea {
            width: 100%;
            margin-top: 25rpx;
            box-sizing: border-box;
            padding: 0 30rpx;

            .feed-back-content-item-textarea-style {
                width: 100%;
                height: 344rpx;
                // background: #3d0303;
                border-radius: 20rpx;
                border: none;
                outline: none;
                box-sizing: border-box;
                padding: 30rpx 20rpx;
                // color: #fff;
                line-height: 40rpx;
                direction: ltr;
                text-align: left;
                font-size: 26rpx;
            }

            .feed-back-content-item-textarea-style::placeholder {
                font-size: 26rpx;
                // color: #f98585;
            }
        }

        .submit-content {
            width: 100%;
            box-sizing: border-box;
            padding: 0 25rpx;
            margin-top: 44rpx;

            .submit-btn {
                width: 100%;
                height: 90rpx;
                // background: linear-gradient(90deg, #f78b22, #e34e04);
                border-radius: 45rpx;
                line-height: 90rpx;
                text-align: center;
                font-size: 36rpx;
                color: #fff;
            }
        }
    }
}
</style>
