<template>
    <view class="main">
        <view class="detailBox">
            <view class="pageTitle">{{ detailObj.title || "" }}</view>

            <view class="userDetailBox" :style="{ marginTop: pageType === 1 ? '' : '0' }">
                <view class="userDetailBoxTop">
                    <view class="userDetailBoxService">{{ detailObj.service || "" }}</view>

                    <view class="userDetailBoxServiceRight">
                        <view class="userDetailBoxStatus" :style="{
                            background: detailObj.status === 1 ? '#ecbd44' : detailObj.status === 2 ? '#d3d3d3' : '',
                            color: detailObj.status === 1 ? '#fff' : detailObj.status === 2 ? '#fff' : ''
                        }">
                            {{ detailObj.status === 1 ? '已完成' : detailObj.status ===
                                2 ? '处理中' : '' }}</view>
                    </view>
                </view>

                <view class="eventsItem" style="margin-top: 24rpx;">
                    <view class="eventsHaveImgLabel">
                        <image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
                        <view class="eventsHaveLabel">联系人：</view>
                    </view>
                    <view class="eventsValue">{{ detailObj.person || "" }}</view>
                </view>
                <view class="eventsItem">
                    <view class="eventsHaveImgLabel">
                        <image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
                        <view class="eventsHaveLabel">联系电话：</view>
                    </view>
                    <view class="eventsValue">{{ detailObj.phone || "" }}</view>
                </view>
                <view class="eventsItem" style="margin-bottom: 0;">
                    <view class="eventsHaveImgLabel">
                        <image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
                        <view class="eventsHaveLabel">处理用时：</view>
                    </view>
                    <view class="eventsValue">{{ detailObj.haveTime || "" }}</view>
                </view>

            </view>
        </view>

        <view class="pageText" v-if="pageType === 1">应急事件</view>
        <view class="pageText" v-if="pageType === 2">日常问题</view>

        <view class="detailBox" v-if="pageType === 1">
            <view class="userDetailBox noBoxShow">
                <!-- <view class="eventsItem">
                    <view class="eventsLabel">标题：</view>
                    <view class="eventsValue">{{ detailObj.title || "" }}</view>
                </view> -->
                <view class="eventsItem">
                    <view class="eventsLabel">事件片区：</view>
                    <view class="eventsValue">{{ detailObj.area || "" }}</view>
                </view>
                <!-- <view class="eventsItem">
                    <view class="eventsLabel">事件服务区：</view>
                    <view class="eventsValue">{{ detailObj.service || "" }}</view>
                </view>

                <view class="eventsItem">
                    <view class="eventsLabel">死亡人数：</view>
                    <view class="eventsValue">{{ detailObj.diePerson || "" }}</view>
                </view> -->
                <view class="eventsItem">
                    <view class="eventsLabel">事件概况：</view>
                    <view class="eventsValue">{{ detailObj.desc || "" }}</view>
                </view>
                <view class="eventsItem">
                    <view class="eventsLabel">事件损失情况：</view>
                    <view class="eventsValue">{{ detailObj.lossDesc || "" }}</view>
                </view>
                <view class="eventsItem">
                    <view class="eventsLabel">处理结果：</view>
                    <view class="eventsValue">{{ detailObj.res || "" }}</view>
                </view>
                <view class="eventsItemPic">
                    <view class="eventsLabel">事件现场照片：</view>
                    <view class="eventsPic" v-if="detailObj.imgList && detailObj.imgList.length > 0">
                        <view class="eventsPicItem" v-for="(item, index) in detailObj.imgList" :key="index"
                            @click="showImg(detailObj.imgList, index)">
                            <image class="eventsPicImg" :src="item.url" />

                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
            <view class="userDetailBox noBoxShow">
                <view class="eventsItem">
                    <view class="eventsLabel">事件片区：</view>
                    <view class="eventsValue">{{ detailObj.area || "" }}</view>
                </view>
                <!-- <view class="eventsItem">
                    <view class="eventsLabel">事件服务区：</view>
                    <view class="eventsValue">{{ detailObj.service || "" }}</view>
                </view> -->
                <view class="eventsItem">
                    <view class="eventsLabel">类型：</view>
                    <view class="eventsValue">{{ detailObj.type || "" }}</view>
                </view>
                <view class="eventsItem" style="margin-bottom: 0;">
                    <view class="eventsLabel">问题描述：</view>
                    <view class="eventsValue">{{ detailObj.desc || "" }}</view>
                </view>
            </view>

        </view>

        <view class="pageText" v-if="pageType === 2">协调处理情况</view>

        <view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
            <view class="eventsItem">
                <view class="eventsLabel">协调处理结果：</view>
                <view class="eventsValue">{{ detailObj.startRes || "" }}</view>
            </view>
            <view class="eventsItem">
                <view class="eventsLabel">办理人：</view>
                <view class="eventsValue">{{ detailObj.startPerson || "" }}</view>
            </view>
            <view class="eventsItem" style="margin-bottom: 0;">
                <view class="eventsLabel">办理完成时间：</view>
                <view class="eventsValue">{{ detailObj.startTime || "" }}</view>
            </view>
        </view>

        <view class="pageText" v-if="pageType === 2">经营公司协调处理情况</view>

        <view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
            <view class="eventsItem">
                <view class="eventsLabel">协调处理结果：</view>
                <view class="eventsPic">{{ detailObj.endRes || "" }}</view>
            </view>
            <view class="eventsItem">
                <view class="eventsLabel">办理人：</view>
                <view class="eventsValue">{{ detailObj.endPerson || "" }}</view>
            </view>
            <view class="eventsItem">
                <view class="eventsLabel">办理完成时间：</view>
                <view class="eventsValue">{{ detailObj.endTime || "" }}</view>
            </view>
            <view class="eventsItemPic" style="margin-bottom: 0;">
                <view class="eventsLabel">事件现场照片：</view>
                <view class="eventsPic" v-if="detailObj.imgList && detailObj.imgList.length > 0">
                    <view class="eventsPicItem" v-for="(item, index) in detailObj.imgList" :key="index"
                        @click="showImg(detailObj.imgList, index)">
                        <image class="eventsPicImg" :src="item.url" />

                    </view>
                </view>
            </view>
        </view>


    </view>
</template>
<script>
export default {
    data() {
        return {
            detailObj: null,
            pageType: 0
        }
    },
    onLoad(query) {
        if (query.detail) {
            this.detailObj = JSON.parse(query.detail)
        }
        if (query.type) {
            this.pageType = Number(query.type)
        }

        if (this.pageType === 1) {
            uni.setNavigationBarTitle({
                title: '应急事件'
            })
        } else {
            uni.setNavigationBarTitle({
                title: '日常问题'
            })
        }
    },
    methods: {
        // 图片预览
        showImg(list, index) {
            console.log('list', list);
            console.log('indexindex', index);
            let urls = []
            list.forEach((item) => {
                urls.push(item.url)
            })

            uni.previewImage({
                urls: urls,
                current: list[index].url,
            });
        },
    }
}
</script>
<style scoped lang="scss">
.main {
    width: 100vw;
    min-height: 100vh;
    background-color: #f0f2f3;
    box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容旧版 iOS */
    padding-bottom: env(safe-area-inset-bottom);

    /* 兼容新版 */
    .detailBox {
        width: 100%;
        box-sizing: border-box;
        padding: 24rpx 24rpx 48rpx;
        background-color: #fff;

        .pageTitle {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30rpx;
        }

        .userDetailBox {
            width: calc(100% - 32rpx);
            margin-top: 24rpx;
            margin-left: 16rpx;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            padding: 16rpx 24rpx;

            .userDetailBoxTop {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .userDetailBoxService {
                    font-size: 28rpx;
                }

                .userDetailBoxStatus {
                    display: inline-block;
                    font-size: 24rpx;
                    padding: 4rpx 16rpx;
                    border-radius: 32rpx;
                }
            }


            .eventsItem {
                width: 100%;
                margin-bottom: 16rpx;
                display: flex;
                align-items: flex-start;

                .eventsHaveImgLabel {
                    display: flex;
                    width: 200rpx;
                    align-items: center;

                    .eventsHaveImg {
                        width: 30rpx;
                        height: 30rpx;
                        margin-right: 16rpx;
                        margin-top: 6rpx;
                    }

                    .eventsHaveLabel {
                        width: 154rpx;
                        font-size: 24rpx;
                    }
                }

                .eventsLabel {
                    width: 200rpx;
                    text-align: left;
                    font-size: 24rpx;
                }

                .eventsValue {
                    flex: 1;
                    font-size: 24rpx;
                }
            }

            .eventsItemPic {
                width: 100%;

                .eventsLabel {
                    width: 200rpx;
                    text-align: left;
                    font-size: 24rpx;
                }

                .eventsPic {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    font-size: 24rpx;

                    .eventsPicItem {
                        width: 100rpx;
                        height: 100rpx;
                        margin-right: 8rpx;
                        margin-bottom: 8rpx;

                        .eventsPicImg {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }

        .noBoxShow {
            box-shadow: none;
            margin-top: 0;
            padding: 0 24rpx;
            margin-left: 0;
        }


        .eventsItem {
            width: 100%;
            margin-bottom: 16rpx;
            display: flex;
            align-items: flex-start;

            .eventsHaveImgLabel {
                display: flex;
                width: 200rpx;
                align-items: center;

                .eventsHaveImg {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 16rpx;
                    margin-top: 6rpx;
                }

                .eventsHaveLabel {
                    width: 154rpx;
                    font-size: 24rpx;
                }
            }

            .eventsLabel {
                width: 200rpx;
                text-align: left;
                font-size: 24rpx;
            }

            .eventsValue {
                flex: 1;
                font-size: 24rpx;
            }
        }

        .eventsItemPic {
            width: 100%;

            .eventsLabel {
                width: 200rpx;
                text-align: left;
                font-size: 24rpx;
            }

            .eventsPic {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: 24rpx;

                .eventsPicItem {
                    width: 100rpx;
                    height: 100rpx;
                    margin-right: 8rpx;
                    margin-bottom: 8rpx;

                    .eventsPicImg {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    .pageText {
        width: 100%;
        box-sizing: border-box;
        padding: 16rpx 40rpx;
        font-size: 24rpx;
        color: #8d8e8e;
    }
}
</style>