<template>
    <div class="order" v-if="info.productInfo">
        <div class="orderTop">
            <span style="margin-left:25px;">{{getTime(info.createTime)}}</span>
            <span style="margin-left:30px;">订单号：{{info.orderCode}}</span>

            <span style="float:right;position: relative;cursor: pointer;" v-if="type=='user'" @click="startChat(info.productInfo.storeInfo.id)">
                <span style="margin-right:66px;">店铺：{{info.productInfo.storeInfo.storeName}}</span>
                <img style="width:30px;height:25px;position: absolute;right: 30px;top: 9px;" src="../assetsPre/kefu.png" alt="">
            </span>

            <!-- <span style="float:right;position: relative;cursor: pointer;" v-else @click="goChat">
                <span style="margin-right:66px;">用户：{{info.userInfo.nickname}}</span>
                <img style="width:30px;height:25px;position: absolute;right: 30px;top: 9px;" src="../assetsPre/kefu.png" alt="">
            </span> -->
            <el-popover v-else placement="left" width="200" trigger="hover">
                <div>
                    <img :src="info.userInfo.icon" style="width:50px;height:50px;border-radius:100%;display:block;margin:auto;" alt="">
                    <div style="margin:10px;font-size:16px;font-weight:bold;text-align:center;color:#000">{{info.userInfo.nickname}}</div>
                    <el-rate style="text-align:center" :disabled="true" v-model="info.productComment.starLevel" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                    </el-rate>
                    <div style="text-align:center">{{info.productComment.commentCount}}人评论</div>
                </div>
                <span @click="goChat" style="float:right;position: relative;cursor: pointer;" slot="reference">
                    <span style="margin-right:66px;">用户：{{info.userInfo.nickname}}</span>
                    <img style="width:30px;height:25px;position: absolute;right: 30px;top: 9px;" src="../assetsPre/kefu.png" alt="">
                </span>
            </el-popover>
        </div>

        <div class="ordercontent">
            <div class="left" style="width:687px">
                <div class="goodsInfo">
                    <div class="goodsImg" :style="{backgroundImage:'url('+info.productInfo.image+')'}"></div>
                    <div class="title">
                        <div class="name">{{info.productInfo.title}}</div>
                        <div class="subName">{{info.specification}}</div>
                    </div>
                </div>
                <span style="width:56px;color:#FD9501">{{info.unitPrice}}</span>
                <span style="width:56px">{{info.quantity}}</span>
                <template v-if="info.productType==0 && info.statusFlag>1&&type=='user'&&info.statusFlag!=8">
                    <div class="preview" @click="goNext('orderPreview')">
                        <img src="../assetsPre/prePhoto.png" alt="">
                        <span>照片预览</span>
                    </div>
                </template>
                <template v-if="statusName=='待修图'&&type=='user'">
                    <div class="preview" @click="goNext('orderUpload')">
                        <img src="../assetsPre/excel.png" style="margin-left:32px;width:40px;height:39px;" alt="">
                        <span>单张修改备注</span>
                    </div>
                </template>

                <template v-if="statusName=='待修图'&&type=='shop'">
                    <div class="preview" @click="downloadImg('original')">
                        <img src="../assetsPre/prePhoto.png" alt="">
                        <span>下载原图</span>
                    </div>

                    <div class="preview" @click="downloadRemark('remark')">

                        <img src="../assetsPre/excel.png" style="margin-left:32px;width:40px;height:39px;" alt="">
                        <span>下载备注</span>
                    </div>
                </template>

            </div>
            <div class="right" style="width:270px;">
                <div class="price">
                    ¥{{info.dealPrice}}
                </div>
                <div>
                    <span class="btn">
                        <el-button type="primary" size="mini" style="color:#000;background-color:#fff;border:0;">{{statusName}}</el-button>
                        <el-button type="text" size="mini" v-if="info.productType==1" style="color:#000" @click="goNext('orderDetail')">查看订单</el-button>
                    </span>
                </div>
                <div>
                    <span class="btn" v-if="type=='user'">
                        <template v-if="statusName=='待付款'">
                            <div style="display:block">
                                <el-button type="primary" style="width:80px;" size="mini" @click="payOrder">去支付</el-button>
                            </div>
                            <div style="display:block;margin-top:5px;">
                                <el-button size="mini" @click="orderCancel">取消订单</el-button>
                            </div>
                        </template>
                        <template v-if="statusName=='待上传'">
                            <el-button type="primary" size="mini" @click="goNext('orderUpload')">上传照片</el-button>
                        </template>

                        <template v-if="statusName=='待审片'">
                            <el-button type="primary" size="mini" v-if="isFirstRepair" @click="goNext('orderExamine')">去审核</el-button>
                        </template>
                        <template v-if="statusName=='待评论'">
                            <div style="display:block">
                                <el-button type="warining" size="mini" @click="downloadImg('finished')">下载成片</el-button>
                            </div>
                            <div style="display:block;margin-top:5px">
                                <el-button type="primary" size="mini" @click="goNext('productComment')">评价对方</el-button>
                            </div>

                        </template>
                        <template v-if="statusName=='订单完成'">
                            <div style="display:block">
                                <el-button type="warining" size="mini" @click="downloadImg('finished')">下载成片</el-button>
                            </div>

                        </template>

                    </span>

                    <span class="btn" v-else>
                        <template v-if="statusName=='待付款'">
                            <el-button type="primary" size="mini" @click="changePrice">修改价格</el-button>
                        </template>
                        <template v-if="statusName=='待修图'">
                            <el-button type="primary" size="mini" @click="goNextquery('orderUploadChange',{type:1})">上传修图</el-button>
                        </template>
                        <template v-if="statusName=='订单完成'&&!info.commentFlag">
                            <div style="display:block">
                                <el-button type="warining" size="mini" @click="comment=true">评价对方</el-button>
                            </div>

                        </template>
                    </span>
                </div>
            </div>
        </div>

        <div class="orderRemark">
            <span style="color:#FD9501">备注要求</span>
            <span style="margin-left:20px;">{{info.remark}}</span>
        </div>

        <div class="repairItem" v-for="(item,index) in info.orderRepairList" v-if="item.statusFlag>0">
            <div class="box">
                {{index+1}}
            </div>

            <span>{{'第'+(index+1)+'次返修'}}</span>

            <div class="preview" v-if="item.statusFlag==1" @click="goNextquery('orderExamine',{repairId:item.id,isChange:1,type:'shop'})">
                <template v-if="type=='user'">
                    <img src="../assetsPre/excel.png" style="margin-left:50px;width:30px;height:29px;" alt="">
                    <span>查看备注</span>
                </template>

            </div>

            <div class="preview" v-if="type=='shop'" @click="downloadRemark('repairRemark',item.id)">
                <template>
                    <img src="../assetsPre/excel.png" style="margin-left:50px;width:30px;height:29px;" alt="">
                    <span>下载备注</span>
                </template>

            </div>

            <template v-if="type=='user'">
                <el-button v-if="item.statusFlag==1" type="text" style="float:right;margin:10px 20px 0;" size="mini">已提交</el-button>
                <el-button v-if="item.statusFlag==2" @click="goNextquery('orderExamine',{repairId:item.id})" type="primary" style="float:right;margin:10px 20px 0;" size="mini">去审核</el-button>
            </template>
            <template v-else>
                <el-button v-if="item.statusFlag==1" @click="goNextquery('orderUploadChange',{repairId:item.id,type:type})" type="primary" style="float:right;margin:10px 20px 0;" size="mini">去上传</el-button>
                <el-button v-if="item.statusFlag==2" type="text" style="float:right;margin:10px 20px 0;" size="mini">审核中</el-button>
            </template>
            <el-button v-if="item.statusFlag==3" type="text" style="float:right;margin:10px 20px 0;" size="mini">已结束</el-button>
        </div>

        <el-dialog title="压缩处理" :visible.sync="dialogVisible" width="20%" :close-on-click-modal='false' :show-close='false' style="text-align: center;">
            <div style="margin-top:30px;" v-if="tip">
                <i class="el-icon-loading"></i>
                图片{{tip}}正在处理，请耐心等待
            </div>

            <el-progress style="margin:10px auto" type="circle" :percentage="temp" :status="isSuccess?'success':''"></el-progress>

        </el-dialog>

        <el-dialog :title="'评价'+info.orderCode" :visible.sync="comment" width="20%">
            <div style="padding:20px 0">
                <img :src="info.userInfo.icon" style="width:50px;height:50px;border-radius:100%;display:block;margin:auto;" alt="">
                <div style="margin:10px;font-size:16px;font-weight:bold;text-align:center;color:#000">{{info.userInfo.nickname}}</div>
                <el-rate style="text-align:center" v-model="commentInfo.starLevel" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                </el-rate>

                <el-input type="textarea" style="margin-top:20px;" :rows="2" placeholder="请输入评价内容" v-model="commentInfo.content">
                </el-input>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="comment = false">取 消</el-button>
                <el-button type="primary" @click="submitComment">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'orderItem',
    props: {
        info: {
            type: Object,
            default: {}
        },
        type: {
            type: String,
            default: 'user'
        }
    },
    data() {
        return {
            downloadCode: '',
            dialogVisible: false,
            isSuccess: false,
            tip: '',
            temp: 0,
            starLevel: 0,
            comment: false,
            commentInfo: {
                starLevel: 5,
                content: ''
            },
            isComment: false
        }
    },
    computed: {
        ...mapState(['orderStatus', 'typeFlag']),
        statusName() {
            var str = ''
            if (this.info.productType) {
                if (this.typeFlag[parseInt(this.info.productType)]) {
                    str = this.orderStatus[this.typeFlag[parseInt(this.info.productType)]][this.info.statusFlag]
                }
            }

            return str


        },
        isFirstRepair() {
            var result = true
            if (this.info.orderRepairList != 0) {
                if (this.info.orderRepairList[0].statusFlag != 0) {
                    result = false
                }
            }
            return result
        }
    },
    methods: {
        payOrder() {
            this.$router.push({
                name: 'payOrder',
                query: {
                    orderId: this.info.id
                }
            })

        },
        goNext(str) {
            this.$router.push({
                name: str,
                query: {
                    orderId: this.info.id
                }
            })
        },
        goNextquery(str, query) {
            var query = query
            query.orderId = this.info.id
            this.$router.push({
                name: str,
                query: query
            })
        },
        downloadImg(typeFlag) {
            this.$confirm('下载可能需要很长时间,确定要下载吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const baseUrl = process.env.NODE_ENV === 'production' ? '../' : `http://${location.hostname}:8080`;

                this.downloadCode = Date.parse(new Date())
                window.location.href = baseUrl + '/orderImage/zipFilesDown?orderId=' + this.info.id + '&typeFlag=' + typeFlag + '&code=' + this.downloadCode
                this.getLine(this.downloadCode)
            }).catch(() => {

            });


        },
        getLine(code) {
            this.dialogVisible = true
            this.$http.get({
                url: '/imageDownLog/getOne',
                data: {
                    imageCode: code,
                    orderId: this.info.id
                }
            }).then(res => {
                if (res.success) {
                    if (res.data) {
                        this.tip = res.data.imageName
                        if (res.data.statusFlag == 1) {
                            this.temp = parseInt(res.data.nowNum / res.data.totalNum * 100)
                        }
                        else {
                            this.temp = parseInt((res.data.nowNum - 1) / res.data.totalNum * 100)
                        }
                        if (this.temp == 100) {
                            this.isSuccess = true
                            setTimeout(() => {
                                this.dialogVisible = false
                            }, 1500)
                        }
                        else {
                            setTimeout(() => {
                                this.getLine(code)
                            }, 1500)
                        }



                    }
                    else {
                        setTimeout(() => {
                            this.getLine(code)
                        }, 1500)
                    }

                } else {

                }
            });
        },
        downloadRemark(typeFlag, repairId) {

            const baseUrl = process.env.NODE_ENV === 'production' ? '../' : `http://${location.hostname}:8080`;

            if (typeFlag == 'remark') {
                window.location.href = baseUrl + '/orderImage/exportRemark?orderId=' + this.info.id
            }
            if (typeFlag === 'repairRemark') {
                window.location.href = baseUrl + '/orderRepairDetail/exportRemark?repairId=' + repairId
            }

        },
        goChat() {
            window.open(window.location.origin + window.location.pathname + '?storeId=' + this.info.storeId + '#/storeChat?chatUserId=' + this.info.userId)
        },
        changePrice() {
            this.$prompt('请输入修改价格', '订单号:' + this.info.orderCode, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^[0-9]*$/,
                inputErrorMessage: '价格格式不正确'
            }).then(({ value }) => {
                this.$http.post({
                    url: '/userOrder/update',
                    data: {
                        id: this.info.id,
                        dealPrice: value
                    }
                }).then(res => {
                    if (res.success) {
                        this.$message({
                            type: 'success',
                            message: '修改成功'
                        });
                        this.$emit('changeorderinfo', this.info.id)
                    }
                }).catch(e => {
                    console.log(e)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        startChat(id) {
            this.$emit('startChat', id)
        },
        orderCancel() {
            this.$confirm('确定取消该订单吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post({
                    url: '/userOrder/cancel',
                    data: {
                        id: this.info.id
                    }
                }).then(res => {
                    if (res.success) {
                        this.$message.success('取消成功');
                        this.$http.get({
                            url: '/userOrder/getOne',
                            data: {
                                id: this.info.id
                            }
                        }).then(res => {
                            if (res.success) {
                                if (res.data.productComment.starLevel) {
                                    res.data.productComment.starLevel = Number(res.data.productComment.starLevel)
                                }
                                else {
                                    res.data.productComment.starLevel = 0
                                }
                                this.$emit('changeData', res.data)
                            }
                        })

                    } else {
                        this.$message.warning('失败')
                    }
                });
            }).catch(() => {

            });
        },
        submitComment() {
            this.$http.post({
                url: '/productComment/save',
                data: {
                    productId: this.info.productId,
                    orderId: this.info.id,
                    userId: this.info.userId,
                    storeId: this.info.storeId,
                    context: this.commentInfo.content,
                    starLevel: this.commentInfo.starLevel,
                    typeFlag: 1,
                }
            }).then(res => {
                this.comment = false
                if (res.success) {
                    this.$message.success('评价成功')
                    this.$emit('changeorderinfo', this.info.id)
                } else {
                    this.$message.warning('失败')
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
.order {
    width: 957px;
    border: 1px solid rgba(245, 166, 35, 1);
    margin: 0 auto 23px;

    .orderTop {
        height: 40px;
        background: rgba(255, 249, 241, 1);
        line-height: 40px;
        // display: flex;

        span {
            font-size: 12px;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
        }
    }

    .ordercontent {
        font-size: 0;
        border-top: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
        .left {
            display: inline-block;
            vertical-align: middle;

            .goodsInfo {
                width: 240px;
                padding: 17px 5px 9px 25px;
                display: inline-block;
                font-size: 0;
                height: 60px;

                .goodsImg {
                    width: 80px;
                    height: 60px;
                    border-radius: 2px;
                    background-position: center center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    display: inline-block;
                    vertical-align: middle;
                }

                .title {
                    width: 140px;
                    margin-left: 17px;
                    display: inline-block;
                    vertical-align: top;

                    .name {
                        font-size: 14px;
                        font-family: MicrosoftYaHei;
                        color: rgba(51, 51, 51, 1);
                        line-height: 19px;
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .subName {
                        font-size: 12px;
                        font-family: MicrosoftYaHei;
                        color: rgba(11, 158, 192, 1);
                        line-height: 16px;
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-top: 11px;
                    }
                }
            }

            span {
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 16px;
                display: inline-block;
                text-align: center;
            }
        }
        .right {
            display: inline-block;
            height: 87px;
            line-height: 87px;
            vertical-align: middle;

            div {
                width: 33%;
                height: 100%;
                display: inline-block;
                text-align: center;
                border-left: 1px solid #eaeaea;
                box-sizing: border-box;
                vertical-align: middle;

                &.price {
                    font-size: 20px;
                    font-family: MicrosoftYaHei;
                    color: #e8200e;
                    font-weight: bold;
                }

                .btn {
                    display: inline-block;
                    vertical-align: middle;
                    button {
                        display: block;
                    }
                }
            }
        }
    }

    .orderRemark {
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        padding: 14px 25px 11px;
    }

    .preview {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        img {
            width: 44px;
            height: 40px;
            vertical-align: middle;
        }
        span {
            vertical-align: middle;
            margin-left: 9px;
        }
    }

    .repairItem {
        height: 49px;
        line-height: 49px;
        padding-left: 24px;
        border-top: 1px solid #ebebeb;
        .box {
            width: 20px;
            height: 20px;
            border-radius: 100%;
            border: 1px solid #0b9ec0;
            text-align: center;
            line-height: 20px;
            font-size: 14px;
            color: #0b9ec0;
            display: inline-block;
            margin-right: 5px;
        }

        span {
            font-size: 12px;
            color: #333333;
        }
    }
}
</style>
