<template>
    <div class="container">
        <template v-if="isFinish">

        </template>
        <template v-else>
            <div class="top" v-if="orderInfo.productInfo">
                <span>订单号:{{orderInfo.orderCode}}</span>
                <span style="margin-left:20px;">{{orderInfo.productInfo.title}}</span>
                <template v-if="!isChange">
                    <span style="font-size:14px;color:#666;margin-left:20px">已审核/全部：{{orderInfo.quantity-needCheckNum}}/{{orderInfo.quantity}}</span>
                    <el-button style="float:right;margin:20px 20px 0 30px;" v-if="isSuccess" type="primary" class="btn" @click="submit">审核通过</el-button>
                    <el-button style="float:right;margin:20px 20px 0 30px;" v-if="isFail" type="warning" class="btn" @click="getRepair">确认提交第{{repairNum}}次返修</el-button>
                </template>
                <el-select v-if="!isChange" size="mini" style="float:right;margin-top:25px;width:120px" clearable v-model="statusFlag" placeholder="筛选状态" @change="getImage">
                    <el-option key="0" label="未审核" value="0">
                    </el-option>
                    <el-option key="1" label="审核通过" value="1">
                    </el-option>
                    <el-option key="2" label="审核失败" value="2">
                    </el-option>
                </el-select>
            </div>

            <div class="content">

                <template v-if="orderImage.length>0">
                    <div class="imgList">
                        <div class="title">原<br/>片</div>

                        <img-item v-for="(item,index) in orderImage" @changeRemark="getImage" :label='"originalImage"' :index='index' :img='item' :imgStyle='"examine"' @delImg='getImage' style="display:inline-block;margin:0 30px 0 0;vertical-align: middle;"></img-item>

                    </div>

                    <div class="imgList" style="margin-top:50px;">
                        <div class="title" style="color:#FB6E08">成<br/>片</div>
                        <img-item :isChange='isChange' v-for="(item,index) in orderImage" @changeRemark="changeRemark" :label='"finishedImage"' :index='index' :img='item' :imgStyle='"examine"' @delImg='getImage' style="display:inline-block;margin:0 30px 0 0;vertical-align: middle;"></img-item>
                    </div>
                </template>
                <div v-else class="nothing">
                    <img src="../assetsPre/nothingImg.png" alt="">
                    <p>没有图片哦!</p>
                </div>

            </div>

            <el-pagination style="padding:0 0 20px" background :page-size="7" @current-change="currentPageChange" :current-page="currentPage" layout="total, prev, pager, next" :total="totalNumber">
            </el-pagination>
        </template>

    </div>
</template>
<script>
import { mapState } from 'vuex'
import imgItem from '../components/ImgItem'
import formValidator from '../formValidator'
const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://localhost:8080';
export default {
    created() {
        this.$http.get({
            url: '/userOrder/getOne',
            data: {
                id: this.$route.query.orderId
            }
        }).then(res => {
            if (res.success) {
                this.orderInfo = res.data
                if (res.data) {
                    if (res.data.orderRepairList.length != 0) {
                        if (res.data.orderRepairList[0].statusFlag != 0) {
                            this.isFirstCheck = false
                        }
                    }
                }

                if (this.$route.query.repairId) {
                    this.repairId = this.$route.query.repairId
                    res.data.orderRepairList.forEach(item => {
                        if (this.repairId == item.id) {
                            if (item.statusFlag == 3) {
                                this.isFinish = true
                            }
                        }

                    })
                }
                else {
                    if (this.orderInfo.orderRepairList.length > 0) {
                        this.repairId = this.orderInfo.orderRepairList[0].id
                    }

                    if (!this.isFirstCheck) {
                        this.isFinish = true
                    }

                }

                if (this.isFinish) {
                    this.$alert('该阶段审核已经结束', '审核结束', {
                        confirmButtonText: '确定',
                        callback: action => {
                           window.close()
                        }
                    });
                }
                else {
                    this.getImage()
                }

            }
        })

        if (this.$route.query.isChange) {
            this.isChange = true
        }



    },
    computed: {
        ...mapState(['userInfo']),
        url() {
            return baseUrl + '/assets/uploadFile'
        },
        allImage() {
            var list = []
            this.addImage.forEach(item => {
                list.push(item.originalImage)
            })
            return list
        },
        canUploadNum() {
            var num = 0
            if (this.orderInfo.quantity) {
                num = this.orderInfo.quantity - this.orderImage.length
            }
            return num
        },
        repairNum() {
            var num = 0
            if (this.orderInfo.orderRepairList.length) {
                num = this.orderInfo.orderRepairList[this.orderInfo.orderRepairList.length - 1].typeFlag + 1
                if (this.orderInfo.orderRepairList[this.orderInfo.orderRepairList.length - 1].statusFlag != 0) {
                    num++
                }
            }

            return num
        }
    },
    data() {
        return {
            orderInfo: {},
            dialogVisible: false,
            addImage: [],
            orderImage: [],
            currentPage: 1,
            totalNumber: 0,
            isSuccess: false,
            isFail: false,
            repairId: 0,
            isChange: false,
            statusFlag: '',
            needCheckNum: 0,
            isFirstCheck: true,
            isFinish: false
        }
    },
    methods: {
        changeRemark() {
            if (!this.repairId) {
                this.$http.get({
                    url: '/userOrder/getOne',
                    data: {
                        id: this.$route.query.orderId
                    }
                }).then(res => {
                    if (res.success) {
                        this.orderInfo = res.data
                        if (this.$route.query.repairId) {
                            this.repairId = this.$route.query.repairId
                        }
                        else {
                            if (this.orderInfo.orderRepairList.length > 0) {
                                this.repairId = this.orderInfo.orderRepairList[0].id
                            }

                        }
                        this.getImage()
                    }
                })


            }
            else {
                this.getImage()
            }
        },
        currentPageChange(page) {
            this.currentPage = page;
            this.getImage();
        },
        getImage() {
            var data = {
                orderId: this.$route.query.orderId,
                currentPage: this.currentPage,
                pageNumber: 7,
            }
            if (this.repairId) {
                data.repairId = this.repairId
            }
            if (this.$route.query.repairId) {
                data.baseRepairId = this.$route.query.repairId
            }
            if (this.statusFlag) {
                data.statusFlag = this.statusFlag
            }
            this.orderImage = []
            this.$http.get({
                url: '/orderImage/page',
                data: data
            }).then(res => {
                if (res.success) {
                    this.orderImage = res.data.pp
                    this.totalNumber = res.data.page.totalNumber;
                }
            })
            this.isSuccess = false
            this.isFail = false
            this.$http.get({
                url: '/orderImage/all',
                data: {
                    orderId: this.$route.query.orderId,
                    statusFlag: 0
                }
            }).then(res => {
                if (res.success) {
                    this.needCheckNum = res.data.length
                    if (res.data.length == 0) {
                        this.$http.get({
                            url: '/orderImage/all',
                            data: {
                                orderId: this.$route.query.orderId,
                                statusFlag: 2
                            }
                        }).then(res => {
                            if (res.data.length == 0) {
                                this.isSuccess = true
                            }
                            else {
                                this.isFail = true
                            }
                        })
                    }
                }
            })


        },
        chooseImg(index) {
            console.log(index)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            var list = []
            fileList.forEach(item => {
                item.response.data.forEach(todo => {
                    var jsop = {
                        originalImage: todo,
                        remark: ''
                    }
                    list.push(jsop)
                })
            })
            this.addImage = list
        },
        handleSuccess(res) {
            res.data.forEach(item => {
                if (this.allImage.indexOf(item) == -1 && this.addImage.length <= this.canUploadNum) {
                    var jsop = {
                        originalImage: item,
                        remark: ""
                    }
                    this.addImage.push(jsop)
                }
                else if (this.addImage.length > this.canUploadNum) {
                    this.$message({
                        message: '已经上传' + this.addImage.length + '张图片了，请预览后确认图片',
                        type: 'warning'
                    });
                }
            })
        },
        delImg(index) {
            this.addImage.splice(index, 1)
        },
        upload() {
            this.saveImage(0)
        },
        saveImage(i) {
            if (i == this.allImage.length) {
                this.$message.success('成功');
                this.dialogVisible = false
                this.getImage()
            }
            else {
                var data = {
                    originalImage: this.allImage[i],
                    orderId: this.orderInfo.id,
                    userId: this.userInfo.id,
                    storeId: this.orderInfo.storeId

                }
                this.$http.post({
                    url: '/orderImage/save',
                    data: data
                }).then(res => {
                    if (res.success) {
                        this.saveImage(i + 1)
                    } else {
                        this.$message.warning('失败')
                    }
                });
            }
        },
        submit() {
            if (this.$route.query.repairId) {
                this.$http.post({
                    url: '/orderRepair/update',
                    data: {
                        id: this.$route.query.repairId,
                        statusFlag: 3
                    }
                }).then(res => {
                    if (res.success) {

                    }
                })
            }
            this.$http.post({
                url: '/userOrder/update',
                data: {
                    id: this.orderInfo.id,
                    statusFlag: 3
                }
            }).then(res => {
                if (res.success) {
                    // this.$message.success('提交成功');
                    // history.back()

                    this.$http.post({
                        url: '/userOrder/confirm',
                        data: {
                            id: this.orderInfo.id,
                        }
                    }).then(res2 => {
                        if (res2.success) {
                            this.$message.success('提交成功');
                            location.reload()
                        }
                    })
                }
            })

        },
        getRepair() {
            this.$http.post({
                url: '/userOrder/repair',
                data: {
                    id: this.orderInfo.id,
                    statusFlag: 4
                }
            }).then(res => {
                if (res.success) {
                    this.$message.success('提交成功');
                     location.reload()

                }
            })
        }
    },
    components: {
        imgItem
    }
}
</script>
<style lang="less" scoped>
.container {
    max-width: 1190px;
    margin: 15vh auto;
    background: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(234, 234, 234, 1);
    .top {
        height: 78px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(234, 234, 234, 1);
        padding: 0 30px;
        span {
            font-size: 18px;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            line-height: 78px;
        }
        .btn {
            float: right;
            margin-top: 20px;
        }
    }

    .content {
        padding: 0 30px;
        min-height: 450px;
        .title {
            font-size: 14px;
            font-family: MicrosoftYaHei-Bold;
            font-weight: bold;
            color: rgba(11, 158, 192, 1);
            line-height: 19px;
            margin-bottom: 20px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 20px;
        }

        .imgList {
            margin-top: 20px;
        }
    }

    .bottom {
        height: 58px;
        border-top: 1px solid rgba(234, 234, 234, 1);
        line-height: 58px;
        padding: 0 30px;
        margin-top: 20px;
        span {
            font-size: 14px;
            color: #999;
        }
    }

    .nothing {
        margin-top: 20px;
        img {
            width: 167px;
            height: 167px;
            display: block;
            margin: auto;
        }

        p {
            font-size: 14px;
            text-align: center;
            color: rgba(51, 51, 51, 1);
            line-height: 19px;
            margin-top: 24px;
        }
    }
}
</style>
