<template>
    <view class="main">
        <!-- 事件头部信息 -->
        <view class="headerCard">
            <view class="eventTitle">{{ detailObj.title || detailObj.type || "-" }}</view>
            <view class="headerInfo">
                <view class="serviceName">{{ detailObj.saName || "-" }}</view>
                <view class="eventStatus" :class="{
                    'status-completed': detailObj.state === '完成',
                    'status-processing': detailObj.state === '处理中'
                }">
                    {{ detailObj.state || "-" }}
                </view>
            </view>
        </view>

        <!-- 基本信息 -->
        <view class="infoCard">
            <view class="cardTitle">基本信息</view>
            <view class="infoList">
                <view class="infoItem">
                    <image class="infoIcon" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
                    <view class="infoLabel">联系人</view>
                    <view class="infoValue">{{ detailObj.userName || detailObj.createUserName || "-" }}</view>
                </view>
                <view class="infoItem">
                    <image class="infoIcon" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
                    <view class="infoLabel">联系电话</view>
                    <view class="infoValue">{{ detailObj.phone || "-" }}</view>
                </view>
                <view class="infoItem">
                    <image class="infoIcon" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
                    <view class="infoLabel">{{ pageType === 1 ? '处理用时' : '创建时间' }}</view>
                    <view class="infoValue">{{ detailObj.handlingTime || detailObj.createTime || "-" }}</view>
                </view>
            </view>
        </view>

        <!-- 应急事件详情 -->
        <view class="detailCard" v-if="pageType === 1">
            <view class="cardTitle">事件详情</view>
            <view class="detailList">
                <view class="detailItem">
                    <view class="detailLabel">事件片区</view>
                    <view class="detailValue">{{ detailObj.belongArea || "-" }}</view>
                </view>
                <view class="detailItem">
                    <view class="detailLabel">事件概况</view>
                    <view class="detailValue">{{ detailObj.sceneOverview || "-" }}</view>
                </view>
                <view class="detailItem">
                    <view class="detailLabel">损失情况</view>
                    <view class="detailValue">{{ detailObj.lossSituation || "-" }}</view>
                </view>
                <view class="detailItem">
                    <view class="detailLabel">处理结果</view>
                    <view class="detailValue">{{ detailObj.handlingResult || "-" }}</view>
                </view>
            </view>

            <!-- 现场照片 -->
            <view class="photoSection" v-if="detailObj.imgUp && detailObj.imgUp.length > 0">
                <view class="photoTitle">事件现场照片</view>
                <view class="photoGrid">
                    <view class="photoItem" v-for="(item, index) in detailObj.imgUp" :key="index"
                        @click="showImg(detailObj.imgUp, index)">
                        <image class="photoImage" mode="aspectFill"
                            :src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID" />
                    </view>
                </view>
            </view>
        </view>

        <!-- 日常问题详情 -->
        <view class="detailCard" v-if="pageType === 2">
            <view class="cardTitle">问题详情</view>
            <view class="detailList">
                <view class="detailItem">
                    <view class="detailLabel">事件片区</view>
                    <view class="detailValue">{{ detailObj.belongArea || "-" }}</view>
                </view>
                <view class="detailItem">
                    <view class="detailLabel">问题类型</view>
                    <view class="detailValue">{{ detailObj.type || "-" }}</view>
                </view>
                <view class="detailItem">
                    <view class="detailLabel">问题描述</view>
                    <view class="detailValue">{{ detailObj.describe || "-" }}</view>
                </view>
            </view>
        </view>

        <!-- 协调处理情况 -->
        <view class="detailCard" v-if="pageType === 2">
            <view class="cardTitle">协调处理情况</view>
            <view class="detailList">
                <view class="detailItem">
                    <view class="detailLabel">处理结果</view>
                    <view class="detailValue">{{ detailObj.coorResult || "-" }}</view>
                </view>
                <view class="detailItem">
                    <view class="detailLabel">办理人</view>
                    <view class="detailValue">{{ detailObj.coorUserName || "-" }}</view>
                </view>
                <view class="detailItem">
                    <view class="detailLabel">完成时间</view>
                    <view class="detailValue">{{ detailObj.coorEndTime || "-" }}</view>
                </view>
            </view>
        </view>

        <!-- 经营公司处理情况 -->
        <view class="detailCard" v-if="pageType === 2">
            <view class="cardTitle">经营公司处理情况</view>
            <view class="detailList">
                <view class="detailItem">
                    <view class="detailLabel">处理结果</view>
                    <view class="detailValue">{{ detailObj.companyResult || "-" }}</view>
                </view>
                <view class="detailItem">
                    <view class="detailLabel">办理人</view>
                    <view class="detailValue">{{ detailObj.companyUserName || "-" }}</view>
                </view>
                <view class="detailItem">
                    <view class="detailLabel">完成时间</view>
                    <view class="detailValue">{{ detailObj.companyEndTime || "-" }}</view>
                </view>
            </view>

            <!-- 现场照片 -->
            <view class="photoSection" v-if="detailObj.fileUp && detailObj.fileUp.length > 0">
                <view class="photoTitle">事件现场照片</view>
                <view class="photoGrid">
                    <view class="photoItem" v-for="(item, index) in detailObj.fileUp" :key="index"
                        @click="showImg(detailObj.fileUp, index)">
                        <image class="photoImage" mode="aspectFill"
                            :src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID" />
                    </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)
        }
        console.log('this.detailObjthis.detailObjthis.detailObjthis.detailObj', this.detailObj);

        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('https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID)
            })

            uni.previewImage({
                urls: urls,
                current: urls[index],
            });
        }
    }
}
</script>
<style scoped lang="scss">
// 使用项目全局颜色变量
$bg: #f8f9fa;
$muted: #666;
$card: #fff;
$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
$primary: #27B25F;
$primary2: #4CCC7F;
$success: #2ed573;
$warning: #ff9f43;
$danger: #ff4757;
$info: #3742fa;

.main {
    width: 100vw;
    min-height: 100vh;
    background-color: $bg;
    box-sizing: border-box;
    padding: 32rpx;
    padding-bottom: env(safe-area-inset-bottom);

    // 事件头部信息卡片
    .headerCard {
        background: $card;
        border-radius: 16rpx;
        padding: 32rpx;
        margin-bottom: 32rpx;
        box-shadow: $shadow;

        .eventTitle {
            font-size: 28rpx;
            font-weight: 600;
            color: #160002;
            margin-bottom: 16rpx;
            line-height: 1.4;
        }

        .headerInfo {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .serviceName {
                font-size: 24rpx;
                font-weight: 400;
                color: $muted;
                flex: 1;
            }

            .eventStatus {
                font-size: 22rpx;
                font-weight: 400;
                padding: 6rpx 12rpx;
                border-radius: 12rpx;
                flex-shrink: 0;

                &.status-completed {
                    background: #E7F8EE;
                    color: $success;
                }

                &.status-processing {
                    background: #FFF3E0;
                    color: $warning;
                }
            }
        }
    }

    // 基本信息卡片
    .infoCard {
        background: $card;
        border-radius: 16rpx;
        margin-bottom: 32rpx;
        overflow: hidden;
        box-shadow: $shadow;

        .cardTitle {
            padding: 32rpx 32rpx 16rpx;
            font-size: 26rpx;
            font-weight: 600;
            color: #160002;
            border-bottom: 1rpx solid #f0f0f0;
        }

        .infoList {
            padding: 16rpx 32rpx 32rpx;
            background: #FAFAFA;

            .infoItem {
                display: flex;
                align-items: center;
                margin-bottom: 16rpx;

                &:last-child {
                    margin-bottom: 0;
                }

                .infoIcon {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 16rpx;
                    flex-shrink: 0;
                }

                .infoLabel {
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #160002;
                    width: 120rpx;
                    flex-shrink: 0;
                }

                .infoValue {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #160002;
                    flex: 1;
                }
            }
        }
    }


    // 详情卡片
    .detailCard {
        background: $card;
        border-radius: 16rpx;
        margin-bottom: 32rpx;
        overflow: hidden;
        box-shadow: $shadow;

        .cardTitle {
            padding: 32rpx 32rpx 16rpx;
            font-size: 26rpx;
            font-weight: 600;
            color: #160002;
            border-bottom: 1rpx solid #f0f0f0;
        }

        .detailList {
            padding: 16rpx 32rpx 0;

            .detailItem {
                display: flex;
                align-items: flex-start;
                padding: 16rpx 0;
                border-bottom: 1rpx solid #f8f8f8;

                &:last-child {
                    border-bottom: none;
                }

                .detailLabel {
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #160002;
                    width: 120rpx;
                    flex-shrink: 0;
                    margin-right: 16rpx;
                }

                .detailValue {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #160002;
                    flex: 1;
                    line-height: 1.5;
                }
            }
        }

        // 图片展示区域
        .photoSection {
            padding: 16rpx 32rpx 32rpx;
            border-top: 1rpx solid #f0f0f0;
            margin-top: 16rpx;

            .photoTitle {
                font-size: 24rpx;
                font-weight: 600;
                color: #160002;
                margin-bottom: 16rpx;
            }

            .photoGrid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 16rpx;

                .photoItem {
                    aspect-ratio: 1;
                    border-radius: 8rpx;
                    overflow: hidden;
                    background: #f8f8f8;

                    .photoImage {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>