<template>
    <view class="orderEvaluation">
        <Navbar
            :title="$t('pages_order.order_evaluation.title')"
            :autoBack="true"
            :bgColor="bgColor"
            leftIconSize="18px"
            height="100rpx"
            :leftIconColor="leftIconColor"
            :titleStyle="{ color: fontColor }"
        /><!-- 活动评价 -->
        <view class="content">
            <view class="baseInfo cardBackground_">
                <view class="statusBox">
                    <i></i>
                    <view class="status">{{$t('pages_order.order_evaluation.organizer_evaluation')}}</view><!-- 主理人评价 -->
                </view>
                <view class="info grayBg">
                    <view class="score">
                        <uv-rate count="5" size="48" v-model="num"></uv-rate>
                    </view>
                    <uv-textarea
                        height="376rpx"
                        :textStyle="{ color: fontColor }"
                        border="none"
                        v-model="evaluate"
                        :maxlength="-1"
                        :placeholder="$t('pages_order.order_evaluation.please_enter_content')"
                    ></uv-textarea><!-- 请输入内容 -->
                </view>
            </view>
            <view class="baseInfo cardBackground_" style="margin-top: 32rpx">
                <view class="statusBox">
                    <i></i>
                    <view class="status">{{$t('pages_order.order_evaluation.activity_evaluation')}}</view><!-- 活动评价 -->
                </view>
                <view class="info grayBg">
                    <view class="score">
                        <uv-rate
                            count="5"
                            size="48"
                            v-model="userNum"
                        ></uv-rate>
                    </view>
                    <uv-textarea
                        height="376rpx"
                        :textStyle="{ color: fontColor }"
                        border="none"
                        v-model="userEvaluate"
                        :maxlength="-1"
                        :placeholder="$t('pages_order.order_evaluation.please_enter_content')"
                    ></uv-textarea><!-- 请输入内容 -->
                </view>
            </view>
        </view>
        <view style="padding: 65rpx 35rpx">
            <uv-button
                :custom-style="customStyle"
                @click="submit"
                type="primary"
                shape="circle"
                color="#381615"
                :text="$t('pages_order.order_evaluation.submit_comment')"
            ></uv-button><!-- 提交评论 -->
        </view>
        <uv-toast ref="toast"></uv-toast>
    </view>
</template>

<script>
import Navbar from '@/pages/components/Navbar.vue'
import { globalMixin } from '../pages/mixins/globalMixin';

export default {
    mixins: [globalMixin],
    components: {
        Navbar
    },
    data() {
        return {
            orderId: '',
            evaluate: '',
            num: 0,
            userEvaluate: '',
            userNum: 0,
        }
    },
    onLoad({ activityId }) {
        this.orderId = activityId;
    },
    methods: {
        submit() {
            if (!this.num && !this.userNum) {
                this.$refs.toast.show({
                    type: 'error',
                    icon: false,
                    message: this.$t('pages_order.order_evaluation.please_rate_first') // 请评分之后再提交！
                })
                return;
            }
            const params = {
                orderId: this.orderId,
                evaluate: this.evaluate,
                num: this.num,
                activityDetails: this.userEvaluate,
                activityNum: this.userNum
            }
            this.$api('evaluate', params, res => {
                if (res.code == 200) {
       //              const params = {
       //                  type: 'success',
       //                  message: res.result
       //              }
       //              this.$refs.toast.show({
       //                  ...params,
       //                  complete() {
       //                      uni.switchTab({
							// 	url:'/pages/index/cart'
							// })
       //                  }
       //              })
					uni.showToast({
						icon: 'none',
						title: res.result
					})
					setTimeout(uni.navigateBack, 800, -1)
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
/deep/.uv-rate__content__item {
    padding-right: 10rpx;
}
/deep/.uv-icon__icon--success {
    font-size: 32rpx !important;
    line-height: 32rpx !important;
}
.orderEvaluation {
    margin-top: 40rpx;
    .content {
        padding: 0 35rpx;
        color: #fff;
        padding-top: calc(var(--status-bar-height) + 100rpx);
        .baseInfo {
            .statusBox {
                display: flex;
                align-items: center;
                padding: 33rpx 47rpx 24rpx;
                i {
                    background: url('@/static/image/cart/evaluateIcon.png')
                        no-repeat;
                    background-size: 100% 100%;
                    display: block;
                    width: 33rpx;
                    height: 29rpx;
                    margin-right: 15rpx;
                }
            }
            .info {
                .score {
                    padding: 20rpx 0 35rpx;
                }
                /deep/.uv-textarea {
                    background: #493734;
                }
                .aa {
                    color: #fff !important;
                }
            }
        }
    }
}
</style>