<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.equipFamily ? detail.equipFamily.equipName ? detail.equipFamily.equipName : '--' : '--'
            }}
          </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.equipId || '--' }}</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.equipName
              || '--'
            }}
          </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 in videoList" :key="index"
                         :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: {},
  created() {
    let { confirmTime, positivePhotoTime, qrCodeTime, nameplateTime, sidePhotoTime, videoTime, equipProblemTime, equipProblem, taskPicList } = this.detail;
    let arr = []
    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('设备左侧照片' || '设备右侧照片'))
    })
    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: '已确认的设备信息'
      })
      this.arr = arr.map(i => ({...i})).sort((a, b) => b.time - a.time)
    },
    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;
      }
    },
    props: {
      detail: Object,
      type: String
    },
    data() {
      return {
        dialogVisible: false,//全景图弹出框
        nowUrl: '',//当前正在显示的图
        arr: [],
        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.TaskId'() {
        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>
