<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.TaskId || '--' }}</el-form-item>
          <el-form-item label="设备类：">{{ 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="包含部件：">
            <div v-if="detail.Equipment.Component && detail.Equipment.Component.length">
              <p v-for="(item, index) in detail.Equipment.Component" :key="index" show-overflow-tooltip>
               {{ item.EquipName }}
              </p>
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-form>
      </div>
      <div class="implement-detail detail-item">
        <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="部件信息：">
            <div v-if="detail.Equipment.Component && detail.Equipment.Component.length">
              <p v-for="(item, index) in detail.Equipment.Component" :key="index" show-overflow-tooltip>
               {{ item.EquipName }}
              </p>
            </div>
            <div v-else>--</div>
          </el-form-item>
          <el-form-item label="全景图：">
            <div class="img-item" @click="dialogVisible = true">
              <img src="@/assets/house.jpg" style="width:100%;" alt="图片走丢了">
            </div>
          </el-form-item>
          <el-form-item label="部件照片：">
            <div class="img-item">
              <div class="demo-image__preview">
                <el-image style="width:100%;" @click="nowUrl = url1" :src="url1" :preview-src-list="srcList"></el-image>
                <el-image style="width:100%;" @click="nowUrl = url2" :src="url2" :preview-src-list="srcList"></el-image>
                <el-image style="width:100%;" @click="nowUrl = url3" :src="url3" :preview-src-list="srcList"></el-image>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="现场视频：">
            <video controls style="width:100%;">
              <source src="https://www.runoob.com/try/demo_source/movie.mp4" 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">
        <el-form>
          <el-form-item label="操作信息："></el-form-item>
          <div class="block">
            <el-timeline>
              <el-timeline-item timestamp="2018/4/12" placement="top">
                <el-card>
                  <h4>更新 Github 模板</h4>
                  <p>王小虎 提交于 2018/4/12 20:46</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/3" placement="top">
                <el-card>
                  <h4>更新 Github 模板</h4>
                  <p>王小虎 提交于 2018/4/3 20:46</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/2" placement="top">
                <el-card>
                  <h4>更新 Github 模板</h4>
                  <p>王小虎 提交于 2018/4/2 20:46</p>
                </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 { } from "@/api/scan/request"
import { mapGetters } from "vuex"
export default {
  components: {

  },
  computed: {
    ...mapGetters("layout", ["projectId"]),
    srcList: function () {
      let index = this.urls.indexOf(this.nowUrl) >= 1 ? this.urls.indexOf(this.nowUrl) : 0;
      //  let temp = this.urls.concat();
      let temp = this.urls;
      let tempArr1 = temp.slice(0, index);
      let tempArr2 = temp.slice(index, temp.length);

      let res = tempArr2.concat(tempArr1);
      return res;
    }
  },
  props: {
    detail: Object,
  },
  data() {
    return {
      dialogVisible: false,//全景图弹出框
      nowUrl: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',//当前正在显示的图
      url1: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      url2: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      url3: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
      urls: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']
    };
  },
  created() {
    console.log(this.detail);
  },
  methods: {
  },
  watch: {
    detail: {
      handler(newName, oldName) {
        // this.page.pageNumber = 1
        // this.getTableData()
      },
      immediate: true,
      deep: true
    }
  }
};
</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>