<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="订单评价"></u-navbar>
        <view class="content">
            <view class="content-top">
                <view class='img-list'>
                    <view v-for="item in info.items" :key="item.id">
                        <view class="bg-white coreshop-card-box u-margin-20">
                            <view class="coreshop-card-view coreshop-order-view">
                                <view class="text-df text-bold text-black">商品信息</view>
                                <view class="solid-line"></view>
                                <view class="order">
                                    <view class="item" @click="goGoodsDetail(item.goodsId)">
                                        <view class="left"><image :src="item.imageUrl && item.imageUrl!='null' ?  item.imageUrl : '/static/images/common/empty-banner.png'" mode="aspectFill"></image></view>
                                        <view class="content">
                                            <view class="title u-line-4">{{item.name}}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="coreshop-card-view coreshop-order-view">
                                <view class="text-df text-bold text-black">商品评分</view>
                                <view class="solid-line"></view>
                                <view>
                                    <u-rate v-model="score[item.id]" @change="changeScore"></u-rate>
                                </view>
                            </view>

                            <view class="coreshop-card-view coreshop-order-view">
                                <view class="text-df text-bold text-black">评价内容</view>
                                <view class="solid-line"></view>
                                <view class="evaluate-c-t">
                                    <textarea v-model="textarea[item.id]" placeholder="宝贝满足你的期待吗? 说说你的使用心得" />
                                </view>
                            </view>

                            <view class="coreshop-card-view coreshop-order-view">
                                <view class="text-df text-bold text-black">上传图片（可上传{{maxUploadImg}}张）</view>
                                <view class="solid-line"></view>
                                <view class="evaluate-c-b">
                                    <view class="goods-img-item" v-if="images[item.id].length" v-for="(img, key) in images[item.id]" :key="key">
                                        <image class="del" src="/static/images/common/del.png" mode="" @click="removeImg(item.id, key)"></image>
                                        <image class="" :src="img" mode="" @click="clickImg(img)"></image>
                                    </view>
                                    <view class="upload-img" v-show="isupload[item.id]">
                                        <image class="icon" src="/static/images/common/camera.png" mode="" @click="uploadImg(item.id)"></image>
                                        <view class="">上传照片</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="foot-hight-view" />

            <view class="bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
                <view class="flex padding-sm flex-direction">
                    <button class="cu-btn bg-red" @click="toEvaluate" :disabled='submitStatus' :loading='submitStatus'>提交评论</button>
                </view>
            </view>

            <!--<view class="coreshop-bottomBox">
                <button class="coreshop-btn coreshop-btn-square coreshop-btn-b" hover-class="btn-hover" @click="toEvaluate" :disabled='submitStatus' :loading='submitStatus'>提交评论</button>
            </view>-->
        </view>
    </view>
</template>

<script>
    import { goods } from '@/common/mixins/mixinsHelper.js'
    export default {
        mixins: [goods],
        data() {
            return {
                orderId: 0,
                info: {}, // 订单详情
                images: [],
                score: [], // 商品评价
                textarea: [], // 商品评价信息
                isupload: [], // 启/禁用 图片上传按钮
                rate: 5,
                submitStatus: false
            }
        },
        onLoad(options) {
            this.orderId = options.orderId
            if (this.orderId) {
                this.orderInfo();
            } else {
                this.$refs.uToast.show({ title: '参数获取失败', type: 'error', back: true });
            }
        },
        computed: {
            // 获取vuex中状态
            maxUploadImg() {
                return this.$store.state.config.imageMax
            }
        },
        methods: {
            // 获取订单详情
            orderInfo() {
                let data = {
                    id: this.orderId
                }
                this.$u.api.orderDetail(data).then(res => {
                    if (res.status && res.data.payStatus >= 2 && res.data.shipStatus >= 3 && res.data.confirmStatus >= 2 && res.data.isComment === false) {
                        const _info = res.data

                        let images = []
                        let textarea = []
                        let upload = []
                        let score = []

                        _info.items.forEach(item => {
                            images[item.id] = []
                            textarea[item.id] = ''
                            upload[item.id] = true
                            score[item.id] = 5
                        })

                        this.info = _info

                        this.images = images
                        this.textarea = textarea
                        this.score = score
                        this.isupload = upload
                    } else {
                        this.$u.toast('订单不存在或状态不可评价!')
                    }
                })
            },
            // 上传图片
            uploadImg(key) {
                this.$upload.uploadFiles(null, res => {
                    if (res.status) {
                        //this.images[key].push(res.data.src + '?x-oss-process=image/resize,m_lfit,h_200,w_200')
                        this.images[key].push(res.data.src)
                        this.$refs.uToast.show({ title: res.msg, type: 'success', back: false })
                    } else {
                        this.$u.toast(res.msg)
                    }
                })
            },
            // 删除图片
            removeImg(id, key) {
                this.images[id].splice(key, 1)
            },
            // 图片点击放大
            clickImg(img) {
                // 预览图片
                uni.previewImage({
                    urls: img.split()
                });
            },
            // 改变评分
            changeScore(e) {
                this.score[e.id] = e.value
            },
            // 提交评价
            toEvaluate() {
                this.submitStatus = true;
                let items = [];
                let _this = this;

                this.images.forEach((item, key) => {
                    let model = {
                        orderItemId: key,
                        images: item,
                        score: _this.score[key],
                        textarea: _this.textarea[key]
                    }
                    items.push(model);
                })
                let data = {
                    orderId: _this.orderId,
                    items: items
                }
                this.$u.api.orderEvaluate(data).then(res => {
                    if (res.status) {
                        _this.$refs.uToast.show({
                            title: '评价填写成功', type: 'success', callback: function () {
                                // 更改订单列表页的订单状态
                                let pages = getCurrentPages(); // 当前页
                                let beforePage = pages[pages.length - 2]; // 上个页面

                                if (beforePage !== undefined && beforePage.route === 'pages/member/order/orderlist') {
                                    // #ifdef MP-WEIXIN
                                    beforePage.$vm.isReload = true
                                    // #endif

                                    // #ifdef H5
                                    beforePage.isReload = true
                                    // #endif

                                    // #ifdef MP-ALIPAY || MP-TOUTIAO
                                    _this.$db.set('orderUserEvaluate', true, true);
                                    // #endif
                                }

                                let before = pages[pages.length - 3]; // 上个页面
                                if (before !== undefined && before.route === 'pages/member/order/orderlist') {
                                    // #ifdef MP-WEIXIN
                                    before.$vm.isReload = true
                                    // #endif

                                    // #ifdef H5
                                    before.isReload = true
                                    // #endif

                                    // #ifdef MP-ALIPAY || MP-TOUTIAO
                                    _this.$db.set('orderUserEvaluate', true, true);
                                    // #endif
                                }
                                uni.navigateBack({
                                    delta: 1,
                                    animationType: 'pop-out',
                                    animationDuration: 200
                                });
                            }
                        })
                    } else {
                        _this.$u.toast(res.msg)
                    }
                });
            }
        },
        watch: {
            images: {
                handler() {
                    this.images.forEach((item, key) => {
                        this.isupload[key] = item.length >= this.maxUploadImg ? false : true
                    })
                },
                deep: true
            }
        }
    }
</script>

<style lang="scss">

    @import '../../../static/style/orderDetails.scss';


    page { background: #fff; }
    .order { width: auto; padding: 0; }
        .order .item { margin: 0; }
    .evaluate-c-t { width: 100%; height: 140rpx; }
        .evaluate-c-t textarea { width: 100%; height: 100%; font-size: 26rpx; padding: 10rpx; }
    .evaluate-c-b { overflow: hidden; }
    .upload-img { width: 146rpx; height: 146rpx; margin: 14rpx; text-align: center; color: #999999; font-size: 22rpx; border: 2rpx solid #E1E1E1; /* #ifdef MP-ALIPAY */ border-top: 8rpx solid #E1E1E1; /* #endif */ border-radius: 4rpx; display: inline-block; float: left; padding: 24rpx 0; }
    .goods-img-item { width: 174rpx; height: 174rpx; padding: 14rpx; float: left; position: relative; }
        .goods-img-item:nth-child(4n) { margin-right: 0; }
        .goods-img-item image { width: 100%; height: 100%; }
    .del { width: 30rpx !important; height: 30rpx !important; position: absolute; right: 0; top: 0; z-index: 999; }
    .evaluate-num-t { color: #333; font-size: 28rpx; margin-bottom: 20rpx; }
    .coreshop-bottomBox .coreshop-btn { width: 100%; }

    .icon { width: 50rpx; height: 50rpx; /* #ifdef MP-ALIPAY */ background-size: 100% 100%; /* #endif */ }


    .coreshop-card-box { padding: 0; box-shadow: 0 0 14.54rpx #f1f1f1; }
    .coreshop-card-view { padding: 18.18rpx; box-shadow: none; }
</style>
