<!--
 * @Title: 
 * @Description:  维修任务详情
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
    <basic-container>
        <el-form ref="form" :model="form" label-width="100px">

            <div class="block">
                <el-timeline>
                    <el-timeline-item v-for="(item, index) in processList" :key="index" :timestamp="item.createTime"
                        color="#0bbd87" placement="top">
                        <div v-if="item.orderStatusKey == orderStatusCreateKey">
                            <el-card shadow="hover">
                                <div slot="header">
                                    <span>维修任务创建</span>
                                </div>
                                <div>
                                    <label>{{ item.processDesc }}</label>
                                </div>
                            </el-card>
                        </div>
                        <div v-else-if="item.orderStatusKey == orderStatusConfirmKey">
                            <el-card shadow="hover">
                                <div slot="header">
                                    <span>维修任务确认</span>
                                </div>
                                <div>
                                    <label>{{ item.processDesc }}</label>
                                </div>
                            </el-card>
                        </div>
                        <div v-else-if="item.orderStatusKey == orderStatusProcessKey">

                            <el-card shadow="hover" style="margin-top: 10px;">
                                <div slot="header">
                                    <span>RTU设备信息</span>
                                </div>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="运行状态:" labelWidth="150px">
                                            <div v-if="item.rtuStatus == 0" class="block">
                                                <div>
                                                    <label>正常</label>
                                                </div>
                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>故障</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="是否更换RTU:" labelWidth="150px">
                                            <div v-if="item.rtuReplace == 0" class="block">
                                                <div>
                                                    <label>否</label>
                                                </div>
                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>更换</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-if="item.rtuReplace == 1" type="flex">
                                    <el-col :span="12">
                                        <el-form-item label="品牌:" labelWidth="150px">
                                            <div class="block">
                                                <label>{{ item.rtuBrand }}</label>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="型号:" labelWidth="150px">
                                            <div class="block">

                                                <label>{{ item.rtuModel }}</label>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <!--   <el-col :span="6">
                                                                                            <el-form-item label="更换时间:">
                                                                                                <div class="block">
                                                                                                    <label>{{form.rtuReplaceDate}}</label>
                                                                                                </div>
                                                                                            </el-form-item>
                                                                                        </el-col>-->
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="备注说明:" labelWidth="150px">
                                            <label>{{ item.rtuDesc }}</label>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-if="item.rtuPhotoTake == 1" type="flex">
                                    <el-col :span="12">
                                        <div style="padding: 5px 5px 5px 5px;">
                                            <div>
                                                <span>RTU图片</span>
                                            </div>
                                            <!-- <el-form-item label="RTU图片"> -->
                                            <div class="block">
                                                <!-- <span class="demonstration">默认</span> -->
                                                <el-image :src=toOss(item.rtuPhotoUrl)></el-image>
                                            </div>
                                            <!-- </el-form-item> -->
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                            <el-card v-if="item.rainSensorActive == 1" shadow="hover" style="margin-top: 10px;">
                                <div slot="header">
                                    <span>雨量传感器</span>
                                </div>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="运行状态:" labelWidth="150px">
                                            <div v-if="item.rainSensorStatus == 0" class="block">
                                                <div>
                                                    <label>正常</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>故障</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="是否更换雨量传感器:" labelWidth="150px">
                                            <div v-if="item.rainSensorReplace == 0" class="block">
                                                <div>
                                                    <label>否</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>更换</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row v-if="item.rainSensorReplace == 1" type="flex">
                                    <el-col :span="12">
                                        <el-form-item label="品牌:" labelWidth="150px">
                                            <div class="block">
                                                <label>{{ item.rainSensorBrand }}</label>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="型号:" labelWidth="150px">
                                            <div class="block">

                                                <label>{{ item.rainSensorModel }}</label>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <!-- <el-col :span="6">
                                                                                            <el-form-item label="更换时间:">
                                                                                                <div class="block">
                                                                                                    <label>{{form.rainSensorReplaceDate}}</label>
                                                                                                </div>
                                                                                            </el-form-item>
                                                                                        </el-col> -->
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="备注说明:" labelWidth="150px">
                                            <label>{{ item.rainSensorDesc }}</label>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-if="item.rainSensorPhotoTake == 1" type="flex">
                                    <el-col :span="12">
                                        <div style="padding: 5px 5px 5px 5px;">
                                            <div>
                                                <span>雨量传感器图片</span>
                                            </div>
                                            <!-- <el-form-item label="雨量传感器图片"> -->
                                            <div class="block">
                                                <!-- <span class="demonstration">默认</span> -->
                                                <el-image :src=toOss(item.rainSensorPhotoUrl)></el-image>
                                            </div>
                                            <!-- </el-form-item> -->
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                            <el-card v-if="item.waterLevelSensorActive == 1" shadow="hover" style="margin-top: 10px;">
                                <div slot="header">
                                    <span>水位传感器</span>
                                </div>
                                <el-row type="flex">
                                    <el-col :span="12">
                                        <el-form-item label="运行状态:" labelWidth="150px">
                                            <div v-if="item.waterLevelSensorStatus == 0" class="block">
                                                <div>
                                                    <label>正常</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>故障</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="是否更换水位传感器:" labelWidth="150px">
                                            <div v-if="item.waterSensorReplace == 0" class="block">
                                                <div>
                                                    <label>否</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>更换</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-if="item.waterSensorReplace == 1" type="flex">
                                    <el-col :span="12">
                                        <el-form-item label="品牌:" labelWidth="150px">
                                            <div class="block">
                                                <label>{{ item.waterSensorBrand }}</label>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="型号:" labelWidth="150px">
                                            <div class="block">

                                                <label>{{ item.waterSensorModel }}</label>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <!-- <el-col :span="6">
                                                                                            <el-form-item label="更换时间:">
                                                                                                <div class="block">
                                                                                                    <label>{{form.waterSensorReplaceDate}}</label>
                                                                                                </div>
                                                                                            </el-form-item>
                                                                                        </el-col> -->
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="备注说明:" labelWidth="150px">
                                            <label>{{ item.waterSensorDesc }}</label>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-if="item.waterSensorPhotoTake == 1" type="flex">
                                    <el-col :span="12">
                                        <div style="padding: 5px 5px 5px 5px;">
                                            <div>
                                                <span>水位传感器图片</span>
                                            </div>
                                            <!-- <el-form-item label="水位传感器图片"> -->
                                            <div class="block">
                                                <!-- <span class="demonstration">默认</span> -->
                                                <el-image :src=toOss(item.waterSensorPhotoUrl)></el-image>
                                            </div>
                                            <!-- </el-form-item> -->
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                            <el-card v-if="item.groundWaterSensorActive == 1" shadow="hover" style="margin-top: 10px;">
                                <div slot="header">
                                    <span>墒情传感器</span>
                                </div>
                                <el-row type="flex">
                                    <el-col :span="12">
                                        <el-form-item label="运行状态:" labelWidth="150px">
                                            <div v-if="item.groundWaterSensorStatus == 0" class="block">
                                                <div>
                                                    <label>正常</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>故障</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="是否更换墒情传感器:" labelWidth="150px">
                                            <div v-if="item.groundSensorReplace == 0" class="block">
                                                <div>
                                                    <label>否</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>更换</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-if="item.groundSensorReplace == 1" type="flex">
                                    <el-col :span="6">
                                        <el-form-item label="品牌:" labelWidth="150px">
                                            <div class="block">
                                                <label>{{ item.groundSensorBrand }}</label>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="型号:" labelWidth="150px">
                                            <div class="block">

                                                <label>{{ item.groundSensorModel }}</label>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <!-- <el-col :span="6">
                                                                                            <el-form-item label="更换时间:">
                                                                                                <div class="block">
                                                                                                    <label>{{form.rtuReplaceDate}}</label>
                                                                                                </div>
                                                                                            </el-form-item>
                                                                                        </el-col> -->
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="备注说明:" labelWidth="150px">
                                            <label>{{ item.groundSensorDesc }}</label>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-if="item.groundSensorPhotoTake == 1" type="flex">
                                    <el-col :span="12">
                                        <div style="padding: 5px 5px 5px 5px;">
                                            <div>
                                                <span>墒情传感器图片</span>
                                            </div>
                                            <!-- <el-form-item label="墒情传感器图片"> -->
                                            <div class="block">
                                                <!-- <span class="demonstration">默认</span> -->
                                                <el-image :src=toOss(item.groundSensorPhotoUrl)></el-image>
                                            </div>
                                            <!-- </el-form-item> -->
                                        </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="24">
                                        <el-form-item label="运行状态:" labelWidth="150px">
                                            <div v-if="item.powerStatus == 0" class="block">
                                                <div>
                                                    <label>正常</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>故障</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="是否更换蓄电池:" labelWidth="150px">
                                            <div v-if="item.batteryReplace == 0" class="block">
                                                <div>
                                                    <label>否</label>
                                                </div>
                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>更换</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>

                                </el-row>
                                <el-row type="flex">

                                    <el-col :span="24">
                                        <el-form-item label="是否更换太阳能板:" labelWidth="150px">
                                            <div v-if="item.sunPowerReplace == 0" class="block">
                                                <div>
                                                    <label>否</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>更换</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="备注说明:" labelWidth="150px">
                                            <label>{{ item.powerDesc }}</label>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex">
                                    <el-col v-if="item.batteryPhotoTake == 1" :span="12">
                                        <div style="padding: 5px 5px 5px 5px;">
                                            <div>
                                                <span>蓄电池图片</span>
                                            </div>
                                            <!-- <el-form-item label="蓄电池图片"> -->
                                            <div class="block">
                                                <!-- <span class="demonstration">默认</span> -->
                                                <el-image :src=toOss(item.batteryPhotoUrl)></el-image>
                                            </div>
                                            <!-- </el-form-item> -->
                                        </div>
                                    </el-col>
                                    <el-col v-if="item.sunPhotoTake == 1" :span="12">
                                        <div style="padding: 5px 5px 5px 5px;">
                                            <div>
                                                <span>太阳能板图片</span>
                                            </div>
                                            <!-- <el-form-item label="太阳能板图片"> -->
                                            <div class="block">
                                                <!-- <span class="demonstration">默认</span> -->
                                                <el-image :src=toOss(item.sunPhotoUrl)></el-image>
                                            </div>
                                            <!-- </el-form-item> -->
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>

                            <el-card v-if="item.networkActive == 1" shadow="hover" style="margin-top: 10px;">
                                <div slot="header">
                                    <span>4G移动网络</span>
                                </div>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="运行状态:" labelWidth="150px">
                                            <div v-if="item.networkStatus == 0" class="block">
                                                <div>
                                                    <label>正常</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>故障</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="12">
                                        <el-form-item label="是否欠费:" labelWidth="150px">
                                            <div v-if="item.networkOverdue == 0" class="block">
                                                <div>
                                                    <label>否</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>欠费</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>

                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="备注说明:" labelWidth="150px">
                                            <label>{{ item.networkDesc }}</label>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-card>

                            <el-card v-if="item.satelliteActive == 1" shadow="hover" style="margin-top: 10px;">
                                <div slot="header">
                                    <span>北斗通讯</span>
                                </div>
                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="运行状态:" labelWidth="150px">
                                            <div v-if="satelliteStatus == 0" class="block">
                                                <div>
                                                    <label>正常</label>
                                                </div>

                                            </div>
                                            <div v-else>
                                                <div>
                                                    <label>故障</label>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>


                                <el-row type="flex">
                                    <el-col :span="24">
                                        <el-form-item label="备注说明:" labelWidth="150px">
                                            <label>{{ item.satelliteDesc }}</label>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                            </el-card>

                            <el-card shadow="hover" style="margin-top: 10px;">
                                <div slot="header">
                                    <span>维修总结</span>
                                </div>

                                <div>
                                    <label style="white-space: pre-wrap;">{{ item.processDesc }}</label>
                                </div>

                                <el-row>
                                    <el-col v-if="item.baseBeforePhoto1Take" :span="12">
                                        <div style="padding: 5px 5px 5px 5px;">
                                            <div>
                                                <span>维修前图片一</span>
                                            </div>
                                            <div class="block">
                                                <!-- <span class="demonstration">默认</span> -->
                                                <el-image :src=toOss(item.baseBeforePhoto1Url)></el-image>
                                            </div>
                                        </div>


                                    </el-col>
                                    <el-col v-if="item.baseBeforePhoto2Take" :span="12">
                                        <div style="padding: 5px 5px 5px 5px;">
                                            <div>
                                                <span>维修前图片二</span>
                                            </div>
                                            <!-- <el-form-item label="图片二"> -->
                                            <div class="block">
                                                <!-- <span class="demonstration">默认</span> -->
                                                <el-image :src=toOss(item.baseBeforePhoto2Url)></el-image>
                                            </div>
                                            <!-- </el-form-item> -->
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col v-if="item.baseAfterPhoto1Take" :span="12">
                                        <div style="padding: 5px 5px 5px 5px;">
                                            <div>
                                                <span>维修后图片一</span>
                                            </div>
                                            <div class="block">
                                                <!-- <span class="demonstration">默认</span> -->
                                                <el-image :src=toOss(item.baseAfterPhoto1Url)></el-image>
                                            </div>
                                        </div>


                                    </el-col>
                                    <el-col v-if="item.baseAfterPhoto2Take" :span="12">
                                        <div style="padding: 5px 5px 5px 5px;">
                                            <div>
                                                <span>维修后图片二</span>
                                            </div>
                                            <!-- <el-form-item label="图片二"> -->
                                            <div class="block">
                                                <!-- <span class="demonstration">默认</span> -->
                                                <el-image :src=toOss(item.baseAfterPhoto2Url)></el-image>
                                            </div>
                                            <!-- </el-form-item> -->
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </div>
                        <div v-else>
                            <el-card shadow="hover">
                                <div slot="header">
                                    <span>维修完成</span>
                                </div>
                                <div>
                                    <label>{{ item.processDesc }}</label>
                                </div>
                            </el-card>
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </el-form>
    </basic-container>
</template>
<script>
import { getList } from "@/api/business/order/process.js";
import { getDictionary } from "@/api/system/dictbiz.js";
export default {
    components: {

    },
    props: {
        orderId: {
            type: [Number],
            required: true
        },
    },
    name: 'checkorderprocessdetail',
    data() {
        return {
            orderStatusCreateKey: 0,
            orderStatusConfirmKey: 0,
            orderStatusProcessKey: 0,
            orderStatusCloseKey: 0,
            query: {},
            processList: [],
        }
    },
    created() {
        this.getOrderStatus();
    },
    methods: {
        toOss(path) {
            console.log("oss " + path);
            //return "/oss/galaxy/" + path;
            return this.website.ossServer + path;
        },
        init() {
            this.onLoad();
        },
        getOrderStatus() {
            var p = { 'code': "rtu_check_order_status" };
            getDictionary(p).then(res => {
                const data = res.data;
                if (data.success) {
                    const dictList = data.data;
                    for (var i = 0; i < dictList.length; i++) {
                        let dict = dictList[i];
                        console.log(dict);
                        if (dict.dictKey === '1') {
                            this.orderStatusCreateKey = dict.id;
                        } else if (dict.dictKey === '2') {
                            this.orderStatusConfirmKey = dict.id;
                        } else if (dict.dictKey === '3') {
                            this.orderStatusProcessKey = dict.id;
                        } else if (dict.dictKey === '4') {
                            this.orderStatusCloseKey = dict.id;
                        }
                    }
                    this.init();
                }
            })
        },
        onLoad(params = {}) {
            this.loading = true;
            params['id'] = this.orderId;
            getList(
                Object.assign(params, this.query)
            ).then((res) => {
                this.processList = res.data.data;
                this.loading = false;
            });
        },

    }
}
</script>

<style></style>

