<template>
    <div class="detail-box">
        <el-scrollbar style="height: 100%">
            <div class="attribute-detail detail-item">
                <el-form :model="detail" label-width="150px">
                    <el-form-item label="设备基本信息"></el-form-item>
                    <el-form-item label="任务创建时间：">{{ detail.createTime || "--" }}</el-form-item>
                    <el-form-item label="任务当前状态：">{{ detail.taskState || "--" }}</el-form-item>
                    <el-form-item label="任务执行方案：">
                        {{ detail.schemeId ? (detail.schemeId == 1 ? "极简" : "标准") : "--" }}
                    </el-form-item>
                    <el-form-item label="设备类："
                        >{{ detail.equipCategory ? (detail.equipCategory.name ? detail.equipCategory.name : "--") : "--" }}
                    </el-form-item>
                    <el-form-item label="全局名称：">{{ detail.equipName || "--" }}</el-form-item>
                    <el-form-item label="设备本地名称：">{{ detail.localName || "--" }}</el-form-item>
                    <el-form-item label="设备本地编码：">{{ detail.localId || "--" }}</el-form-item>
                    <el-form-item label="设计图纸中编码：">{{ detail.cadId || "--" }}</el-form-item>
                    <el-form-item label="安装位置：">{{ detail.installLocation || "--" }}</el-form-item>
                    <el-form-item label="生产厂家：">{{ detail.manufacturer || "--" }}</el-form-item>
                    <el-form-item label="型号：">{{ detail.specification || "--" }}</el-form-item>
                    <el-form-item label="供应商：">{{ detail.supplier || "--" }}</el-form-item>
                    <el-form-item label="包含部件："> {{ Name ? Name : "-" }}{{ Count ? "：" + Count + "个" : "-" }} </el-form-item>
                </el-form>
            </div>
            <div class="implement-detail detail-item" v-if="detail.taskState === '未找到'">
                <el-form :model="detail" label-width="150px">
                    <el-form-item label="执行任务人：">{{ detail.workerName || "--" }}</el-form-item>
                    <el-form-item label="执行时间：">{{ detail.processTime || "--" }}</el-form-item>
                    <el-form-item label="未找到对象信息"></el-form-item>
                    <el-form-item label="设备信息：" v-if="!detail.isComponent">{{ detail.localName || detail.name || "--" }} </el-form-item>
                    <el-form-item label="部件信息：" v-else>
                        <div v-if="detail.component && detail.component.length">
                            <p v-for="item in detail.component ? detail.component : []" :key="item.taskId" show-overflow-tooltip>
                                {{ item.localName || item.equipName }}
                            </p>
                        </div>
                        <div v-else>--</div>
                    </el-form-item>
                    <el-form-item label="全景图：" v-show="panoramaList && panoramaList.length">
                        <div class="img-item" @click="dialogVisible = true" v-for="item in panoramaList" :key="item.key">
                            <img
                                :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.key}`"
                                style="width: 100%"
                                :alt="item.name"
                            />
                        </div>
                    </el-form-item>
                    <el-form-item label="设备照片：" v-show="imgList && imgList.length">
                        <div class="img-item">
                            <div class="demo-image__preview">
                                <el-image
                                    style="width: 100%"
                                    v-for="item in imgList"
                                    :key="item.key"
                                    :title="item.name"
                                    @click="nowUrl = item.key"
                                    :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.key}&width=400`"
                                    :preview-src-list="srcList"
                                >
                                </el-image>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="现场视频：" v-show="videoList && videoList.length">
                        <video controls style="width: 100%" v-for="item in videoList" :key="item.key" :title="item.name">
                            <source :src="`/image-service/common/file_get?systemId=dataPlatform&key=${item.key}`" type="video/mp4" />
                            您的浏览器不支持 HTML5 video ,暂无法播放。
                        </video>
                    </el-form-item>
                    <el-form-item label="备注信息：">{{ detail.note || "--" }}</el-form-item>
                </el-form>
            </div>
            <div class="operation-detail detail-item" v-if="detail.taskState === '未找到'">
                <el-form>
                    <el-form-item label="操作信息："></el-form-item>
                    <div class="block">
                        <el-timeline>
                            <el-timeline-item placement="top" v-for="(item, index) in arr" :key="index" :timestamp="item.timestamp">
                                <el-card>
                                    <small>{{ item.content }}</small>
                                    <p>{{ item.title }}</p>
                                    <img
                                        v-for="isImg in item.imgs"
                                        :key="isImg.key"
                                        :src="`/image-service/common/image_get?systemId=dataPlatform&key=${isImg.key}`"
                                    />

                                    <video controls style="width: 100%" v-for="(v, i) in item.videoList" :key="`video_${i}`" :title="v.name">
                                        <source :src="`/image-service/common/file_get?systemId=dataPlatform&key=${v.key}`" type="video/mp4" />
                                        您的浏览器不支持 HTML5 video ,暂无法播放。
                                    </video>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-form>
            </div>
        </el-scrollbar>
        <el-dialog title="全景图" :visible.sync="dialogVisible" width="70%" append-to-body> 一张图 </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from "vuex"
import { categoryCount, modelCategoryCount } from "@/api/data_admin/buildTaskApi"

export default {
    components: {},
    computed: {
        ...mapGetters("layout", ["projectId"]),
        notFoundList() {
            if (this.detail && this.detail.component && this.detail.component.length) {//是否存在部件
                let index = this.detail.component.findIndex(item => {
                    return item.taskState == -1
                })
                if (index != -1) {//部件中存在未找到的对象
                    this.detail.isComponent = true
                    return this.detail.component[index].taskPicList ? this.detail.component[index].taskPicList : []
                } else {//部件全部找到
                    this.detail.isComponent = false
                    return this.detail.taskPicList ? this.detail.taskPicList : []
                }
            } else {
                this.detail.isComponent = false
                if (this.detail && this.detail.taskPicList && this.detail.taskState.length) {
                    return this.detail.taskPicList
                } else {
                    return []
                }
            }
        },
        panoramaList() {
            if (this.notFoundList && this.notFoundList.length) {
                return this.notFoundList.filter(item => {
                    return item.type == 'panorama'
                })
            } else {
                return []
            }
        },
        imgList() {
            if (this.notFoundList && this.notFoundList.length) {
                return this.notFoundList.filter(item => {
                    return item.type == 'image'
                })
            } else {
                return []
            }
        },
        videoList() {
            if (this.notFoundList && this.notFoundList.length) {
                return this.notFoundList.filter(item => {
                    return item.type == 'video'
                })
            } else {
                return []
            }
        },
        srcList() {
            let nowIndex = this.imgList.findIndex(item => {
                return item.key == this.nowUrl
            })
            let index = nowIndex >= 1 ? nowIndex : 0;
            let tempArr1 = this.imgList.slice(0, index);
            let tempArr2 = this.imgList.slice(index, this.imgList.length);

            let res = tempArr2.concat(tempArr1).map(item => {
                return `/image-service/common/image_get?systemId=dataPlatform&key=${item.key}`
            });
            return res;
        },
        arr() {
            let { confirmTime, positivePhotoTime, qrCodeTime, nameplateTime, sidePhotoTime, videoTime, equipProblemTime, equipProblem, taskPicList, processTime, regionPhotoTime } = this.detail;
            let arr = []
            processTime && arr.push({
                timestamp: processTime,
                time: new Date(processTime).getTime(),
                content: '执行任务',
            })
            qrCodeTime && arr.push({
                timestamp: qrCodeTime,
                time: new Date(qrCodeTime).getTime(),
                content: '黏贴二维码',
                imgs: taskPicList.length && taskPicList.filter(i => i.name.includes('带二维码的设备近景照片'))
            })
            positivePhotoTime && arr.push({
                timestamp: positivePhotoTime,
                time: new Date(positivePhotoTime).getTime(),
                content: '拍摄正面照片',
                imgs: taskPicList.length && taskPicList.filter(i => i.name.includes('设备正面照片'))
            })
            nameplateTime && arr.push({
                timestamp: nameplateTime,
                time: new Date(nameplateTime).getTime(),
                content: '拍摄铭牌照片',
                imgs: taskPicList.length && taskPicList.filter(i => i.name.includes('铭牌照片'))
            })
            sidePhotoTime && arr.push({
                timestamp: sidePhotoTime,
                time: new Date(sidePhotoTime).getTime(),
                content: '拍摄侧面照片',
                imgs: taskPicList.length && taskPicList.filter(i => i.name.includes('设备左侧照片' || '设备右侧照片'))
            })
            regionPhotoTime && arr.push({
                timestamp: regionPhotoTime,
                time: new Date(regionPhotoTime).getTime(),
                content: '拍摄局部照片',
                imgs: taskPicList.length && taskPicList.filter(i => i.name.includes('其他照片'))
            })
            videoTime && arr.push({
                timestamp: videoTime,
                time: new Date(videoTime).getTime(),
                content: '拍摄30s视频',
                videoList: taskPicList.length && taskPicList.filter(i => i.name.includes('视频资料'))
            })
            equipProblemTime && arr.push({
                timestamp: equipProblemTime,
                time: new Date(equipProblemTime).getTime(),
                content: '记录设备问题',
                title: equipProblem
            })
            confirmTime && arr.push({
                timestamp: confirmTime,
                time: new Date(confirmTime).getTime(),
                content: '确认信息',
                title: '已确认的设备信息'
            })
            return arr.map(i => ({ ...i })).sort((a, b) => a.time - b.time)
        },
    },
    props: {
        detail: Object,
        type: String
    },
    data() {
        return {
            dialogVisible: false,//全景图弹出框
            nowUrl: '',//当前正在显示的图
            Name: '',
            Count: '', //包含部件
        };
    },
    methods: {
        //  查询设备部件数量
        handleContent(row) {
            let param = {
                id: row.id,
                equipId: row.equipId
            }
            this.Name = ''
            this.Count = ''
            categoryCount(param, res => {
                if (res.content.length) {
                    this.Name = res.content[0].name
                    this.Count = res.content[0].count
                }

            })
        },
        //  查询模型部件数量
        handleModelContent(row) {
            let param = {
                id: row.id,
                equipId: row.equipId
            }
            this.Name = ''
            this.Count = ''
            modelCategoryCount(param, res => {
                if (res.content.length) {
                    this.Name = res.content[0].name
                    this.Count = res.content[0].count
                }

            })
        }
    },
    watch: {
        'detail.id'() {
            console.log(this.detail)
        }
    }
};
</script>
<style lang="less" scoped>
.detail-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    /deep/ .el-icon-circle-close {
        color: white;
    }

    /deep/ .el-form-item__content {
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .detail-item {
        width: calc(100% - 30px);
        margin: 15px 15px 10px;
        padding: 10px;
        box-sizing: border-box;
        border-left: 1px solid #eee;
        box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
    }

    .img-item {
        position: relative;
        cursor: pointer;
    }
}
</style>
