<!--
 * @Title: 
 * @Description: 巡检填报详情
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
    <basic-container>

        <el-card shadow="hover" style="margin-top: 0px;">
            <div slot="header">
                <span>站点基础信息</span>
            </div>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>测站名称:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ data.rtuName }} / {{ data.rtuCode }}</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>测站类型:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ getSiteKind() }}</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>测站安装地址:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ data.locationDesc }}</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>经纬度:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ data.lng }} / {{ data.lat }}</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>行政区划:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ getAreaName() }}</label>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <!-- 站点状态检查信息 -->
        <el-card shadow="hover" style="margin-top: 10px;">
            <div slot="header">
                <span>站点状态检查信息</span>
            </div>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>已选检查项:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ getSiteCheckStatus() }}</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>站点检查补充说明:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ data.siteCheckRemark }}</label>
                    </div>
                </el-col>
            </el-row>
            <div v-if="data.siteCheckPhotos.length > 0" style="width: 100%;">

                <div class="block-line"
                    style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                    <label>站点检查拍摄照片</label>
                </div>

                <el-row v-for="(item, index) in data.siteCheckPhotos" :key="index" type="flex">
                    <el-col :span="24">
                        <el-image :src=toOss(item)></el-image>
                    </el-col>
                </el-row>
            </div>
            <div v-else>
                <div class="block-line"
                    style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                    <label>站点检查拍摄照片</label>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-center">
                        <div class="item-title">
                            <label>无照片数据</label>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 雨量站检查信息 -->
        <el-card shadow="hover" style="margin-top: 10px;">
            <div slot="header">
                <span>雨量站检查信息</span>
            </div>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>已选检查项:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ getRainSiteCheckItems() }}</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>巡检结果:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label v-if="data.rainSiteCheckResult == 0" style="color: red;">异常</label>
                        <label v-else style="color: blue;">正常</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>雨量站检查补充说明:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ data.rainSiteCheckRemark }}</label>
                    </div>
                </el-col>
            </el-row>
            <div v-if="data.rainSiteCheckPhotos.length > 0" style="width: 100%;">

                <div class="block-line"
                    style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                    <label>雨量站检查拍摄照片</label>
                </div>

                <el-row v-for="(item, index) in data.rainSiteCheckPhotos" :key="index" type="flex">
                    <el-col :span="24">
                        <el-image :src=toOss(item)></el-image>
                    </el-col>
                </el-row>
            </div>
            <div v-else>
                <div class="block-line"
                    style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                    <label>雨量站检查拍摄照片</label>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-center">
                        <div class="item-title">
                            <label>无照片数据</label>
                        </div>
                    </el-col>
                </el-row>
            </div>


        </el-card>

        <!-- 水位站检查信息 -->
        <el-card shadow="hover" style="margin-top: 10px;">
            <div slot="header">
                <span>水位站检查信息</span>
            </div>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>已选检查项:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ getWaterSiteCheckItems() }}</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>巡检结果:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label v-if="data.waterSiteCheckResult == 0" style="color: red;">异常</label>
                        <label v-else style="color: blue;">正常</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>水位站检查补充说明:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ data.waterSiteCheckRemark }}</label>
                    </div>
                </el-col>
            </el-row>
            <div v-if="data.waterSiteCheckPhotos.length > 0" style="width: 100%;">

                <div class="block-line"
                    style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                    <label>水位站检查拍摄照片</label>
                </div>

                <el-row v-for="(item, index) in data.waterSiteCheckPhotos" :key="index" type="flex">
                    <el-col :span="24">
                        <el-image :src=toOss(item)></el-image>
                    </el-col>
                </el-row>
            </div>
            <div v-else>
                <div class="block-line"
                    style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                    <label>水位站检查拍摄照片</label>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-center">
                        <div class="item-title">
                            <label>无照片数据</label>
                        </div>
                    </el-col>
                </el-row>
            </div>

        </el-card>

        <!-- 墒情站检查信息 -->
        <el-card shadow="hover" style="margin-top: 10px;">
            <div slot="header">
                <span>墒情站检查信息</span>
            </div>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>已选检查项:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ getGroundSiteCheckItems() }}</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>巡检结果:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label v-if="data.groundSiteCheckResult == 0" style="color: red;">异常</label>
                        <label v-else style="color: blue;">正常</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>墒情站检查补充说明:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ data.groundSiteCheckRemark }}</label>
                    </div>
                </el-col>
            </el-row>
            <div v-if="data.groundSiteCheckPhotos.length > 0" style="width: 100%;">

                <div class="block-line"
                    style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                    <label>墒情站检查拍摄照片</label>
                </div>

                <el-row v-for="(item, index) in data.groundSiteCheckPhotos" :key="index" type="flex">
                    <el-col :span="24">
                        <el-image :src=toOss(item)></el-image>
                    </el-col>
                </el-row>
            </div>
            <div v-else>
                <div class="block-line"
                    style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                    <label>墒情站检查拍摄照片</label>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-center">
                        <div class="item-title">
                            <label>无照片数据</label>
                        </div>
                    </el-col>
                </el-row>
            </div>

        </el-card>



        <!-- 其他设备检查信息 -->
        <el-card shadow="hover" style="margin-top: 10px;">
            <div slot="header">
                <span>其他设备检查信息</span>
            </div>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>已选检查项:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ getOthersEquipmentCheckItems() }}</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>巡检结果:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label v-if="data.otherEquipmentCheckResult == 0" style="color: red;">异常</label>
                        <label v-else style="color: blue;">正常</label>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :span="6" class="item-line-end">
                    <div class="item-title">
                        <label>其他设备检查补充说明:</label>
                    </div>
                </el-col>
                <el-col :span="18" class="item-line-start">
                    <div class="item-content">
                        <label>{{ data.othersEquipmentCheckRemark }}</label>
                    </div>
                </el-col>
            </el-row>
            <div v-if="data.othersEquipmentCheckPhotos.length > 0" style="width: 100%;">

                <div class="block-line"
                    style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                    <label>其他设备检查拍摄照片</label>
                </div>

                <el-row v-for="(item, index) in data.othersEquipmentCheckPhotos" :key="index" type="flex">
                    <el-col :span="24">
                        <el-image :src=toOss(item)></el-image>
                    </el-col>
                </el-row>
            </div>
            <div v-else>
                <div class="block-line"
                    style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                    <label>其他设备检查拍摄照片</label>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-center">
                        <div class="item-title">
                            <label>无照片数据</label>
                        </div>
                    </el-col>
                </el-row>
            </div>

        </el-card>

        <!-- 设备更换信息 -->
        <el-card shadow="hover" style="margin-top: 10px;">
            <div slot="header">
                <span>其他设备检查信息</span>
            </div>
            <el-card v-if="data.equipmentsReplaceItems.items[0].checked" shadow="hover" style="margin-top: 10px;">
                <div slot="header">
                    <span>更换RTU</span>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-start">
                        <div class="item-content">
                            <label>{{ data.rtuModelRemark }}</label>
                        </div>
                    </el-col>
                </el-row>
                <div v-if="data.rtuReplacePhotos.length > 0" style="width: 100%;">

                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>RTU更换照片</label>
                    </div>

                    <el-row v-for="(item, index) in data.rtuReplacePhotos" :key="index" type="flex">
                        <el-col :span="24">
                            <el-image :src=toOss(item)></el-image>
                        </el-col>
                    </el-row>
                </div>
                <div v-else>
                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>RTU更换照片</label>
                    </div>
                    <el-row type="flex">
                        <el-col :span="24" class="item-line-center">
                            <div class="item-title">
                                <label>无照片数据</label>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <el-card v-if="data.equipmentsReplaceItems.items[1].checked" shadow="hover" style="margin-top: 10px;">
                <div slot="header">
                    <span>更换雨量计</span>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-start">
                        <div class="item-content">
                            <label>{{ data.rainSensorModelRemark }}</label>
                        </div>
                    </el-col>
                </el-row>
                <div v-if="data.rtuReplacePhotos.length > 0" style="width: 100%;">

                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>RTU更换照片</label>
                    </div>

                    <el-row v-for="(item, index) in data.rtuReplacePhotos" :key="index" type="flex">
                        <el-col :span="24">
                            <el-image :src=toOss(item)></el-image>
                        </el-col>
                    </el-row>
                </div>
                <div v-else>
                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>RTU更换照片</label>
                    </div>
                    <el-row type="flex">
                        <el-col :span="24" class="item-line-center">
                            <div class="item-title">
                                <label>无照片数据</label>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <el-card v-if="data.equipmentsReplaceItems.items[2].checked" shadow="hover" style="margin-top: 10px;">
                <div slot="header">
                    <span>更换水位计</span>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-start">
                        <div class="item-content">
                            <label>{{ data.waterSensorModelRemark }}</label>
                        </div>
                    </el-col>
                </el-row>
                <div v-if="data.waterSensorReplacePhotos.length > 0" style="width: 100%;">

                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>水位计更换照片</label>
                    </div>

                    <el-row v-for="(item, index) in data.waterSensorReplacePhotos" :key="index" type="flex">
                        <el-col :span="24">
                            <el-image :src=toOss(item)></el-image>
                        </el-col>
                    </el-row>
                </div>
                <div v-else>
                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>水位计更换照片</label>
                    </div>
                    <el-row type="flex">
                        <el-col :span="24" class="item-line-center">
                            <div class="item-title">
                                <label>无照片数据</label>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <el-card v-if="data.equipmentsReplaceItems.items[3].checked" shadow="hover" style="margin-top: 10px;">
                <div slot="header">
                    <span>更换墒情计</span>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-start">
                        <div class="item-content">
                            <label>{{ data.groundSensorModelRemark }}</label>
                        </div>
                    </el-col>
                </el-row>
                <div v-if="data.groundSensorReplacePhotos.length > 0" style="width: 100%;">

                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>墒情计更换照片</label>
                    </div>

                    <el-row v-for="(item, index) in data.groundSensorReplacePhotos" :key="index" type="flex">
                        <el-col :span="24">
                            <el-image :src=toOss(item)></el-image>
                        </el-col>
                    </el-row>
                </div>
                <div v-else>
                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>墒情计更换照片</label>
                    </div>
                    <el-row type="flex">
                        <el-col :span="24" class="item-line-center">
                            <div class="item-title">
                                <label>无照片数据</label>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <el-card v-if="data.equipmentsReplaceItems.items[4].checked" shadow="hover" style="margin-top: 10px;">
                <div slot="header">
                    <span>更换蓄电池</span>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-start">
                        <div class="item-content">
                            <label>{{ data.batteryModelRemark }}</label>
                        </div>
                    </el-col>
                </el-row>
                <div v-if="data.batteryReplacePhotos.length > 0" style="width: 100%;">

                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>蓄电池更换照片</label>
                    </div>

                    <el-row v-for="(item, index) in data.batteryReplacePhotos" :key="index" type="flex">
                        <el-col :span="24">
                            <el-image :src=toOss(item)></el-image>
                        </el-col>
                    </el-row>
                </div>
                <div v-else>
                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>蓄电池更换照片</label>
                    </div>
                    <el-row type="flex">
                        <el-col :span="24" class="item-line-center">
                            <div class="item-title">
                                <label>无照片数据</label>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <el-card v-if="data.equipmentsReplaceItems.items[5].checked" shadow="hover" style="margin-top: 10px;">
                <div slot="header">
                    <span>更换太阳能板</span>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-start">
                        <div class="item-content">
                            <label>{{ data.sunPowerModelRemark }}</label>
                        </div>
                    </el-col>
                </el-row>
                <div v-if="data.sunPowerReplacePhotos.length > 0" style="width: 100%;">

                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>太阳能板更换照片</label>
                    </div>

                    <el-row v-for="(item, index) in data.sunPowerReplacePhotos" :key="index" type="flex">
                        <el-col :span="24">
                            <el-image :src=toOss(item)></el-image>
                        </el-col>
                    </el-row>
                </div>
                <div v-else>
                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>太阳能板更换照片</label>
                    </div>
                    <el-row type="flex">
                        <el-col :span="24" class="item-line-center">
                            <div class="item-title">
                                <label>无照片数据</label>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <el-card v-if="data.equipmentsReplaceItems.items[6].checked" shadow="hover" style="margin-top: 10px;">
                <div slot="header">
                    <span>更换充电控制器</span>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-start">
                        <div class="item-content">
                            <label>{{ data.batteryControlModelRemark }}</label>
                        </div>
                    </el-col>
                </el-row>
                <div v-if="data.batteryControlReplacePhotos.length > 0" style="width: 100%;">

                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>充电控制器更换照片</label>
                    </div>

                    <el-row v-for="(item, index) in data.batteryControlReplacePhotos" :key="index" type="flex">
                        <el-col :span="24">
                            <el-image :src=toOss(item)></el-image>
                        </el-col>
                    </el-row>
                </div>
                <div v-else>
                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>充电控制器更换照片</label>
                    </div>
                    <el-row type="flex">
                        <el-col :span="24" class="item-line-center">
                            <div class="item-title">
                                <label>无照片数据</label>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <el-card v-if="data.equipmentsReplaceItems.items[7].checked" shadow="hover" style="margin-top: 10px;">
                <div slot="header">
                    <span>更换其他设备</span>
                </div>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-start">
                        <div class="item-content">
                            <label>{{ data.otherEquipmentModelRemark }}</label>
                        </div>
                    </el-col>
                </el-row>
                <div v-if="data.otherEquipmentReplacePhotos.length > 0" style="width: 100%;">

                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>其他设备更换照片</label>
                    </div>

                    <el-row v-for="(item, index) in data.otherEquipmentReplacePhotos" :key="index" type="flex">
                        <el-col :span="24">
                            <el-image :src=toOss(item)></el-image>
                        </el-col>
                    </el-row>
                </div>
                <div v-else>
                    <div class="block-line"
                        style="height: 30px;display: flex;flex-direction: row;justify-content: center;margin-top: 10px;margin-bottom: 10px;">
                        <label>其他设备更换照片</label>
                    </div>
                    <el-row type="flex">
                        <el-col :span="24" class="item-line-center">
                            <div class="item-title">
                                <label>无照片数据</label>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-card>


        <el-card shadow="hover" style="margin-top: 10px;">
            <div slot="header">
                <span>遗留问题补充说明</span>
            </div>
            <el-row type="flex">
                <el-col :span="24" class="item-line-start">
                    <div class="item-content">
                        <label>{{ data.inspectionRemainProblemsRemark }}</label>
                    </div>
                </el-col>
            </el-row>
        </el-card>


        <!-- 巡检工作留存照片 -->
        <el-card shadow="hover" style="margin-top: 10px;">
            <div slot="header">
                <span>巡检工作留存照片</span>
            </div>
            <div v-if="data.inspectionWorkPhotos.length > 0" style="width: 100%;">
                <el-row v-for="(item, index) in data.inspectionWorkPhotos" :key="index" type="flex">
                    <el-col :span="24">
                        <el-image :src=toOss(item)></el-image>
                    </el-col>
                </el-row>
            </div>
            <div v-else>
                <el-row type="flex">
                    <el-col :span="24" class="item-line-center">
                        <div class="item-title">
                            <label>无照片数据</label>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </basic-container>
</template>

<script>

import {
    getDetail,
} from "@/api/business/inspection/inspectionreport.js";

export default {
    components: {

    },
    props: {
        id: {
            type: [Number],
            required: true
        },
    },
    name: 'inspectionreportdetail',
    data() {
        return {
            data: {
                rtuCode: '',
                rtuName: '',
                isRain: false,
                isRiver: false,
                isRes: false,
                isGround: false,
                isCamera: false,
                lng: '',
                lat: '',
                adCity: '',
                adDist: '',
                locationDesc: '',
                //站点状态检查项
                siteCheckStatus: {
                    items: [{
                        'id': '0',
                        'dictValue': '水毁'
                    }, {
                        'id': '1',
                        'dictValue': '丢失'
                    }, {
                        'id': '2',
                        'dictValue': '损坏'
                    }, {
                        'id': '3',
                        'dictValue': '正常'
                    }],
                    current: 3
                },
                siteCheckPhotos: [],
                siteCheckRemark: '',
                //雨量站检查数据
                rainSiteCheckItems: {
                    items: [{
                        'id': '0',
                        'checked': false,
                        'dictValue': '故障排查'
                    }, {
                        'id': '1',
                        'checked': false,
                        'dictValue': '清理堵塞'
                    }, {
                        'id': '2',
                        'checked': false,
                        'dictValue': '雨量计校核'
                    }],
                    current: 0
                },
                rainSiteCheckPhotos: [],
                rainSiteCheckResult: 1,
                rainSiteCheckRemark: '',
                //水位站检查数据
                waterSiteCheckItems: {
                    items: [{
                        'id': '0',
                        'checked': false,
                        'dictValue': '故障排查'
                    }, {
                        'id': '1',
                        'checked': false,
                        'dictValue': '水位计校核'
                    }],
                    current: 0
                },
                waterSiteCheckPhotos: [],
                waterSiteCheckResult: 1,
                waterSiteCheckRemark: '',
                //墒情站检查数据
                groundSiteCheckItems: {
                    items: [{
                        'id': '0',
                        'checked': false,
                        'dictValue': '故障排查'
                    }, {
                        'id': '1',
                        'checked': false,
                        'dictValue': '墒情计校核'
                    }],
                    current: 0
                },
                groundSiteCheckPhotos: [],
                groundSiteCheckRemark: '',
                groundSiteCheckResult: 1,
                //其他设备检查
                othersEquipmentCheckItems: {
                    items: [{
                        'id': '0',
                        'checked': false,
                        'dictValue': '设备接地检测'
                    }, {
                        'id': '1',
                        'checked': false,
                        'dictValue': '电源电压检测'
                    }, {
                        'id': '2',
                        'checked': false,
                        'dictValue': '太阳能板检查'
                    }, {
                        'id': '3',
                        'checked': false,
                        'dictValue': '蓄电池检查'
                    }, {
                        'id': '4',
                        'checked': false,
                        'dictValue': '网络通信检查'
                    }],
                    current: 0
                },
                othersEquipmentCheckPhotos: [],
                othersEquipmentCheckRemark: '',
                otherEquipmentCheckResult: 1,
                //设备替换
                equipmentsReplaceItems: {
                    items: [{
                        'id': '0',
                        'checked': false,
                        'dictValue': 'RTU'
                    }, {
                        'id': '1',
                        'checked': false,
                        'dictValue': '雨量计'
                    }, {
                        'id': '2',
                        'checked': false,
                        'dictValue': '水位计'
                    }, {
                        'id': '3',
                        'checked': false,
                        'dictValue': '墒情计'
                    }, {
                        'id': '4',
                        'checked': false,
                        'dictValue': '蓄电池'
                    }, {
                        'id': '5',
                        'checked': false,
                        'dictValue': '太阳能板'
                    }, {
                        'id': '6',
                        'checked': false,
                        'dictValue': '充电控制器'
                    }, {
                        'id': '7',
                        'checked': false,
                        'dictValue': '其他'
                    }],
                    current: 0
                },
                rtuModelRemark: '',
                rtuReplacePhotos: [],
                rainSensorModelRemark: '',
                rainSensorReplacePhotos: [],
                waterSensorModelRemark: '',
                waterSensorReplacePhotos: [],
                groundSensorModelRemark: '',
                groundSensorReplacePhotos: [],
                batteryModelRemark: '',
                batteryReplacePhotos: [],
                sunPowerModelRemark: '',
                sunPowerReplacePhotos: [],
                batteryControlModelRemark: '',
                batteryControlReplacePhotos: [],
                otherEquipmentModelRemark: '',
                otherEquipmentReplacePhotos: [],
                //巡检遗留问题描述
                inspectionRemainProblemsRemark: '',
                //工作留存数据
                inspectionWorkPhotos: [],
            }
        }
    },
    created() {
        this.init();
    },
    methods: {
        toOss(path) {
            console.log("oss " + this.website.ossServer + path);
            // return "/oss/galaxy/" + path;
            return this.website.ossServer + path;
        },
        init() {
            getDetail(this.id).then(res => {
                const data = res.data;
                console.log(JSON.stringify(data));
                if (data.success) {
                    // this.data = data.data;
                    this.data.rtuName = data.data['rtuName'];
                    this.data.rtuCode = data.data['rtuCode'];
                    this.data.isRain = data.data['isRain'];
                    this.data.isRiver = data.data['isRiver'];
                    this.data.isRes = data.data['isRes'];
                    this.data.isGround = data.data['isGround'];
                    this.data.lng = data.data['lng'];
                    this.data.lat = data.data['lat'];
                    this.data.adCity = data.data['adCity'];
                    this.data.adDist = data.data['adDist'];
                    this.data.locationDesc = data.data['locationDesc'];
                    this.data.siteCheckStatus.current = Number(data.data['siteCheckItem']);
                    this.data.siteCheckRemark = data.data['siteCheckRemark'];
                    this.data.siteCheckPhotos = [];
                    let photos = data.data['siteCheckPhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.siteCheckPhotos = photoList;
                    }
                    //雨量站检查
                    let items = data.data['rainSiteCheckItem'];
                    if (null != items && items.length > 0) {
                        let itemList = items.split(",");
                        this.data.rainSiteCheckItems.items[0].checked = (itemList[0] == 0) ? false : true;
                        this.data.rainSiteCheckItems.items[1].checked = (itemList[1] == 0) ? false : true;
                        this.data.rainSiteCheckItems.items[2].checked = (itemList[2] == 0) ? false : true;
                    }

                    this.data.rainSiteCheckResult = data.data['rainSiteCheckResult'];
                    this.data.rainSiteCheckPhotos = [];
                    photos = data.data['rainSiteCheckPhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.rainSiteCheckPhotos = photoList;
                    }
                    this.data.rainSiteCheckRemark = data.data['rainSiteCheckRemark'];
                    //水位站检查
                    items = data.data['waterSiteCheckItem'];
                    if (null != items && items.length > 0) {
                        let itemList = items.split(",");
                        this.data.waterSiteCheckItems.items[0].checked = (itemList[0] == 0) ? false : true;
                        this.data.waterSiteCheckItems.items[1].checked = (itemList[1] == 0) ? false : true;
                    }
                    this.data.waterSiteCheckPhotos = [];
                    photos = data.data['waterSiteCheckPhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.waterSiteCheckPhotos = photoList;
                    }
                    this.data.waterSiteCheckRemark = data.data['waterSiteCheckRemark'];
                    this.data.waterSiteCheckResult = data.data['waterSiteCheckResult'];
                    items = data.data['groundSiteCheckItem'];
                    if (null != items && items.length > 0) {
                        let itemList = items.split(",");
                        this.data.groundSiteCheckItems.items[0].checked = itemList[0] == 0 ? false : true;
                        this.data.groundSiteCheckItems.items[1].checked = itemList[1] == 0 ? false : true;
                    }
                    this.data.groundSiteCheckPhotos = [];
                    photos = data.data['groundSiteCheckPhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.groundSiteCheckPhotos = photoList;
                    }
                    this.data.groundSiteCheckRemark = data.data['groundSiteCheckRemark'];
                    this.data.groundSiteCheckResult = data.data['groundSiteCheckResult'];
                    items = data.data['otherEquipmentCheckItem'];
                    if (null != items && items.length > 0) {
                        let itemList = items.split(",");
                        this.data.othersEquipmentCheckItems.items[0].checked = itemList[0] == 0 ? false : true;
                        this.data.othersEquipmentCheckItems.items[1].checked = itemList[1] == 0 ? false : true;
                        this.data.othersEquipmentCheckItems.items[2].checked = itemList[2] == 0 ? false : true;
                        this.data.othersEquipmentCheckItems.items[3].checked = itemList[3] == 0 ? false : true;
                        this.data.othersEquipmentCheckItems.items[4].checked = itemList[4] == 0 ? false : true;

                    }
                    this.data.othersEquipmentCheckPhotos = [];
                    photos = data.data['otherEquipmentCheckPhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.othersEquipmentCheckPhotos = photoList;
                    }
                    this.data.othersEquipmentCheckRemark = data.data['otherEquipmentCheckRemark'];
                    this.data.otherEquipmentCheckResult = data.data['otherEquipmentCheckResult'];

                    this.data.equipmentsReplaceItems.items[0].checked = data.data['rtuReplace'] == 0 ? false :
                        true;
                    this.data.equipmentsReplaceItems.items[1].checked = data.data['rainSensorReplace'] == 0 ?
                        false :
                        true;
                    this.data.equipmentsReplaceItems.items[2].checked = data.data['waterSensorReplace'] == 0 ?
                        false :
                        true;
                    this.data.equipmentsReplaceItems.items[3].checked = data.data['groundSensorReplace'] == 0 ?
                        false : true;
                    this.data.equipmentsReplaceItems.items[4].checked = data.data['batteryReplace'] == 0 ?
                        false :
                        true;
                    this.data.equipmentsReplaceItems.items[5].checked = data.data['sunPowerReplace'] == 0 ?
                        false :
                        true;
                    this.data.equipmentsReplaceItems.items[6].checked = data.data['batteryControllerReplace'] ==
                        0 ?
                        false : true;
                    this.data.equipmentsReplaceItems.items[7].checked = data.data['otherEquipmentReplace'] ==
                        0 ?
                        false : true;

                    this.data.rtuModelRemark = data.data['rtuModelRemark'];
                    photos = data.data['rtuReplacePhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.rtuReplacePhotos = photoList;
                    }
                    this.data.rainSensorModelRemark = data.data['rainSensorModelRemark'];
                    photos = data.data['rainSensorReplacePhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.rainSensorReplacePhotos = photoList;
                    }
                    this.data.waterSensorModelRemark = data.data['waterSensorModelRemark'];
                    photos = data.data['waterSensorReplacePhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.waterSensorReplacePhotos = photoList;
                    }
                    this.data.groundSensorModelRemark = data.data['groundSensorModelRemark'];
                    photos = data.data['groundSensorReplacePhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.groundSensorReplacePhotos = photoList;
                    }
                    this.data.batteryModelRemark = data.data['batteryModelRemark'];
                    photos = data.data['batteryReplacePhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.batteryReplacePhotos = photoList;
                    }
                    this.data.sunPowerModelRemark = data.data['sunPowerModelRemark'];
                    photos = data.data['sunPowerReplacePhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.sunPowerReplacePhotos = photoList;
                    }
                    this.data.batteryControlModelRemark = data.data['batteryControllerModelRemark'];
                    photos = data.data['batteryControllerReplacePhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.batteryControllerReplacePhotos = photoList;
                    }
                    this.data.otherEquipmentModelRemark = data.data['otherEquipmentModelRemark'];
                    photos = data.data['otherEquipmentReplacePhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.otherEquipmentReplacePhotos = photoList;
                    }
                    this.data.inspectionWorkPhotos = [];
                    photos = data.data['inspectionWorkPhotos'];
                    if (null != photos && photos.length > 0) {
                        let photoList = photos.split(",");
                        this.data.inspectionWorkPhotos = photoList;
                    }
                    this.data.inspectionRemainProblemsRemark = data.data['remainQuestion'];
                }
            })
        },
        getSiteKind() {
            let htmltext = '';
            if (this.data.isRain === 1) {
                htmltext = htmltext + "雨量站";
            }
            if (this.data.isRiver == 1 || this.data.isRes == 1) {
                if (htmltext.length > 0) {
                    htmltext = htmltext + ' / ';
                }
                htmltext = htmltext + '水位站';
            }
            if (this.data.isGround == 1) {
                if (htmltext.length > 0) {
                    htmltext = htmltext + ' / ';
                }
                htmltext = htmltext + '墒情站';
            }
            return htmltext;
        },
        getAreaName() {
            let htmltext = '';
            if (this.data.adCity) {
                htmltext = htmltext + this.data.adCity;
            }
            if (this.data.adDist) {
                if (htmltext.length > 0) {
                    htmltext = htmltext + ' / ';
                }
                htmltext = htmltext + this.data.adDist;
            }
            return htmltext;
        },
        getSiteCheckStatus() {
            return this.data.siteCheckStatus.items[this.data.siteCheckStatus.current].dictValue;
        },
        getRainSiteCheckItems() {
            let text = '';
            for (let i = 0; i < this.data.rainSiteCheckItems.items.length; i++) {
                if (this.data.rainSiteCheckItems.items[i].checked) {
                    if (text.length > 0) {
                        text = text + ' / ';
                    }
                    text = text + this.data.rainSiteCheckItems.items[i].dictValue;
                }
            }
            return text;
        },
        getWaterSiteCheckItems() {
            let text = '';
            for (let i = 0; i < this.data.waterSiteCheckItems.items.length; i++) {
                if (this.data.waterSiteCheckItems.items[i].checked) {
                    if (text.length > 0) {
                        text = text + ' / ';
                    }
                    text = text + this.data.waterSiteCheckItems.items[i].dictValue;
                }
            }
            return text;
        },
        getGroundSiteCheckItems() {
            let text = '';
            for (let i = 0; i < this.data.groundSiteCheckItems.items.length; i++) {
                if (this.data.groundSiteCheckItems.items[i].checked) {
                    if (text.length > 0) {
                        text = text + ' / ';
                    }
                    text = text + this.data.groundSiteCheckItems.items[i].dictValue;
                }
            }
            return text;
        },
        getOthersEquipmentCheckItems() {
            let text = '';
            for (let i = 0; i < this.data.othersEquipmentCheckItems.items.length; i++) {
                if (this.data.othersEquipmentCheckItems.items[i].checked) {
                    if (text.length > 0) {
                        text = text + ' / ';
                    }
                    text = text + this.data.othersEquipmentCheckItems.items[i].dictValue;
                }
            }
            return text;
        },
    }
}
</script>


<style lang="scss" scoped>
.item-line-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.item-line-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.item-line-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.block-line {
    border-bottom: 1px solid lightblue;
}

.item-title {
    display: flex;
    flex-direction: column;
    ;
    justify-content: center;
    font-size: 1rem;
}

.item-content {
    display: flex;
    flex-direction: column;
    ;
    justify-content: center;
    padding-left: 10px;
    color: grey;
    font-size: 1rem;
}
</style>

