<template>
    <div class="imgContent">
        <template v-if="img[label]">
            <div class="img" v-if='!(imgStyle=="storeUpload"&&img.statusFlag==2)'>
                <!-- <div class="image" v-if="img" @click="choose" :style="imageStyle" ref="img"></div> -->
                <img :src="img[label]+'?x-oss-process=image/resize,l_120'" @click="choose" alt="">
            </div>
            <div class="remark" v-if='!(imgStyle=="storeUpload"&&img.statusFlag==2)'>{{img.imageName}}
                <span v-if="label=='originalImage'">{{img.remark}}</span>
                <span v-if="label=='finishedImage'">{{img.detailRemark}}</span>

            </div>
            <div v-if="imgStyle=='examine'&&label=='finishedImage'" class="check">
                <template v-if='!isChange'>
                    <el-button v-if="img.statusFlag==1" icon="el-icon-check" type="success" circle size="mini"></el-button>
                    <el-button @click="changeStatus(1)" v-else icon="el-icon-check" type="success" circle plain size="mini"></el-button>
                    <el-button v-if="img.statusFlag==2" type="danger" icon="el-icon-close" circle size="mini"></el-button>
                    <el-button @click="dialogFormVisible=true,detailRemarkFlag=''" v-else type="danger" icon="el-icon-close" circle plain size="mini"></el-button>
                </template>

                <el-button @click="dialogFormVisible=true,detailRemarkFlag='1'" icon="el-icon-edit" circle plain size="mini"></el-button>

            </div>
            <div class="check" v-if="imgStyle=='upload'">
                <el-button v-if="canCancel" @click="delImg" type="danger" icon="el-icon-delete" circle plain size="mini"></el-button>
                <el-button v-if="!storeType" @click="dialogFormVisible=true" icon="el-icon-edit" circle plain size="mini"></el-button>
                <el-button v-else @click="dialogFormVisible=true" icon="el-icon-info" circle plain size="mini"></el-button>
            </div>

            <div class="check" v-if="imgStyle=='storeUpload'">
                <el-button v-if='img.statusFlag!=2' @click="delFinishImg" type="danger" icon="el-icon-delete" circle plain size="mini"></el-button>
                <el-button v-if="img.detailRemark" @click="dialogFormVisible=true" icon="el-icon-info" circle plain size="mini"></el-button>
            </div>

            <div class="check" v-if="imgStyle=='showInfo'">
                <el-button @click="dialogFormVisible=true" icon="el-icon-info" circle plain size="mini"></el-button>
            </div>

            <el-dialog :title="(storeType?'查看':'添加/修改')+'备注'" :visible.sync="dialogFormVisible" width='30%'>
                <el-form label-width="80px">
                    <el-form-item :label="imgStyle=='examine'?'返修备注':'图片备注'">
                        <el-input :disabled="storeType" type="textarea" v-model="remark" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" v-if="!storeType">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveRemark">添 加</el-button>
                </div>
            </el-dialog>

            <el-dialog v-if="label=='originalImage'" :title="img.imageName+' '+imgStyleStr+'预览'" :visible.sync="preView" :width="imageStyle.width+40+'px'">
                <!-- <img-zoom v-if="label=='finishedImage'" :src="img[label]+'?x-oss-process=image/resize,l_'+(allHeight-200)" :bigsrc="img[label]+'?x-oss-process=image/resize,l_'+(allHeight-200)*2" :configs="configs"></img-zoom> -->
                <!-- <img v-if="label=='finishedImage'" :src="img[label]+'?x-oss-process=image/resize,l_'+(allHeight-200)" alt=""> -->
                <img :src="img[label]+'?x-oss-process=image/resize,l_500'" alt="">
            </el-dialog>

            <div class="box" v-if="preView&&label=='finishedImage'" @click="preView=false">
                <div draggable='false' :style="{transform:'scale('+nowNum+')'}" class="img-content" @click.stop="" @dragenter='dragStop' @dragover='dragStop' @mousewheel='scrollEvent' @mousedown="drugEvent" @mousemove="drugmoveEvent" @mouseup="isDrug=false">
                    <img draggable="false" :id='"img"+label+img.id' :style="{transform:'translate('+bigImgStyle.left+'px,'+bigImgStyle.top+'px)',height:realImg.height+'px',width:realImg.width+'px'}" :src="img[label]+'?x-oss-process=image/resize,m_lfit,h_'+bigImgStyle.height*2+',w_'+bigImgStyle.width*2" alt="">
                </div>
                <el-button icon="el-icon-close" @click="preView=false" circle class="closeBtn"></el-button>

                <div v-if="imgStyle=='examine'&&label=='finishedImage'" class="checkContent" @click.stop="">
                    <template v-if='!isChange'>
                        <el-button style="margin-right:20px;" v-if="img.statusFlag==1" icon="el-icon-check" type="success" circle></el-button>
                        <el-button style="margin-right:20px;" @click.stop="changeStatus(1)" v-else icon="el-icon-check" type="success" circle plain></el-button>
                        <el-button style="margin-right:20px;" v-if="img.statusFlag==2" type="danger" icon="el-icon-close" circle></el-button>
                        <el-button style="margin-right:20px;" @click.stop="dialogFormVisible=true,detailRemarkFlag=''" v-else type="danger" icon="el-icon-close" circle plain></el-button>
                    </template>

                    <el-button @click.stop="dialogFormVisible=true,detailRemarkFlag='1'" icon="el-icon-edit" circle plain></el-button>

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

    </div>

</template>

<script>
import imgZoom from '../components/ImgZoom'
export default {
    name: 'imgItem',
    props: {
        img: {
            type: Object,
            default: {}
        },
        imgStyle: {
            type: String,
            default: ''
        },
        label: {
            type: String,
            default: 'originalImage'
        },
        index: {
            type: Number,
            default: 0
        },
        canCancel: {
            type: Boolean,
            default: false
        },
        isChange: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            detailRemarkFlag: "",
            imageStyle: {
                backgroundColor: '#ebebeb'
            },
            dialogFormVisible: false,
            remark: '',
            preView: false,
            configs: {
                width: 400,
                height: 400,
                maskWidth: 200,
                maskHeight: 200,


                maskColor: 'red',
                maskOpacity: 0.2,
                imgWithd: 500,
                imgHeight: 500
            },
            imgInfo: {
                width: 0,
                height: 0
            },
            storeType: false,
            bigImgStyle: {
                width: 0,
                height: 0,
                left: 0,
                top: 0,
            },
            nowNum: 1,
            drag: {
                X: 0,
                Y: 0,
            },
            isDrug: false,
            realImg: {
                width: 0,
                height: 0
            }
        }
    },
    computed: {
        imgStyleStr() {
            var str = '原片'
            if (this.label == 'finishedImage') {
                str = '成片'
            }
            return str
        }
    },
    created() {
        this.getImg()
        if (this.label == 'originalImage') {
            this.remark = this.img.remark
        }
        else {
            this.remark = this.img.detailRemark
        }

        if (this.$route.query.type) {
            if (this.$route.query.type == 'user') {
                this.storeType = false
            }
            else { this.storeType = true }

        }

        this.allHeight = window.innerHeight

    },
    methods: {
        dragStop(e) {
            e.preventDefault()
        },
        dragStartEvent(e) {
            this.drag = {
                X: e.offsetX,
                Y: e.offsetY
            }
        },
        drugmoveEvent(e) {

            if (this.isDrug) {
                var left = this.bigImgStyle.left + e.offsetX - this.drag.X
                var top = this.bigImgStyle.top + e.offsetY - this.drag.Y


                var imgWidth = parseInt(document.getElementById('img' + this.label + this.img.id).offsetWidth * this.nowNum)
                var imgHeight = parseInt(document.getElementById('img' + this.label + this.img.id).offsetHeight * this.nowNum)

                if ((imgHeight - window.innerHeight) / 2 < top * this.nowNum || 0 - (imgHeight - window.innerHeight) / 2 > top * this.nowNum) {
                    top = this.bigImgStyle.top
                }
                if ((imgWidth - window.innerWidth) / 2 < left * this.nowNum || 0 - (imgWidth - window.innerWidth) / 2 > left * this.nowNum) {
                    left = this.bigImgStyle.left
                }


                if (imgWidth <= window.innerWidth) {
                    left = 0
                }
                if (imgHeight <= window.innerHeight) {
                    top = 0
                }




                this.bigImgStyle.left = left
                this.bigImgStyle.top = top
                console.log(imgHeight, top)
            }
        },
        drugEvent(e) {
            this.drag = {
                X: e.offsetX,
                Y: e.offsetY
            }
            console.log(e)
            this.isDrug = true
        },
        scrollEvent(e) {

            if (e.deltaY < 0) {
                if (this.nowNum < 2) {
                    this.nowNum = this.nowNum + 0.1
                }
            }
            else {
                if (this.nowNum > 1) {
                    this.nowNum = this.nowNum - 0.1
                    var imgWidth = parseInt(document.getElementById('img' + this.label + this.img.id).offsetWidth * this.nowNum)
                    var imgHeight = parseInt(document.getElementById('img' + this.label + this.img.id).offsetHeight * this.nowNum)

                    if ((imgHeight - window.innerHeight) / 2 > this.bigImgStyle.top * this.nowNum || 0 - (imgHeight - window.innerHeight) / 2 < this.bigImgStyle.top * this.nowNum) {
                        if (this.bigImgStyle.top > 0) {
                            this.bigImgStyle.top = (imgHeight - window.innerHeight) / 2 / this.nowNum
                        }
                        else {
                            this.bigImgStyle.top = 0 - (imgHeight - window.innerHeight) / 2 / this.nowNum
                        }
                    }
                    if ((imgWidth - window.innerWidth) / 2 > this.bigImgStyle.left * this.nowNum || 0 - (imgWidth - window.innerWidth) / 2 < this.bigImgStyle.left * this.nowNum) {
                        if (this.bigImgStyle.left > 0) {
                            this.bigImgStyle.left = (imgWidth - window.innerWidth) / 2 / this.nowNum
                        }
                        else {
                            this.bigImgStyle.left = 0 - (imgWidth - window.innerWidth) / 2 / this.nowNum
                        }
                    }
                }
            }

        },
        choose() {
            // if (this.imgStyle == 'upload') {
            //     this.dialogFormVisible = true
            // }
            // if (this.imgStyle == 'preView' || (this.imgStyle == 'examine' && this.label == 'finishedImage')) {
            this.preView = true
            this.nowNum = 1
            this.bigImgStyle.left = 0
            this.bigImgStyle.top = 0
            // }
        },
        getImg() {
            if (this.img[this.label]) {
                var img = new Image()
                img.onload = () => {
                    var key = img.width / img.height
                    var width = 500
                    var height = 500
                    var width1 = window.innerWidth
                    var height1 = window.innerHeight

                    this.imgInfo = {
                        width: img.width / 2,
                        height: img.height / 2
                    }
                    if (key > 1) {
                        height = img.height / img.width * width
                    }
                    else {
                        width = img.width / img.height * height
                        // width1 = img.width / img.height * height1
                    }
                    console.log(width)
                    this.imageStyle = {
                        backgroundImage: `url(${this.img[this.label]})`,
                        width: width,
                        height: height + 'px'
                    }
                    this.configs.imgWithd = width
                    this.configs.imgHeight = height

                    this.bigImgStyle = {
                        width: width1,
                        height: height1,
                        top: 0,
                        left: 0,
                    }
                }
                img.src = this.img[this.label]

                var img2 = new Image()
                img2.onload = () => {
                    this.realImg = {
                        width: img2.width,
                        height: img2.height
                    }

                }

                img2.src = this.img[this.label] + '?x-oss-process=image/resize,m_lfit,h_' + window.innerHeight + ',w_' + window.innerWidth
            }
        },
        delImg() {
            if (this.img.id) {
                this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
                    return this.$http.post({
                        url: '/orderImage/del',
                        data: { id: this.img.id }
                    })
                }).then(() => {
                    console.log('chencgg ')
                    this.dialogFormVisible = false
                    this.$message.success('删除成功');
                    this.$emit('delImg', this.img.id)
                })
            }
        },
        saveRemark() {
            if (this.img.id && this.imgStyle == 'upload') {
                if (!this.remark) {
                    this.$message.success('成功');
                    this.dialogFormVisible = false
                    return
                }
                var data = {
                    remark: this.remark,
                    id: this.img.id
                }

                if (!data.remark) {
                    data.remark = ''
                }

                this.$http.post({
                    url: '/orderImage/update',
                    data: data
                }).then(res => {
                    if (res.success) {
                        this.dialogFormVisible = false
                        this.$message.success('成功');
                        this.$emit('changeRemark', { remark: this.remark, id: this.img.id })
                    } else {
                        this.$message.warning('失败')
                    }
                });
            }
            else {
                var data = {
                    id: this.img.id,
                    orderId: this.img.orderId,
                    storeId: this.img.storeId,
                    userId: this.img.userId,
                    statusFlag: 2,
                    // detailRemark: this.remark
                }
                if (this.remark) {
                    data.detailRemark = this.remark
                }
                if (this.detailRemarkFlag) {
                    data.detailRemarkFlag = this.detailRemarkFlag
                }
                this.$http.post({
                    url: '/orderImage/repair',
                    data: data
                }).then(res => {
                    if (res.success) {
                        this.dialogFormVisible = false
                        this.$message.success('成功');
                        this.$emit('changeRemark')
                    } else {
                        this.$message.warning('失败')
                    }
                });
            }
        },
        changeStatus(index) {
            var data = {
                statusFlag: index,
                id: this.img.id
            }
            this.$http.post({
                url: '/orderImage/update',
                data: data
            }).then(res => {
                if (res.success) {
                    this.$message.success('成功');
                    this.$emit('changeRemark')
                } else {
                    this.$message.warning('失败')
                }
            });
        },
        delFinishImg() {
            var data = {
                id: this.img.id,
                finishedImage: 'null',
                finishedSize: 0
            }
            this.$http.post({
                url: '/orderImage/update',
                data: data
            }).then(res => {
                if (res.success) {
                    this.$message.success('成功');
                    this.$emit('changeRemark')
                } else {
                    this.$message.warning('失败')
                }
            });
        }

    },
    components: {
        imgZoom
    }
}
</script>

<style lang="less" scoped>
.imgContent {
    vertical-align: middle;
}
.img {
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;

    img {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }
}
.remark {
    width: 100px;
    padding: 0 10px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(51, 51, 51, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    span {
        color: #999;
        font-size: 12px;
    }
}
.image {
    display: inline-block;
    border-radius: 3px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: auto;
    vertical-align: middle;
    cursor: pointer;
}

.check {
    width: 120px;
    text-align: center;
    margin-top: 10px;
}

.box {
    position: fixed;
    z-index: 550;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    box-align: center;
    -moz-box-align: center;
    -webkit-box-align: center;
    -webkit-justify-content: center;
    justify-content: center;
    -moz-box-pack: center;
    -webkit--moz-box-pack: center;
    box-pack: center;
    .img-content {
        display: inline-block;
        overflow: hidden;
        z-index: 2;
        // vertical-align: middle;
        // transform: translate(-50%,-50%)
    }
    img {
        display: block;
        margin: auto;
        cursor: move;
    }

    .closeBtn {
        position: absolute;
        right: 50px;
        top: 20px;
        z-index: 3;
    }

    .checkContent {
        width: 100%;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.3);
        min-height: 50px;
        z-index: 3;
        line-height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}
</style>
