<template>
    <el-dialog title="查看详情" :visible.sync="dialogVisible" width="500px" class="dialog-info">
        <div class="info-wrp">
            <div class="title">故障信息</div>
            <div class="info-item">
                <span>车牌号：</span>
                <span>{{ data.plateNumber }}</span>
            </div>
            <div class="info-item">
                <span>报修位置：</span>
                <span>{{ data.troublePart }}</span>
            </div>
            <div class="info-item">
                <span>区域地勤人员：</span>
                <span style="line-height: 1.4">{{ data.areaWoker }}</span>
            </div>
            <div class="info-item">
                <span>维修状态：</span>
                <span :style="{color:data.fixStatus=='0'?'#f56c6c':'#606266'}">{{ data.fixStatus | stateFilter }}</span>
            </div>
            <div class="info-item">
                <span>报修时间：</span>
                <span>{{ data.createTime }}</span>
            </div>
            <div v-if="data.fixStatus=='1'">
                <div class="title">维修信息</div>
                <div class="info-item">
                    <span>实际维修人员：</span>
                    <span>{{ data.fixWorkerName }}</span>
                </div>
                <div class="info-item">
                    <span>手机号码：</span>
                    <span>{{ data.fixWorkerMobile }}</span>
                </div>
                <div class="info-item">
                    <span>维修位置：</span>
                    <span style="line-height: 1.4">{{ data.fixPart }}</span>
                </div>
                <div class="pic-wrp">
                    <div>维修图片：</div>
                    <div>
                        <img :src="`http://sharebike.znaer.cn${pic}`" v-for="(pic,i) in data.images" @click="showPreview(i)">
                        <!--<img :src="pic" v-for="(pic,i) in data.images" @click="showPreview(i)">-->
                    </div>
                </div>
                <div class="info-item">
                    <span>维修时间：</span>
                    <span>{{ data.fixTime }}</span>
                </div>
            </div>
        </div>
        <el-dialog width="80%" title="图片预览" :visible.sync="isPreview" append-to-body class="innerDialog">
            <div class="photo-preview" @wheel.prevent="scrollWheel">
                <el-carousel class="preview" :autoplay=false  trigger="click" indicator-position="none" ref="Carousel" @change="scale=1">
                    <el-carousel-item v-for="(pic,i) in data.images" :key="i" name="i">
                        <img :src="`http://sharebike.znaer.cn${pic}`" :style="`transform: translate(-50%,-50%) scale(${scale})`">
                        <!--<img :src="pic" :style="`transform: translate(-50%,-50%) scale(${scale})`">-->
                    </el-carousel-item>
                </el-carousel>
            </div>
        </el-dialog>
    </el-dialog>
</template>

<script>
    import api from '@/api/repair'
    export default {
        name: "repair-info",
        data() {
            return {
                data: {},
                dialogVisible: false,
                isPreview: false,
                scale: 1
            }
        },
        filters: {
            stateFilter(state) {
                const stateMap = ['未维修', '已维修']
                return stateMap[state]
            }
        },
        mounted() {

        },
        methods: {
            open(id) {
                this.dialogVisible = true
                api.getRepairDetails({ id }).then(res => {
                    console.log(res)
                    this.data = res.results
                    this.data.areaWoker = this.data.areaWoker.replace(/,/g, '、')
                    this.data.fixPart = this.data.fixPart.replace(/,/g, '、')
                }).catch(err => {
                    console.log(err)
                })
            },
            showPreview(i) {
                this.isPreview = true
                setTimeout(() => {
                    this.$nextTick(() => {
                        console.log(this.$refs)
                        if(this.$refs.Carousel) this.$refs.Carousel.setActiveItem(i)
                    });
                }, 0);
            },
            scrollWheel(ev) {
                if(ev.deltaY<0) {
                    this.scale>=2 ? this.scale=2 : this.scale+=0.1
                } else if(ev.deltaY>0) {
                    this.scale<=1 ? this.scale=1 : this.scale-=0.1
                    console.log(this.scale)
                } else {
                    console.log(ev)
                }
            }
        }
    }
</script>
<style>
    .innerDialog .el-carousel__container {
        height: 100%;
    }
    .innerDialog .el-carousel__arrow {
        position: fixed;
    }
    .innerDialog .el-carousel__arrow--left {
        left: 14%;
    }
    .innerDialog .el-carousel__arrow--right {
        right: 14%;
    }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
    .dialog-info {
         top: -5vh;
     }
    .innerDialog {
        top: -10vh;
        .photo-preview {
            background-color: #eee;
            height: 80vh;
            text-align: center;
            .preview {
                height: 100%;
                .el-carousel__item {
                    overflow: visible;
                }
                img {
                    max-width: 90%;
                    max-height: 90%;
                    position: absolute;
                    top:50%;
                    left:50%;
                }
            }
        }
    }
    .info-wrp {
        margin-top: -50px;
        .info-item {
            display: flex;
            margin-bottom: 10px;
            .user-avatar {
                width: 40px;
                height: 40px;
                border-radius: 10px;
            }
            & > span:first-child {
                display: inline-block;
                width: 120px;
                text-align: right;
            }
            & > span:last-child {
                flex: 1;
                padding-left: 10px;
                word-break: break-all;
            }
        }
        .pic-wrp {
            & > div:first-child {
                width: 120px;
                text-align: right;
            }
            & > div:last-child {
                margin-left: 50px;
                margin-bottom: 10px;
                img {
                    width: 120px;
                    margin-top: 10px;
                    margin-right: 10px;
                }
            }
        }
        .title {
            font-size: 16px;
            margin: 20px 0 10px;
            padding-top: 20px;
            border-top: 1px solid #ccc;
        }
    }
</style>