<template>
    <div class="container">
        <div class="top">
            <span>评价服务</span>
            <span>和大家来分享你的购物心得吧～</span>
        </div>
        <div class="content">
            <div class="img" v-if="orderInfo.productInfo">
                <div class="icon" :style="{backgroundImage:'url('+orderInfo.productInfo.image+')'}"></div>
                <div class="title">{{orderInfo.productName}}</div>
                <div class="price">¥{{orderInfo.totlePrice}}</div>
            </div>

            <div class="comment">
                <el-rate v-model="start" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" show-text>

                </el-rate>
                <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 50}" placeholder="写写您的感受吧，你的心得对大家很重要哦." v-model="remark" style="margin-top:20px" maxlength="500">
                </el-input>

                <div class="upload">

                    <el-button icon="el-icon-picture" type="text" @click="dialogVisible=true">上传照片</el-button>
                    <span>,还能上传{{5-addImage.length}}张哦</span>
                    <el-checkbox style="float:right;margin-top:10px" v-model="isHide">匿名评论</el-checkbox>

                </div>

                <div style="margin-top:110px">
                    <el-button type="primary" @click="submit" style="float:right;width:190px">提交</el-button>
                </div>

                <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
                    <el-upload :limit='5' :action="url" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success='handleSuccess'>
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <div class="ps">已经上传{{addImage.length}}张，还可以上传{{5-addImage.length}}张</div>

                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import formValidator from '../formValidator'
const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://localhost:8080';

export default {
    created() {
        if (this.$route.query.column) {
            this.subColumn = this.$route.query.column.split(',')[1];
            this.subValue = this.$route.query.column.split(',')[0];
        }

        this.$http.get({
            url: '/userOrder/getOne',
            data: {
                id: this.$route.query.orderId
            }
        }).then(res => {
            if (res.success) {
                this.orderInfo = res.data
            }
        })



    },
    data() {
        return {
            saving: false,
            formData: {},
            rules: {
            },
            subColumn: '',
            subValue: '',
            orderInfo: {},
            start: 5,
            remark: '',
            dialogImageUrl: '',
            dialogVisible: false,
            addImage: [],
            isHide: false
        }
    },
    computed: {
        url() {
            return baseUrl + '/assets/uploadFile'
        },
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            var data = JSON.parse(JSON.stringify(this.formData));
            this.$http.post({
                url: '/productComment/save',
                data: {
                    productId: this.orderInfo.productId,
                    orderId: this.orderInfo.id,
                    userId: this.orderInfo.userId,
                    storeId: this.orderInfo.storeId,
                    context: this.remark,
                    starLevel: this.start,
                    anonymous: this.isHide ? 'Y' : 'N',
                    typeFlag: 0,
                }
            }).then(res => {
                if (res.success) {
                    this.saveImg(0, res.data)
                } else {
                    this.$message.warning('失败')
                }
            });
        },
        saveImg(i, id) {
            if (i >= this.addImage.length) {
                this.$http.post({
                    url: '/userOrder/update',
                    data: {
                        id: this.orderInfo.id,
                        statusFlag: 6
                    }
                }).then(res => {
                    if (res.success) {
                        this.$message.success('评论成功');
                        history.back()

                    }
                })
            }
            else {
                this.$http.post({
                    url: '/productCommentImage/save',
                    data: {
                        productId: this.orderInfo.productId,
                        orderId: this.orderInfo.id,
                        userId: this.orderInfo.userId,
                        storeId: this.orderInfo.storeId,
                        commentId: id,
                        imageUrl: this.addImage[i],
                    }
                }).then(res => {
                    if (res.success) {
                        this.saveImg(i + 1, id)

                    } else {
                        this.$message.warning('失败')
                    }
                });
            }
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
                return this.$http.post({
                    url: '/productComment/del',
                    data: { id: this.formData.id }
                })
            }).then(() => {
                this.$message.success('删除成功');
                this.$router.go(-1);
            }).catch(action => {
                if (action === 'cancel') {
                    this.$message.info('删除取消');
                } else {
                    this.$message.error('删除失败');
                }
            })
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            var list = []
            fileList.forEach(item => {
                item.response.data.forEach(todo => {

                    list.push(todo)
                })
            })
            this.addImage = list
        },
        handleSuccess(res) {
            res.data.forEach(item => {
                if (this.addImage.indexOf(item) == -1 && this.addImage.length < 5) {

                    this.addImage.push(item)
                }
                else if (this.addImage.length >= 5) {
                    this.$message({
                        message: '已经上传' + this.addImage.length + '张图片了，请预览后确认图片',
                        type: 'warning'
                    });
                }
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>
<style lang="less" scoped>
.container {
    .top {
        padding-bottom: 18px;
        span {
            &:first-child {
                font-size: 16px;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
                line-height: 21px;
                vertical-align: middle;
            }

            &:last-child {
                font-size: 12px;
                color: rgba(153, 153, 153, 1);
                line-height: 16px;
                vertical-align: middle;
            }
        }
    }

    .content {
        height: 505px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(234, 234, 234, 1);
        padding: 22px 60px 52px 33px;
        font-size: 0;

        .img {
            width: 153px;
            display: inline-block;
            vertical-align: top;

            .icon {
                width: 153px;
                height: 115px;
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
            }

            .title {
                width: 100%;
                font-size: 14px;
                color: rgba(51, 51, 51, 1);
                line-height: 19px;
                margin-top: 10px;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .price {
                font-size: 14px;
                font-weight: bold;
                color: rgba(251, 110, 8, 1);
                line-height: 19px;
                margin-top: 10px;
                text-align: center;
            }
        }

        .comment {
            display: inline-block;
            vertical-align: middle;
            width: 862px;
            margin-left: 66px;
        }
    }

    .ps {
        margin-top: 20px;
        font-size: 14px;
    }

    .upload {
        font-size: 12px;
        color: #999999;
        line-height: 16px;
        position: relative;
    }
}
</style>
