<template>
    <div class="survey-point-position-drawer" v-if="isOpen" style="padding:0px 10px">
     <el-drawer v-if="isOpen" v-model="isOpen" direction="rtl" size="960px" 
     style="padding-left: 20px" title="项目基坑标注">
     <div style="width:940px;height:560px;" class="main-div" :style="'background-image:url('+imgUrl+')'">
       <span v-for="(it,idx) in pts" :key="idx" class="pt-item" 
        v-move
       :style="'top:'+it.y+'px;left:'+it.x+'px;'">
        <i class="el-icon-location-outline pt-icon" ></i>
        <span class="pt-name">{{ it.name }}</span>
       </span>
     </div>
     <div>
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
     </div>
     </el-drawer>
   </div>
 </template>
 
 <script>
 import {getSurProject} from "@/api/project/surProject";
 import {updatePitSurveyPoint } from "@/api/device/pitSurveyPoint";
 import axios from 'axios'
 export default {
   name: 'RuoyiUiPitImageDrawer', 
   data() {
     return {
       isOpen:false,
       pts:null,   
       query:null,
       imgUrl:'',
       dragging:false,
       dragItem:null,     
     };
   },
 
   mounted() {
     
   },
 
   methods: {
    submitForm(){
        let pts=this.$el.querySelectorAll(".pt-item");
        let ajaxs=[];
        for(let i=0;i<pts.length;i++){
            let pt=pts[i];
            let top=pt.style.top.replace("px","");
            let left=pt.style.left.replace("px","");
            let obj={
                x:left,y:top
            }
            this.pts[i].position=JSON.stringify(obj);
            ajaxs.push(updatePitSurveyPoint({id:this.pts[i].id,position:this.pts[i].position}))
        }
        if(ajaxs.length>0){
            axios.all(ajaxs).then(res=>{
                if(res[0].code==200){
                    this.$modal.msgSuccess("修改成功!");
                    this.$emit("success")
                }else{
                    this.$modal.msgError("修改失败!");
                }
                this.isOpen=false;
            });
        }else{
            this.isOpen=false;
        }
    },
     cancel(){
         this.isOpen=false;
     },
     show(pts,query) {
         this.pts = (pts||[]).map(it=>{
            let pt=this.$tryToJson(it.position,{x:0,y:0});
            it.x=pt.x||0;
            it.y=pt.y||0;
            return it;
         });  
         this.query=query;       
         this.isOpen = true;
         this.loadPitImage();
     },
     loadPitImage(){
        getSurProject(this.query.projectId).then(d=>{
            let url=d.data?.prjPlanUrl||"";
            if(!url){
                this.$modal.msgError("请配置项目的基坑图片[项目管理->更多操作->基坑图片管理]")
            }else{
                this.imgUrl=process.env.VUE_APP_BASE_API+url;
            }
        });
     }    
   },
 };
 </script>
 <style lang="scss">
  .survey-point-position-drawer{
     .el-drawer__body{
         padding:0px 10px;
         .main-div{
            margin-bottom: 20px;
            position: relative;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            .pt-item{
                position: absolute;
                cursor: pointer;
                .pt-icon{
                    color:#2962FF;
                    display: block;
                    text-align: center;
                    font-size: 24px;
                    text-shadow: 1px 1px 0px #F3E5F5;
                }
                .pt-name{
                    display: block;
                    color: #2962FF;
                    text-align: center;
                    font-size: 12px;
                    text-shadow: 1px 1px 0px #F3E5F5;
                }
            }
         }
     }
  }
 </style>