<template>
    <div class="resout-container AI-Design-container">
        <div class="header">
            <van-nav-bar title="一键反馈" left-arrow @click-left="returnPage" @click-right="toHome">
                <template #right>
                    <van-icon name="wap-home-o" color="#333" size="26" />
                </template>
            </van-nav-bar>
        </div>
        <div class="card" style="padding-top: 15px;">
            <div v-if="feedbackResult == 0" class="title">写反馈</div>
            <van-field
                    v-if="feedbackResult == 0"
                    v-model="feedbackMessage"
                    rows="12"
                    autosize
                    @input="messageInput"
                    style="padding: 0;"
                    type="textarea"
                    maxlength="300"
                    :placeholder="textareaPlaceholder"
                    show-word-limit
            />
            <img v-if="feedbackResult == 1" src="@/assets/AIDesign/feedback_result.png" class="feedback-result-img" />
            <div v-if="feedbackResult == 1" class="feedback-result-txt">您已成功提交反馈，我们将尽快处理~</div>
        </div>
        <van-button
                v-if="feedbackResult == 0"
                type="primary"
                size="large"
                color="#2484F2"
                :disabled="isBtnDisabled"
                style="width: 90%;margin-top: 20px;border-radius: 15px;"
                @click="applyFeedback">
            提交反馈
        </van-button>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from "vue-property-decorator";
    import { outsideUpdateFeedBack, insideUpdateFeedBack } from "@/api/indexAI";
    import { toLBHome } from '@/utils/index';
    @Component
    export default class extends Vue {

        private isBtnDisabled = true;
        private feedbackMessage = '';
        private feedbackResult = 0;
        private wallType: '';
        private textareaPlaceholder = '差点意思？再生成一张会更好\n也可以在此提出您的宝贵意见...'

        // 处理内外墙api
        private applyFeedbackApi = {
            outside: outsideUpdateFeedBack,
            inside: insideUpdateFeedBack
        };

        activated(){
            this.wallType = this.$route.query.wallType;
            this.feedbackResult =  this.$route.query.feedbackResult;
            this.initialize();
        }

        //初始化页面数据
        private initialize() {
            this.feedbackMessage = '';
            this.isBtnDisabled = true;
        }
        
        applyFeedback(){
            let that = this;
            const F_ID = this.$route.query.F_id || "";
            const formData = new FormData();
            formData.append('F_id', F_ID);
            formData.append('Feedback', that.feedbackMessage);
            that.applyFeedbackApi[that.wallType](formData).then(response => {
                if (response.StatusCode == 200) {
                    that.feedbackResult = 1;
                }
            })
        }

        messageInput(value){
            let that = this;
            if (value.trim() === "") {
                that.isBtnDisabled = true;
            }else {
                that.isBtnDisabled = false;
            }
        }

        returnPage() {
            this.$router.back();
        }

        toHome() {
            toLBHome()
        }
    }
</script>

<style scoped lang="scss">
    .resout-container {
        background: linear-gradient(to bottom, #dffef6, #e7f8f4);
        min-height: 100vh;
        flex-direction: column;
        display: flex;
        align-items: center;
    }
    .header {
        border-bottom: 1px solid #f8f8f8;
        .van-nav-bar__title {
            font-size: 20px;
            color: #333;
        }
        .van-icon {
            font-size: 20px;
            color: #333 !important;
        }
    }
    .card{
        width: 90%;
        height: 60vh;
        min-height: 60vh;
        background-color: #FFFFFF;
        border-radius: 15px;
        margin-top: 70px;
        flex-direction: column;
        display: flex;
        box-sizing: border-box;
        padding: 15px;
        .title{
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 15px;
        }
        .feedback-result-img{
            width: 70%;
            margin-left: 15%;
            margin-top: 10%;
        }
        .feedback-result-txt{
            font-size: 16px;
            color: rgb(134, 144, 156);
            text-align: center;
            margin-top: 15px;
        }
    }
</style>