<template>
  <!-- 待删除页面 -->
  <div class="box" ref="boxBody">
    <div class="content-box" v-for="(item,index) in pageData" :key="index">
      <div class="content-top">
        <div class="details">
          <h4>{{index | numTransformation(4)}}<el-badge value="待删除" class="item"></el-badge>
          </h4>
          <h4>{{`${item.buildingName || '**'}`}}-{{`${item.floorName || '**'}`}}-{{`${item.localName?item.localName:item.name}`}}</h4>
          <b>BIM ID：<span @dblclick="copyContent"
              id="copy">{{item.bimId | bimIdTransformation}}</span></b><span class="copy"
            @click="clickCopy">点击复制</span>
          <input id="copyContent" type="text" @dblclick="copyContent" style="border:none;opacity:0;position:absolute;top:0;left:0;">
          <!-- <p style="margin-top:30px;">Revit族:{{item.BIMFamilyName}}</p> -->
          <p>设计图纸中编码：{{item.cadId || '--'}}</p>
          <p><span>设备类型：{{item.equipCategory && item.equipCategory.name || '--'}}</span></p>
          <p>设备ID：{{item.id}}</p>
          <!-- <p><span v-if="item.Property && item.Property.FamilyName">资产族:{{item.Property.FamilyName.Name}}</span><span
              v-if="item.PropertyId">关联的资产ID:{{item.PropertyId}}</span></p> -->
          <p>现场任务ID：{{item.scanTaskBase && item.scanTaskBase[0]?item.scanTaskBase[0].id:"--"}}</p>
          <p>
            <span>执行人：{{item.scanTaskBase && item.scanTaskBase[0]?item.scanTaskBase[0].workerName:'--'}}</span><span>确认人：{{item.scanTaskBase && item.scanTaskBase[0]?item.scanTaskBase[0].confirmingPersonName:'--'}}</span>
          </p>
        </div>
        <div class="plan">
          <p>平面图上的位置：<span>{{item.local | localTransformation}}</span></p>
          <div class="img-box">
            <canvas :id="'canvas'+index" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0" :data-modelid="item.modelId"
              :data-equipid='item.id' :data-x="item.local.X" :data-y="item.local.Y"></canvas>
          </div>
        </div>
      </div>
      <div class="content-bottom">
        <div class="explain" v-if="item.scanTaskBase && item.scanTaskBase[0] && item.scanTaskBase[0].note">
          <p>现场问题说明：</p>
          <el-scrollbar>
            <p class="explain-content">
              <el-scrollbar>
                {{item.scanTaskBase?item.scanTaskBase[0].note:""}}
              </el-scrollbar>
            </p>
          </el-scrollbar>
        </div>
        <div class="photo" v-for="it in item.scanTaskBase && item.scanTaskBase[0] && item.scanTaskBase[0].taskPicList || []" :key='it.key'>
          <div class="img-box">
            <p>{{it.name}}<span>拍摄时间：{{it.createTime | timeTransformation}}</span></p>
            <div class="img-content">
              <img v-if="it.type === 'image'" :src="`/image-service/common/image_get?systemId=dataPlatform&key=${it.key}`" :alt="it.name">
              <video v-else-if="it.type === 'video'" style="width: 100%;height: 100%;" controls>
								<source :src="`/image-service/common/file_get?systemId=dataPlatform&key=${it.key}`" type="video/mp4" />
								您的浏览器不支持 HTML5 video ,暂无法播放。
              </video>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { toBeDelEquipPage } from "@/api/scan/request.js";
import { LocationPointScene, FloorView } from "@saga-web/cad-engine/lib";

export default {
  components: {

  },
  data() {
    return {
      pageData: [],
      count: 0,
      equipComDelList: null,
      canvasWidth: 400,
      canvasHeight: 280,
      i: 0,
      scene: '',
      view: '',
      page: {
        pageSize: 20,
        pageNumber: 1,
        total: 0
      }
    }
  },
  mounted() {
    this.queryToBelDelEquip();
    this.boxBody = this.$refs.boxBody;
    this.boxBody.addEventListener('scroll', () => {
      let clientHeight = this.boxBody.clientHeight;
      let scrollTop = this.boxBody.scrollTop;
      let scrollHeight = this.boxBody.scrollHeight;
      if (clientHeight + scrollTop === scrollHeight) {
        console.log(this.page.pageNumber * this.page.pageSize)
        if (this.page.pageNumber * this.page.pageSize < this.page.total) {
          this.page.pageNumber++;
          if (this.pageData.length < 20) {
            this.page.pageNumber = 1
          }
          this.queryToBelDelEquip();
        }
      }
    })
  },
  created() {
    this.equipComDelList = decodeURIComponent(this.$route.query.equipComDelList);
  },
  computed: {
    ...mapGetters('layout', ['projectId'])
  },
  filters: {
    numTransformation(num, length) {// 序列号转换为4位
      num = Number(num + 1)
      return (Array(length).join('0') + num).slice(-length);
    },
    bimIdTransformation(bimId) {// bimID转换
      let ary = bimId.split(":");
      return ary[1];
    },
    localTransformation(local) {// 转换坐标
      let str = "";
      for (let key in local) {
        if (key !== "Z") {
          str += key + '：' + local[key] + '，';
        } else {
          str += key + '：' + local[key];
        }
      }
      return str;
    },
    timeTransformation(time) {
      time = time.substring(0, 16)
      return time;
    }
  },
  methods: {
    copyContent(element) {
      // 双击复制
      let content = element.target.innerText;
      let inputObj = document.getElementById('copyContent');
      inputObj.value = content;
      inputObj.select();
      document.execCommand("Copy");
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: 1000
      });
    },
    clickCopy() {
      // 点击复制
      let target = document.getElementById('copy');
      let content = target.innerText;
      let inputObj = document.getElementById('copyContent');
      inputObj.value = content;
      inputObj.select();
      document.execCommand("Copy");
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: 1000
      });
    },
    queryToBelDelEquip() {// 请求待删除数据
      let params = {
        orders: "createTime desc ,id asc",
        filters: `modelId in ${this.equipComDelList}`,
        cascade: [{ name: "scanTaskBase" }, { name: "equipCategory"}],
        pageNumber: this.page.pageNumber,
        pageSize: this.page.pageSize
      }
      toBeDelEquipPage(params, res => {
        this.page.total = res.pageSize < 20 ? res.pageSize : res.total;
        res.content.forEach(item => {
          if (item.bimLocation) {
            let local = {};
            let ary = item.bimLocation.split(',');
            let localAry = ['X', 'Y', 'Z'];
            ary.forEach((item, index) => {
              local[localAry[index]] = ary[index];
            })
            item.local = local;
          }
          if (item.scanTaskBase && item.scanTaskBase.length > 1) {
            item.scanTaskBase = item.scanTaskBase.shift();
          }
        });
        if (this.page.pageNumber == 1) {
          this.pageData = res.content;
          this.$nextTick(() => {
            this.getGraphy();
          })
        } else {
          this.pageData = this.pageData.concat(res.content);
          console.log(this.pageData.length, 19)
          this.$nextTick(() => {
            this.getGraphy();
          })
        }
        this.pageData.forEach(item => {
          if (item.bimLocation) {
            let local = {};
            let ary = item.bimLocation.split(',');
            let localAry = ['X', 'Y', 'Z'];
            ary.forEach((item, index) => {
              local[localAry[index]] = ary[index];
            })
            item.local = local;
          }
          if (item.scanTaskBase && item.scanTaskBase.length > 1) {
            item.scanTaskBase = item.scanTaskBase.shift();
          }
        });
      })
    },
    getGraphy() {// 绘制空间位置图片
      console.log(this.i);
      let can = this.$refs.canvas;
      if (can && can.length) {
        let modelId = can[this.i].dataset.modelid
        let that = this;
        that.clearGraphy(this.i)
        that.scene = new LocationPointScene();
        this.canvasLoading = true;
        that.scene.getFloorData('/revit-algorithm/base-graph/query', { ModelId: modelId }).then(res => {
            that.canvasLoading = false;
            if (res == 'error') {
            this.FloorMap = '';
            console.log('数据解析异常');
            return;
            }
            let EquipID = can[this.i].dataset.equipid;
            let X = Number(can[this.i].dataset.x);
            let Y = can[this.i].dataset.y * -1;
            that.view.scene = that.scene;
            this.scene.addMarker({
                Id: EquipID,
                X: X,
                Y: Y
            })
            that.scene.isShowSpaceName = false;
            that.view.fitSceneToView();
            that.view.scalable = false;
            this.scene.isSpaceSelectable = false;
            this.i++;
            if (this.i !== this.pageData.length) {
            this.$nextTick(() => {
                this.getGraphy();
            })
            }
        })
      }
    },
    clearGraphy(i) {
      // if (this.view && this.view.scene) {
      //   this.view.scene = null;
      //   return
      // }
      this.view = new FloorView(`canvas${i}`)

    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
// 取消打印功能默认的左右边距
@media print {
  @page {
    margin-left: 0;
    margin-right: 0;
  }
}
.box {
  background: #f2f2f2;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;
  ul {
    .infinite-list-item {
      margin-bottom: 20px;
    }
  }
  .content-box {
    width: 1000px;
    margin: 0 auto;
    background: white;
    padding: 10px 4px 10px 20px;
    box-sizing: border-box;
    .content-top {
      display: flex;
      div {
        flex: 1;
      }
      .details {
        margin-right: 10px;
        .el-badge {
          margin: 10px 0 0 10px;
        }
        p {
          margin-top: 4px;
          span:nth-child(1) {
            display: inline-block;
            width: 200px;
          }
        }
        .copy {
            cursor: pointer;
            color: #409eff;
            margin-left: 20px;
        }
      }
      .plan {
        padding-left: 20px;
        box-sizing: border-box;
        p {
          width: 100%;
          margin: 10px 0 10px 0;
          span {
            float: right;
            padding-right: 20px;
            box-sizing: border-box;
          }
        }
      }
    }
    .content-bottom {
      width: 100%;
      margin-top: 20px;
      overflow: hidden;
      .photo,
      .explain {
        float: left;
        width: 50%;
      }
      .photo {
        box-sizing: border-box;
        margin-bottom: 24px;
        p {
          margin-bottom: 10px;
        }
        span {
          float: right;
          padding-right: 20px;
          box-sizing: border-box;
        }
      }
      .explain {
        padding-right: 20px;
        box-sizing: border-box;
        .el-scrollbar {
          background: #f2f2f2;
        }
        p {
          margin-bottom: 10px;
        }
        .explain-content {
          padding: 10px;
          width: 100%;
          height: 290px;
          box-sizing: border-box;
        }
      }
    }
  }
}
.img-box {
  width: 100%;
  .img-content {
    overflow: hidden;
    position: relative;
    width: calc(100%-20px);
    height: 300px;
    vertical-align: middle;
    text-align: center;
    background: #ebeef5;
    margin-right: 20px;
    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      vertical-align: middle;
    }
  }
}
canvas {
  position: static !important;
}
</style>
