<template>
  <!-- 基本信息 -->
  <div class="cooperator flex">
    <div class="left whiteBlock">
      <!-- <div class="title">全部塔吊</div> -->
      <vue-scroll style="height: 94%">
        <el-menu
          :default-active="String(devTypeIndex)"
          class="el-menu-vertical-demo whiteBlock"
        >
          <!-- <el-menu-item
            index="0"
            class="el-menu-item"
            :class="checkedId == 0 ? 'checked_item' : ''"
            @click="selectMenu(0)"
          >
            <span slot="title">全部设备位置</span>
          </el-menu-item> -->
          <el-menu-item
            :index="String(index)"
            class="el-menu-item"
            :class="devTypeIndex == index ? 'checked_item' : ''"
            v-for="(item, index) in devTypeList"
            @click="devTypeIndex=index;selectMenu(item.id)"
            :key="index"
          >
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </vue-scroll>
      <div class="flex2 btn_pack">
        <!-- <el-button size="small" type="primary" @click="newTowerBtn"
          >新增塔吊</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="deleteOrCancel"
          :disabled="checkedId == 0"
          >{{ checkedId != -1 ? "删除塔吊" : "取消新增" }}</el-button
        > -->
        <el-button size="medium" type="primary" @click="saveTowerLocationBtn">
        {{$t('message.projectInfo.saveLocationInfo')}}
          <!-- 保存位置信息 -->
        </el-button
        >
      </div>
    </div>
    <div class="right">
      <div class="pageTitle title flex2 whiteBlock" style="margin-bottom: 0">
        {{ rightTitle }}
      </div>
      <div class="content whiteBlock">
        <div class="bgPack" >
          <img :src="bgUrl" style="width: auto; height: auto" ref="bgPackImg"/>
          <!-- 塔吊点位 -->
          <div
            v-for="(item, index) in towerList"
            class="point"
            :key="index"
            :style="{ top: item.mapY + 'px', left: item.mapX + 'px' }"
            @mousedown="(e) => mousedown(e, index)"
          >
            <img :src="getDevIcon(item.devType)" alt="">
            <span class="devName">{{item.name}}</span>
            <!-- {{ index + 1 }} -->
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>
<script>
import {
  selectDevCoordinateListApi,
  updateDevCoordinateApi
} from "@/assets/js/api/dataBoard";
export default {
  data() {
    return {
        devTypeList:this.$t('message.projectInfo.devTypeList'),
        devTypeIndex:0,
        devType:'',
        devIcon:'',
      projectSn: "",
      uploadUrl: "",
      fileUrl: "",
      checkTowerId:'',//选中的塔吊id 只作为列表选中状态切换
      checkedId: 0, //选中的设备 -1 新增状态 控制取消按钮  获取选中设备
      towerList: [], //设备列表
      rightTitle: /* "现场施工图", */this.$t('message.projectInfo.SiteConstructionDrawing'),
      driverList: [], //司机列表
      videoList: [],
      showTowerInfo: false, //显示施工图或塔吊信息
      bgUrl: "", //施工图

    };
  },
  created() {
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    this.projectSn = this.$store.state.projectSn;
    this.getTowerList(1);
    // this.getWorkerInfoList();
    // this.getVideoItemList();
    this.bgUrl = this.$store.state.currentProDetail.constructionMapUrl;
  },
  methods: {
      getDevIcon(type) {
      switch (Number(type)) {
        case 1:
          return require("@/assets/images/dataBoard/devIcon-car.png");
          break;
        case 2:
          return require("@/assets/images/dataBoard/devIcon-tower.png");
          break;
        case 3:
          return require("@/assets/images/dataBoard/devIcon-lifter.png");
          break;
        case 4:
          return require("@/assets/images/dataBoard/devIcon-camera.png");
          break;
        case 5:
          return require("@/assets/images/dataBoard/devIcon-electric.png");
          break;
        case 6:
          return require("@/assets/images/dataBoard/devIcon-green.png");
          break;
        case 7:
          return require("@/assets/images/dataBoard/devIcon-face.png");
          break;
        case 8:
          return require("@/assets/images/dataBoard/devIcon-chamber.png");
          break;
      }
    },
    // 获取所有塔吊
    getTowerList() {
      let data = {
        projectSn: this.projectSn,
        devType:this.devType
      };
      selectDevCoordinateListApi(data).then((res) => {
        if (res.code == 200) {
          this.towerList = res.result;
        //   if (type == 1) {
        //     this.checkedId = 0;
        //     this.checkTowerId = '';
        //   } else {
        //     this.checkedId = this.towerList.length;
        //     this.checkTowerId = this.towerList[this.towerList.length-1].id;
        //       //详情
        //       this.selectMenu(this.checkedId);
        //   }
        }
      });
    },

    //切换塔吊
    selectMenu(val) {
      this.devType = val;
      this.getTowerList();
    //   if (val == 0) {
    //     this.rightTitle = "现场施工图";
    //     this.showTowerInfo = false; //显示施工图
    //     this.checkTowerId = '';
    //   } else {
    //     this.showTowerInfo = true;
    //     if (this.towerList[val - 1].id) {
    //       this.rightTitle = this.towerList[val - 1].devName;
    //       this.facilityForm = this.towerList[val - 1];
    //       this.checkTowerId =  this.towerList[val - 1].id;
    //       this.getDetailsData(this.towerList[val - 1].id);
    //     }
    //   }
    },

    // 查询设备详情
    // getDetailsData(id) {
    //   let data = {
    //     id,
    //   };
    //   getDetailsApi(data).then((res) => {
    //     if (res.code == 200) {
    //       this.facilityForm = res.result;
    //       let workerIdArr = [];
    //       let videoItemIdArr = [];
    //       for (let i = 0; i < res.result.driverList.length; i++) {
    //         workerIdArr.push(res.result.driverList[i].workerId);
    //       }
    //       for (let i = 0; i < res.result.videoList.length; i++) {
    //         videoItemIdArr.push(res.result.videoList[i].videoItemId);
    //       }
    //       this.facilityForm.driverList = workerIdArr;
    //       this.facilityForm.videoList = videoItemIdArr;
    //     }
    //   });
    // },

    //新增塔吊按钮
    // newTowerBtn() {
    //   this.facilityForm = {
    //     devName: "",
    //     devSn: "",
    //     forearmLength: "",
    //     towerHeight: "",
    //     registNo: "",
    //     factoryName: "",
    //     anticollision: 0,
    //     workerId: "",
    //     videoItemId: "",
    //   };
    //   this.showTowerInfo = true;
    //   this.checkedId = -1;
    //   this.checkTowerId = '';
    //   this.rightTitle = "新增塔吊";
    // },

    //删除或取消按钮
    // deleteOrCancel() {
    //   //新增状态 this.checkedId=-1 为取消按钮
    //   if (this.checkedId == -1) {
    //     this.rightTitle = "现场施工图";
    //     this.checkedId = 0;
    //     this.showTowerInfo = false;
    //   } else {
    //     // 删除按钮
    //     this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     })
    //       .then(() => {
    //         let data = {
    //           id: this.towerList[this.checkedId - 1].id,
    //         };
    //         deleteTowerInfoApi(data).then((res) => {
    //           if (res.code == 200) {
    //             this.getTowerList(1);
    //             this.showTowerInfo = false;
    //             this.rightTitle = "现场施工图";
    //             this.$message({
    //               type: "success",
    //               message: "删除成功!",
    //             });
    //           } else {
    //             this.$message.error(res.message);
    //           }
    //         });
    //       })
    //       .catch(() => {
    //         this.$message({
    //           type: "info",
    //           message: "已取消删除",
    //         });
    //       });
    //   }
    // },

    //移动塔吊位置
    mousedown(e, index) {
      let bgPackImg = this.$refs.bgPackImg; //获取背景图
      let maxH = bgPackImg.scrollHeight - 30; //可移动的最大高度
      let maxW = bgPackImg.scrollWidth - 30; //可移动的最大宽度
      let objDiv = document.getElementsByClassName('point')[index];
      //算出鼠标相对元素的位置
      let disX = e.clientX - objDiv.offsetLeft;
      let disY = e.clientY - objDiv.offsetTop;
// 

      //鼠标移动时
      document.onmousemove = (e) => {
          console.log('document.onmousemove')
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        console.log(left,top)
        if (left < 0 || top < 0 || top>maxH || left>maxW) {
          return;
        } else {
          this.towerList[index].mapX = left;
          this.towerList[index].mapY = top;
        }
      };
      //鼠标松开时
      document.onmouseup = (e) => {
          console.log('document.onmouseup')
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },

    // //获取司机列表
    // getWorkerInfoList() {
    //   let data = {
    //     projectSn: this.projectSn,
    //   };
    //   getWorkerInfoListApi(data).then((res) => {
    //     if (res.code == 200) {
    //       this.driverList = res.result;
    //     }
    //   });
    // },

    //获取摄像机列表
    // getVideoItemList() {
    //   let data = {
    //     projectSn: this.projectSn,
    //   };
    //   getVideoItemListApi(data).then((res) => {
    //     if (res.code == 200) {
    //       this.videoList = res.result.list;
    //     }
    //   });
    // },

    //保存新增
    // submit() {
    //   this.$refs["facilityForm"].validate((valid) => {
    //     if (valid) {
    //       let data = JSON.parse(JSON.stringify(this.facilityForm));
    //       data.projectSn = this.projectSn;
    //       data.mapX = "0";
    //       data.mapY = "0";
    //       let driverArr = [];
    //       let videoArr = [];
    //       //循环选中的司机
    //       for (let i = 0; i < data.driverList.length; i++) {
    //         let obj = { workerId: data.driverList[i] };
    //         driverArr.push(obj);
    //       }
    //       //循环选中的摄像头
    //       for (let i = 0; i < data.videoList.length; i++) {
    //         let obj = { videoItemId: data.videoList[i] };
    //         videoArr.push(obj);
    //       }
    //       data.driverList = driverArr;
    //       data.videoList = videoArr;
    //       if(this.checkedId==-1){
    //         //新增
    //         addTowerInfoApi(data).then((res) => {
    //           if (res.code == 200) {
    //             this.getTowerList(2);
    //             this.$message.success('新增成功')
    //           } else {
    //             this.$message.error(res.message);
    //           }
    //         });
    //       }else{
    //         editTowerInfoApi(data).then((res)=>{
    //            if(res.code==200){
    //              this.getTowerList(1);
    //              this.$message.success('编辑成功')
    //            }
    //         })
    //       }

    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    //保存塔吊位置
    saveTowerLocationBtn(){
      console.log(this.towerList)
    //   let data = [];
    //   for(let i = 0; i<this.towerList.length;i++){
    //     let obj = {id:this.towerList[i].id,mapX:this.towerList[i].mapX,mapY:this.towerList[i].mapY};
    //     data.push(obj)
    //   }
      updateDevCoordinateApi(this.towerList).then(res=>{
        console.log(res)
        if(res.code==200){
          // 保存成功
          this.$message.success(this.$t('message.projectInfo.saveSuccess'));
          this.getTowerList();
        }
      })
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex3 {
  display: flex;
  align-items: center;
}
.cooperator {
  width: 100%;
  height: 100%;
  .left {
    height: 100%;
    width: 300px;
    // width: 25%;
    margin-right: 15px;
    font-size: 15px;
    .title {
      height: 41px;
      line-height: 41px;
      box-sizing: border-box;
      padding: 0 22px;
      margin-bottom: 0;
      // color: #282e49;
      // border-bottom: 2px #ebf0fc solid;
      font-weight: 600;
    }
    .el-menu-item {
      border-bottom: 2px #ebf0fc solid;
      height: 50px;
      line-height: 50px;
      padding: 0 30px !important;
      font-size: 16px;
    }
    .checked_item {
      border-left: 3px solid @--color-primary;
      padding: 0 27px !important;
      background-color: #e1e8fa !important;
    }
    .btn_pack {
      justify-content: center;
    }
  }
  .right {
    height: 100%;
    width: calc(100% - 300px);
    // width: 75%;
    .title {
      font-size: 15px;
      height: 41px;
      line-height: 41px;
      // background-color: #ffffff;
      box-sizing: border-box;
      padding: 0 22px;
      // color: #282e49;
      border-bottom: 2px #ebf0fc solid;
      font-weight: 600;
      .right_value {
        color: rgba(115, 121, 150, 100);
        font-size: 14px;
        font-weight: 100;
        .value {
          color: @--color-primary;
        }
      }
    }
    .content {
      height: calc(100% - 41px);
      // background-color: #fff;
      box-sizing: border-box;
      padding: 20px 20px;
      .demo-facilityForm {
        width: 50%;
      }
    }
  }
}
/deep/ .__view {
  min-height: calc(100% - 41px) !important;
}
/deep/ .el-checkbox__label {
  display: none;
}
.el-menu-vertical-demo {
  width: 100%;
}

.cooperatorDetail {
  width: 100%;
  height: 100%;
  // background: #ffffff;
  box-sizing: border-box;
  .navigationTitle {
    //    border-bottom: 2px solid #ebf0fc;
    // margin-bottom: 15px;
  }
}

.nodata_wrap {
  width: 100%;
  text-align: center;
  height: 80%;
  padding-top: 20%;
  box-sizing: border-box;
  // color: #c3d4fd;
  div {
    margin-top: 10px;
  }
}

.bgPack {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  position: relative;
  overflow: auto;
  .point {
    position: absolute;
    display: inline-flex;
    align-items: center;
    // border-radius: 50%;
    // background: rgb(236, 126, 46);
    // text-align: center;
    // line-height: 30px;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    img{
        width: 52px;
    height: 58px;
    }
    .devName{
        color: #fff;
        font-size: 13px;
        // margin-left: 10px;
    }
  }
//   .point:hover {
//     background: rgb(241, 191, 24);
//   }
}
</style>