<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.EquipName?detail.EquipCategory.EquipName:'--':'--' }}
          </el-form-item>
          <el-form-item label="全局名称：">{{ detail.EquipName || '--' }}</el-form-item>
          <el-form-item label="设备本地名称：">{{ detail.EquipLocalName || '--' }}</el-form-item>
          <el-form-item label="设备本地编码：">{{ detail.EquipLocalID || '--' }}</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.EquipLocalName || 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.EquipLocalName || 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.TaskPicList.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 = {
          TaskId: row.TaskId,
          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 = {
          TaskId: row.TaskId,
          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>
