<template>
    <u-popup :show="isShow" mode="center" bgColor="transparent" @close="close">
        <view class="popupLocale-box">
            <view class="title">{{ $t('problem.feedback') }}</view>
            <view class="item">
                <u--textarea height="340" v-model="content" :placeholder="$t('set.input')" maxlength="200" count
                    border="none"></u--textarea>
            </view>
        </view>
        <view style="display: flex;">
            <u-button :text="$t('navbar.back')" color="#EDC466" @click="close"
                style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
            <u-button :text="$t('sumbit')" color="#699A70" @click="sendFeedBack"
                style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
        </view>
    </u-popup>
</template>

<script>
export default {
    data() {
        return {
            content: '',
            isShow: false
        }
    },
    props: ['showQa'],
    watch: {
        showQa() {
            this.isShow = this.showQa
        }
    },
    methods: {
        async sendFeedBack() {
            let res = await this.$api.mine.feedBack({
                content: this.content
            });
            if (res.status === 0) {
                this.$common.msgToast(res.msg, null, 'success');
                this.show = false
                this.content = ''
            } else {
                uni.$u.toast(res.msg);
            }
        },
        close() {
            this.$emit('closeFeed', false)
        }
    }
}
</script>

<style lang="scss" >
.popupLocale-box {
    background: rgba(0, 0, 0, 0.8);
    width: 582rpx;
    overflow: hidden;
    padding: 30rpx 42rpx;

    .title {
        font-size: 40rpx;
        text-align: center;
        margin-bottom: 40rpx;
    }

    .u-button {
        width: 260rpx;
        height: 56rpx;
        border-radius: 40rpx;
    }

    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 34rpx 0 38rpx 0;
    }

    .tips {
        color: #DC0023;
        font-size: 20rpx;
        text-align: center;
        margin-top: 80rpx;
    }

    /deep/ .u-textarea__count {
        background-color: transparent !important;
        color: #000000;
    }

    /deep/ .uni-textarea-textarea {
        color: #fff;
    }

    /deep/ .u-textarea {
        background-color: rgba(255, 255, 255, 0.5);

    }
}
</style>