<template>
    <div class="fullHeight positionPage">
        <div class="left fullHeight whiteBlock">
            <div class="title">
                <span>基坑列表</span>
            </div>
            <div class="list_content">
                <vue-scroll v-if="buildList.length>0">
                    <div
                            class="flex content_data"
                            v-for="(item,index) in buildList"
                            :key="index"
                            :class="{'active':activeBuildIndex==index }"
                            @click="changeBuildFn(item,index)"
                    >
                        <div>{{item.buildName}}</div>
                        <div class="flex2">
                            <img
                                    @click.stop="editBuildFn(item)"
                                    src="@/assets/images/icon-edit.png"
                                    style="margin-right:16px"
                                    class="icon"
                            />
                            <img
                                    @click.stop="deleteBuildFn(item)"
                                    src="@/assets/images/icon-delete.png"
                                    class="icon"
                            />
                        </div>
                    </div>
                </vue-scroll>
                <div class="placeholderBox" v-else>{{$t('message.personnelPosition.mapManage.no_data')}}</div>
            </div>
            <div class="addFirm" @click="addBuildDialog=true;isAdd=true;addBuildForm.buildName=''">
                新增基坑
            </div>
        </div>
        <div class="right fullHeight">
            <!-- <div class="floorBox whiteBlock">
                <ul>
                    <li class="addFloorBox" @click="addFloorFn">
                        <i class="el-icon-plus"></i>
                        <p>{{$t('message.personnelPosition.mapManage.new_floor')}}</p>
                    </li>
                    <li
                            v-show="canAddRoom && (index<=showFloorNum-2||showAllFloor)||(floorList.length==showFloorNum)"
                            v-for="(item,index) in floorList"
                            :key="index"
                            :class="{'active':currentFloorDetail.floorId==item.floorId}"
                            @click="floorIndex=index;changeFloor(item)"
                    >
                        <p class="floorName">
                            {{item.floorName}}{{$t('message.personnelPosition.mapManage.floorName')}}</p>
                        <el-popover
                                popper-class="projectPopoverBox"
                                placement="bottom"
                                width="80"
                                trigger="click"
                        >
                            <ul class="operateList">
                                <li @click.stop="editFloorFn(item)">
                                    <img src="@/assets/images/icon-edit.png"/>{{$t('message.personnelPosition.mapManage.edit')}}
                                </li>
                                <li class="last" @click.stop="deleteFloorFn(item)">
                                    <img src="@/assets/images/icon-delete.png"/>{{$t('message.personnelPosition.mapManage.delete')}}
                                </li>
                            </ul>
                            <div slot="reference">
                                <p class="caretIcon">
                                    <i class="el-icon-caret-bottom"></i>
                                </p>
                            </div>
                        </el-popover>
                    </li>
                    <li
                            v-show="canAddRoom && floorList.length>showFloorNum&&!showAllFloor"
                            class="more"
                            @click="showAllFloor=true"
                    >...
                    </li>
                </ul>
            </div> -->
            <div class="mapContainer whiteBlock" id="mapContainer" v-show="mapUrl">
                 <!-- v-if="currentFloorDetail" -->
                <div class="infoDetail" style="height:30px">
                    <!-- <span>{{$t('message.personnelPosition.mapManage.floorWidth')}}{{currentFloorDetail.floorWidth}}:{{currentFloorDetail.imageWidth}}</span> -->
                    <!-- <span>{{$t('message.personnelPosition.mapManage.floorLength')}}{{currentFloorDetail.floorLength}}:{{currentFloorDetail.imageLength}}</span> -->
                    <div class="operateBox">
                        <img src="@/assets/images/personPosition/zoomin.png" @click="shrink" v-show="!isadding"/>
                        <img src="@/assets/images/personPosition/zoomout.png" @click="magnify" v-show="!isadding"/>
                        <img
                                src="@/assets/images/personPosition/addPoint.png"
                                class="add"
                                v-show="!isadding"
                                @click="isadding=!isadding;multiples = 1"
                        />
                        <img
                                src="@/assets/images/personPosition/addPointing.png"
                                class="add"
                                v-show="isadding"
                                @click="isadding=!isadding"
                        />

                    </div>
                    <el-upload
                            class="uploadBtn"
                            ref="upload"
                            name="files"
                            :action="$store.state.UPLOADURL"
                            :on-success="uploadMapSuccess"
                            accept=".png, .jpg, .jpeg"
                            :show-file-list="false"
                    >
                        <el-button slot="trigger" type="primary" size="medium">
                            {{$t('message.personnelPosition.mapManage.re_upload')}}
                        </el-button>
                    </el-upload>
                </div>

                <div class="mapBox" id="mapBox">
                    <div
                            class="mapContent"
                            id="mapContent"
                            :style="{transform:'scale('+multiples+')',transformOrigin:'top left'}"
                    >
                        <img
                                id="map"
                                :src="mapUrl"
                                class="map"
                                :style="{transform:'rotateZ('+deg+'deg)'}"
                                @click="addPoint($event)"
                        />
                        <div
                                v-drag="item"
                                class="personBox"
                                v-for="(item,index) in pointList"
                                :key="index"
                                :style="{left:item.coordinateX+'px',top:item.coordinateY+'px'}"
                        >
                            <el-popover placement="top" width="auto" trigger="click">
                                <div class="devDetail">
                                    <p>名称：{{item.name}}</p>
                                    <p>倾角：{{item.angle}}°</p>
                                    <p>倾斜X角度：{{item.angleX}}°</p>
                                    <p>倾斜Y角度：{{item.angleY}}°</p>
                                    <p>倾斜X位移：{{item.placeX}}mm</p>
                                    <p>倾斜Y位移：{{item.placeY}}mm</p>
                                    <!-- <p>
                                        <span class="primaryText hovers" @click="editPoint(item,index)">{{$t('message.personnelPosition.mapManage.edit')}}</span>
                                        <span class="redText hovers" @click="removePoint(item,index)">{{$t('message.personnelPosition.mapManage.delete')}}</span>
                                    </p> -->
                                </div>
                                <img slot="reference" src="@/assets/images/personPosition/monitorPoint.png" alt/>
                            </el-popover>
                        </div>
                        <!-- <div class="personBox" v-for="item in personLocation" :key="item.id" :style="{left:item.longitude+'px',top:item.latitude+'px'}">
                          <el-popover
                            placement="top"
                            width="auto"
                            trigger="click">
                            <div class="devDetail">
                              <p>姓名：{{item.workerName}}</p>
                              <p>标签SN：{{item.readDevSn}}</p>
                              <p>读卡设备SN：{{item.readDevSn}}</p>
                              <p>
                                <span class="primaryText hovers" @click="editPoint(item,index)">编辑</span>
                                <span class="redText hovers" @click="removePoint(item,index)">删除</span>
                              </p>
                            </div>
                            <img slot="reference" src="@/assets/images/personPosition/personLocation.png" alt="">
                          </el-popover>
                        </div>-->
                    </div>
                </div>
            </div>
            <div class="mapContainer whiteBlock" v-show="!mapUrl">
                <div class="placeholderBox">
                    <img src="@/assets/images/noData.png" alt srcset/>
                    <p>
                        {{$t('message.personnelPosition.mapManage.no_drawings')}}
                        <el-upload
                                style="display:inline-block"
                                ref="upload"
                                name="files"
                                :action="$store.state.UPLOADURL"
                                :on-success="uploadMapSuccess"
                                :before-upload="beforeAvatarUpload"
                                accept=".png, .jpg, .jpeg"
                                :show-file-list="false"
                        >
                            <span slot="trigger">{{$t('message.personnelPosition.mapManage.click_upload')}}</span>
                            <!--点击上传-->
                        </el-upload>
                    </p>
                </div>
            </div>
        </div>
        <!-- 添加楼栋弹框 -->
        <el-dialog :modal-append-to-body="false" :title="isAdd?'新增基坑':'编辑基坑'" :visible.sync="addBuildDialog" width="667px">
            <div class="dialog_content">
                <el-form
                        size="medium"
                        :model="addBuildForm"
                        ref="addBuildForm"
                        :rules="addBuildFormRules"
                        label-width="120px"
                        class="dialogFormBox"
                >
                    <el-form-item :label="'名称'"
                                  prop="buildName">
                        <el-input v-model="addBuildForm.buildName"
                                  :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="addBuildDialog = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.personnelPosition.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="saveBuildFn"
                                size="medium"
                        >{{$t('message.personnelPosition.determine')}}
                        </el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
        <!-- 添加楼层弹框 -->
        <el-dialog :modal-append-to-body="false" :title="floorDialogTitle" :visible.sync="addFloorDialog" width="667px">
            <div class="dialog_content">
                <el-form
                        size="medium"
                        :model="floorForm"
                        ref="floorForm"
                        :rules="floorFormRules"
                        label-width="120px"
                        class="dialogFormBox"
                >
                    <el-form-item :label="$t('message.personnelPosition.mapManage.dialog_floor.floorName')"
                                  prop="floorName">
                        <el-input v-model="floorForm.floorName"
                                  :placeholder="$t('message.personnelPosition.please_enter')">
                            <template slot="append">{{$t('message.personnelPosition.mapManage.floorName')}}</template>
                            <!--层-->
                        </el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.personnelPosition.mapManage.dialog_floor.floorLength')"
                                  prop="floorLength">
                        <el-input v-model="floorForm.floorLength"
                                  :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.personnelPosition.mapManage.dialog_floor.floorWidth')"
                                  prop="floorWidth">
                        <el-input v-model="floorForm.floorWidth"
                                  :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="addFloorDialog = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.personnelPosition.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="saveFloorFn"
                                size="medium"
                        >{{$t('message.personnelPosition.determine')}}
                        </el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
        <!-- 图片裁剪弹框 -->
        <el-dialog :modal-append-to-body="false" :title="$t('message.personnelPosition.mapManage.dialog_KJNova_Clipper.title')"
                   :visible.sync="cropperDialog" width="1200px">
            <div class="dialog_content" style="height: 600px">
                <!-- <vue-scroll> -->
                <vueCropper
                        ref="cropper"
                        :img="cropperOption.img"
                        :outputType="cropperOption.outputType"
                        :autoCrop="true"
                ></vueCropper>
                <!-- </vue-scroll> -->
            </div>
            <div class="dialog-footer">
                <el-button
                        class="cancleBtn"
                        @click="cropperDialog = false"
                        icon="el-icon-circle-close"
                        size="medium"
                >{{$t('message.personnelPosition.cancel')}}
                </el-button>
                <el-button
                        type="primary"
                        icon="el-icon-circle-check"
                        @click="saveMapUrlFn"
                        size="medium"
                >{{$t('message.personnelPosition.determine')}}
                </el-button>
            </div>
        </el-dialog>
        <!-- 项目配置弹框 -->
        <el-dialog :modal-append-to-body="false" :title="$t('message.personnelPosition.mapManage.dialog_Project_config.title')" :show-close="false"
                   :close-on-press-escape="false"
                   :visible.sync="editProjectSettingDialog" width="667px" :close-on-click-modal="false">
            <div class="dialog_content">
                <el-form
                        size="medium"
                        :model="projectSettingForm"
                        ref="projectSettingForm"
                        :rules="projectSettingRules"
                        label-width="120px"
                        class="dialogFormBox"
                >
                    <el-form-item :label="$t('message.personnelPosition.mapManage.dialog_Project_config.positionType')"
                                  prop="positionType">
                        <el-select v-model="projectSettingForm.positionType" :placeholder="$t('message.personnelPosition.please_select')">
                            <el-option :label="$t('message.personnelPosition.mapManage.dialog_Project_config.option_1')"
                                       value="1"></el-option>
                            <el-option :label="$t('message.personnelPosition.mapManage.dialog_Project_config.option_2')"
                                       value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <p class="redText">
                            {{$t('message.personnelPosition.mapManage.dialog_Project_config.redText')}}{{projectSettingForm.positionType==1?$t('message.personnelPosition.mapManage.dialog_Project_config.option_2'):$t('message.personnelPosition.mapManage.dialog_Project_config.option_1')}}</p>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="editProjectSettingDialog = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.personnelPosition.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="editProjectSetting"
                                size="medium"
                        >{{$t('message.personnelPosition.determine')}}
                        </el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
        <!-- 添加卡片弹框 -->
        <el-dialog :modal-append-to-body="false" :title="cardDialogTitle" :visible.sync="cardDialog" width="667px">
            <div class="dialog_content">
                <el-form
                        size="medium"
                        :model="cardForm"
                        ref="cardForm"
                        :rules="cardFormRules"
                        label-width="120px"
                        class="dialogFormBox"
                >
                    <el-form-item :label="$t('message.personnelPosition.mapManage.dialog_card.cardNo')" prop="cardNo">
                        <el-input v-model="cardForm.cardNo"
                                  :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="cardDialog = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.personnelPosition.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="saveCardFn"
                                size="medium"
                        >{{$t('message.personnelPosition.determine')}}
                        </el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
        <!-- 添加信标弹框 beaconDialogTitle-->
        <el-dialog :modal-append-to-body="false" :title="'新增点位'" :visible.sync="beaconDialog" width="667px">
            <div class="dialog_content">
                <el-form
                        size="medium"
                        :model="beaconForm"
                        ref="beaconForm"
                        :rules="beaconFormRules"
                        label-width="120px"
                        class="dialogFormBox"
                >
                    <el-form-item :label="'名称'"
                                  prop="beaconMinor">
                        <el-input v-model="beaconForm.beaconMinor"
                                  :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
                    </el-form-item>
                    <!-- <el-form-item :label="$t('message.personnelPosition.mapManage.dialog_beacon.beaconMajor')"
                                  prop="beaconMajor">
                        <el-input v-model="beaconForm.beaconMajor"
                                  :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
                    </el-form-item> -->
                    <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="beaconDialog = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.personnelPosition.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="saveBeaconFn"
                                size="medium"
                        >{{$t('message.personnelPosition.determine')}}
                        </el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        addPositionBuildApi,
        getPositionBuildListApi,
        editPositionBuildApi,
        deletePositionBuildApi,
        addPositionFloorApi,
        editPositionFloorApi,
        deletePositionFloorApi,
        getPositionFloorListApi,
        addPositionCardApi,
        editPositionCardApi,
        deletePositionCardApi,
        getAllPositionCardListApi,
        addPositionBeaconApi,
        editPositionBeaconApi,
        deletePositionBeaconApi,
        getAllPositionBeaconListApi,
    } from "@/assets/js/api/personnelPosition.js";
    import {
        getProjectConfigListApi,
        editProjectConfigListApi,
    } from "@/assets/js/api/project.js";
    import {VueCropper} from "vue-cropper";

    var VUE = null;
    export default {
        components: {
            VueCropper,
        },
        directives: {
            drag: function (el, binding) {
                // console.log('binding,',binding)
                var json = binding.value;
                let oDiv = el; //当前元素
                var _this = this;
                oDiv.onmousedown = function (e) {
                    // console.log(oDiv)
                    e.preventDefault();
                    let bw = document.body.clientWidth;
                    let bh = document.body.clientHeight;
                    //鼠标按下，计算当前元素距离可视区的距离
                    let disX = e.clientX - oDiv.offsetLeft;
                    let disY = e.clientY - oDiv.offsetTop;
                    // let w2 = oDiv.offsetLeft
                    // let h2 = oDiv.offsetTop
                    // 计算两边坐标
                    document.onmousemove = function (e) {
                        let l = 0;
                        let t = 0;
                        // 拖动边界
                        if (e.clientX >= bw) {
                            l = bw - disX;
                        } else if (e.clientX <= 0) {
                            l = 0 - disX;
                        } else {
                            l = e.clientX - disX;
                        }
                        if (e.clientY >= bh) {
                            t = bh - disY;
                        } else if (e.clientY <= 0) {
                            t = 0 - disY;
                        } else {
                            t = e.clientY - disY;
                        }
                        // console.log(l,t)
                        //移动当前元素
                        oDiv.style.left = l + "px";
                        oDiv.style.top = t + "px";

                        json.coordinateX = l;
                        json.coordinateY = t;

                        //获取移动的相对距离
                        // let w1 = w2 - l
                        // let h1 = h2 - t
                        // //如果是拖动图片
                        // if(oDiv.getAttribute('id')=='map'){
                        //   let els = document.getElementsByClassName('personBox')
                        //   console.log(w1,h1)
                        //   console.log(els[0].style.left.substring(0,els[0].style.left.length-2))
                        //   console.log(els[0].style.top)
                        //   console.log(els[0].style.top.substring(0,els[0].style.top.length-2))
                        //   for (var i = 0; i < els.length; i++) {
                        //     els[i].style.left = (parseFloat(els[i].style.left.substring(0,els[i].style.left.length-2))+parseFloat(w1))+'px'
                        //     els[i].style.top = (parseFloat(els[i].style.top.substring(0,els[i].style.top.length-2))+parseFloat(h1))+'px'
                        //   }
                        // }
                    };

                    // 鼠标停止移动时，事件移除
                    document.onmouseup = function (e) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        // console.log(VUE.projectSettingForm)
                        // console.log(VUE.cardForm)
                        if (VUE.projectSettingForm.positionType == 1) {
                            editPositionCardApi(json).then((res) => {
                                // VUE.cardDialog = false;
                                // VUE.loadCardData();
                                // VUE.$message.success("保存位置成功！");
                            });
                        } else {
                            editPositionBeaconApi(json).then((res) => {
                                // VUE.cardDialog = false;
                                // VUE.loadCardData();
                                // VUE.$message.success("保存位置成功！");
                            });
                        }
                    };
                };
            },
        },
        data() {
            return {
                buildList: [
                   
                ],
                currentBuildInfo: null,
                activeBuildIndex: 0,
                floorDialogTitle: this.$t('message.personnelPosition.mapManage.new_floor'),//新增楼层
                floorIndex: 0,
                floorForm: {
                    floorName: "",
                    buildId: "",
                },
                floorFormRules: {
                    floorName: [{
                        required: true,
                        message: this.$t('message.personnelPosition.required'),
                        trigger: "blur"
                    }],
                    floorLength: [{
                        required: true,
                        message: this.$t('message.personnelPosition.required'),
                        trigger: "blur"
                    }],
                    floorWidth: [{
                        required: true,
                        message: this.$t('message.personnelPosition.required'),
                        trigger: "blur"
                    }],
                },
                floorList: [],
                currentFloorDetail: null,
                addFloorDialog: false,
                showAllFloor: false,
                deleteFloorId: "",
                showFloorNum: 0,
                canAddRoom: false,
                searchForm: {
                    buildId: "",
                    companySn: "",
                    floorId: "",
                },
                dialogTitle: this.$t('message.personnelPosition.mapManage.add_build'),//添加楼栋
                addBuildDialog: false,
                addBuildForm: {
                    buildName: "",
                    projectSn: this.$store.state.projectSn,
                },
                addBuildFormRules: {
                    buildName: [{
                        required: true,
                        message: this.$t('message.personnelPosition.required'),
                        trigger: "blur"
                    }],
                },
                isAdd: false,
                cropperDialog: false,
                cropperOption: {
                    outputType: "png",
                    img: "",
                },
                mapUrl: null,
                isadding: false,
                multiples: 1,
                pointList: [
                    {coordinateX:600,coordinateY:600,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
                    {coordinateX:150,coordinateY:150,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
                    {coordinateX:260,coordinateY:260,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
                    {coordinateX:470,coordinateY:550,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
                    {coordinateX:56,coordinateY:100,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
                    {coordinateX:380,coordinateY:390,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
                    {coordinateX:700,coordinateY:470,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'}
                ],
                deg: 0,
                mapEL: null,
                mapBoxEL: null,
                mapBoxTop: 0,
                mapBoxLeft: 0,
                editProjectSettingDialog: false,
                projectSettingForm: {
                    positionType: "",
                    projectSn: this.$store.state.projectSn,
                },
                projectSettingRules: {
                    positionType: [{
                        required: true,
                        message: this.$t('message.personnelPosition.mandatory'),
                        trigger: "blur"
                    }],
                },
                cardDialogTitle: "",
                cardDialog: false,
                cardForm: {
                    cardNo: "",
                    coordinateX: "",
                    coordinateY: "",
                    // "electricity": "",
                    floorId: 0,
                    // "personType": 0,
                    projectSn: this.$store.state.projectSn,
                    // "workerId": 0,
                    // "workerName": ""
                },
                cardFormRules: {
                    cardNo: [{
                        required: true,
                        message: this.$t('message.personnelPosition.mandatory'),
                        trigger: "blur"
                    }],
                },
                beaconDialogTitle: "",
                beaconDialog: false,
                beaconForm: {
                    beaconMinor: "",
                    coordinateX: "",
                    coordinateY: "",
                    beaconMajor: "",
                    floorId: 0,
                    // "personType": 0,
                    projectSn: this.$store.state.projectSn,
                    // "workerId": 0,
                    // "workerName": ""
                },
                beaconFormRules: {
                    beaconMinor: [{
                        required: true,
                        message: this.$t('message.personnelPosition.mandatory'),
                        trigger: "blur"
                    }],
                    beaconMajor: [{
                        required: true,
                        message: this.$t('message.personnelPosition.mandatory'),
                        trigger: "blur"
                    }],
                },
            };
        },
        mounted() {
            VUE = this;
            // this.mapEL = document.getElementById("mapContent");
            // this.mapBoxEL = document.getElementById("mapBox");
            // this.mapBoxTop = this.mapBoxEL.offsetTop;
            // this.mapBoxLeft = this.mapBoxEL.offsetLeft;
            // var searchWidth = document.getElementsByClassName("floorBox")[0]
            //     .offsetWidth;
            // this.showFloorNum = parseInt((searchWidth - 40) / 90) - 1;
            // console.log("this.showFloorNum", this.showFloorNum);
            this.loadBuildData();
            // this.getProjectSetting();
        },
        methods: {

            //获取项目配置信息
            getProjectSetting() {
                getProjectConfigListApi({
                    projectSn: this.$store.state.projectSn,
                }).then((res) => {
                    if (res.result.length == 0 || !res.result[0].positionType) {
                        this.editProjectSettingDialog = true;
                    } else {
                        this.projectSettingForm = res.result[0];
                    }
                });
            },
            //编辑项目配置信息
            editProjectSetting() {
                editProjectConfigListApi(this.projectSettingForm).then((res) => {
                    this.editProjectSettingDialog = false;
                    this.getProjectSetting();
                });
            },
            loadBuildData() {
                getPositionBuildListApi({
                    projectSn: this.$store.state.projectSn,
                }).then((res) => {
                    this.buildList = res.result;
                    this.activeBuildIndex = 0;
                    this.canAddRoom = false;
                    if (this.buildList.length > 0) {
                        this.currentBuildInfo = this.buildList[0];
                        this.canAddRoom = true;
                        this.loadFloorData();
                    }
                });
            },
            loadFloorData() {
                getPositionFloorListApi({
                    buildId: this.currentBuildInfo.id,
                }).then((res) => {
                    this.floorList = res.result;
                    this.mapUrl = null;
                    if (this.floorIndex >= this.floorList.length && this.floorIndex != 0) {
                        this.floorIndex--
                    }
                    if (this.floorList.length > 0) {
                        this.currentFloorDetail = this.floorList[this.floorIndex];
                        if (this.currentFloorDetail.drawingUrl) {
                            this.mapUrl =
                                this.$store.state.FILEURL + this.currentFloorDetail.drawingUrl;
                            this.getPointList();
                        }
                    }
                });
            },
            addFloorFn() {
                if (!this.currentBuildInfo) {
                    this.$message.error(this.$t('message.personnelPosition.mapManage.please_add_build_infoMsg'));//请先添加楼栋信息
                } else {
                    this.floorDialogTitle = this.$t('message.personnelPosition.mapManage.new_floor');//新增楼层
                    this.addFloorDialog = true;
                    this.isAdd = true;
                }
            },
            editFloorFn(item) {
                this.floorForm = JSON.parse(JSON.stringify(item));
                this.floorDialogTitle = this.$t('message.personnelPosition.mapManage.edit_floor');//编辑楼层
                this.isAdd = false;
                this.addFloorDialog = true;
            },
            changeFloor(item) {
                this.currentFloorDetail = item;

                this.showAllFloor = false;
                if (this.currentFloorDetail.drawingUrl) {
                    this.mapUrl =
                        this.$store.state.FILEURL + this.currentFloorDetail.drawingUrl;
                    this.getPointList();
                } else {
                    this.mapUrl = null;
                }
            },
            changeBuildFn(item, index) {
                this.activeBuildIndex = index;
                this.currentBuildInfo = item;
                this.loadFloorData();
            },
            //新增或编辑楼栋
            saveBuildFn() {
                this.$refs["addBuildForm"].validate((valid) => {
                    if (valid) {
                        if (this.isAdd) {
                            addPositionBuildApi(this.addBuildForm).then((res) => {
                                this.addBuildDialog = false;
                                this.loadBuildData();
                                this.$message.success(this.$t('message.personnelPosition.add_success'));//添加成功！
                            });
                        } else {
                            editPositionBuildApi(this.addBuildForm).then((res) => {
                                this.addBuildDialog = false;
                                this.loadBuildData();
                                this.$message.success(this.$t('message.personnelPosition.edit_success'));//编辑成功！
                            });
                        }
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            editBuildFn(item) {
                this.isAdd = false;
                this.addBuildDialog = true;
                this.addBuildForm = JSON.parse(JSON.stringify(item));
            },
            deleteBuildFn(item) {
                this.$confirm(this.$t('message.personnelPosition.mapManage.confirm_buildText') + "【" + item.buildName + "】?", this.$t('message.personnelPosition.mapManage.Tips'), {//确定删除楼栋
                    confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
                    cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
                    type: "warning",
                }).then(() => {
                    deletePositionBuildApi({id: item.id}).then((res) => {
                        this.loadBuildData();
                        this.$message.success(this.$t('message.personnelPosition.delete_success'));//删除成功!
                    });
                });
            },
            deleteFloorFn(item) {
                this.$confirm(this.$t('message.personnelPosition.mapManage.confirmText') + "【" +
                    this.currentBuildInfo.buildName + ">" + item.floorName + this.$t('message.personnelPosition.mapManage.floorName') + "?",
                    // "确定删除【" +
                    // this.currentBuildInfo.buildName +
                    // "】下的【第" +
                    // item.floorName +
                    // "层】吗?",
                    this.$t('message.personnelPosition.mapManage.Tips'),
                    {
                        confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
                        cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
                        type: "warning",
                    }
                ).then(() => {
                    deletePositionFloorApi({id: item.floorId}).then((res) => {
                        this.loadFloorData();
                        this.$message.success(this.$t('message.personnelPosition.delete_success'));//删除成功!
                    });
                });
            },
            //新增或编辑楼层
            saveFloorFn() {
                this.$refs["floorForm"].validate((valid) => {
                    if (valid) {
                        if (this.isAdd) {
                            this.floorForm.buildId = this.currentBuildInfo.id;
                            addPositionFloorApi(this.floorForm).then((res) => {
                                this.addFloorDialog = false;
                                this.loadFloorData();
                                this.$message.success(this.$t('message.personnelPosition.add_success'));//添加成功！
                            });
                        } else {
                            editPositionFloorApi(this.floorForm).then((res) => {
                                this.addFloorDialog = false;
                                this.loadFloorData();
                                this.$message.success(this.$t('message.personnelPosition.edit_success'));//编辑成功！
                            });
                        }
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            showUploadDialog() {
            },
            //保存地图
            saveMapUrlFn() {
                this.$refs.cropper.startCrop();
                var _this = this;
                this.$refs.cropper.getCropBlob((data) => {
                    var param = new FormData();
                    param.append("files", data, "image.png");
                    _this.$http
                        .post("/upload/image", param, {
                            headers: {
                                "Content-Type": "multipart/form-data",
                            },
                        })
                        .then((res) => {
                            console.log("aaaaa", res);
                            if (res.data.status == "SUCCESS") {
                                _this.mapUrl =
                                    _this.$store.state.FILEURL + res.data.data[0].imageUrl;
                                _this.cropperDialog = false;
                                _this.$nextTick(() => {
                                    _this.currentFloorDetail.drawingUrl = res.data.data[0].imageUrl;
                                    var oImg = document.getElementById("map"),
                                        w,
                                        h;
                                    if (oImg.naturalWidth) {
                                        // HTML5 browsers
                                        oImg.onload = function () {
                                            w = oImg.naturalWidth;
                                            h = oImg.naturalHeight;
                                            console.log(w + "  " + h);
                                            _this.submitMapData(w, h);
                                        };
                                    } else {
                                        // IE 6/7/8
                                        var nImg = new Image();
                                        //      nImg.src = oImg.src;
                                        nImg.onload = function () {
                                            w = nImg.width;
                                            h = nImg.height;
                                            console.log(w + "  " + h);
                                            _this.submitMapData(w, h);
                                        };
                                        nImg.src = oImg.src;
                                    }
                                });
                            }
                        });
                });
            },
            submitMapData(w, h) {
                this.currentFloorDetail.imageWidth = w;
                this.currentFloorDetail.imageLength = h;
                editPositionFloorApi(this.currentFloorDetail).then((res) => {
                    this.loadFloorData();
                });
            },
            beforeAvatarUpload(file) {
                if (this.floorList.length == 0) {
                    this.$message.error(this.$t('message.personnelPosition.mapManage.please_add_floor_first'));//请先添加楼层！
                    return false;
                } else {
                    return true;
                }
            },
            uploadMapSuccess(res) {
                this.cropperOption.img = this.$store.state.FILEURL + res.data[0].imageUrl;
                this.cropperDialog = true;
                console.log("uploadMapSuccess");
            },
            //获取鼠标位置
            getMousePos(event) {
                var e = event || window.event;
                var scrollX =
                    document.documentElement.scrollLeft || document.body.scrollLeft;
                var scrollY =
                    document.documentElement.scrollTop || document.body.scrollTop;
                var x = e.pageX || e.clientX + scrollX;
                var y = e.pageY || e.clientY + scrollY;
                //alert('x: ' + x + '\ny: ' + y);
                return {x: x, y: y};
            },
            addPoint(event) {
                this.isAdd = true;
                if (this.projectSettingForm.positionType == 1) {
                    this.cardDialog = this.isadding;
                    if (this.cardDialog) {
                        this.cardForm.cardNo = "";
                        this.cardDialogTitle = this.$t('message.personnelPosition.mapManage.add_cardText');//新增卡片
                        // console.log(this.mapEL.offsetTop);
                        // console.log(this.mapEL.offsetLeft);

                        // console.log(this.getMousePos(event));
                        let clickPoint = this.getMousePos(event);
                        // this.cardForm.coordinateX =
                        //   clickPoint.x - this.mapBoxLeft - this.mapEL.offsetLeft;
                        this.cardForm.coordinateX = clickPoint.x - 262;
                        // this.cardForm.coordinateY =
                        //   clickPoint.y - this.mapBoxTop - this.mapEL.offsetTop;
                        this.cardForm.coordinateY = clickPoint.y - 320;
                    }
                } else {
                    this.beaconDialog = this.isadding;
                    if (this.beaconDialog) {
                        this.beaconForm.beaconMinor = "";
                        this.beaconForm.beaconMajor = "";
                        this.beaconDialogTitle = this.$t('message.personnelPosition.mapManage.add_beaconText');//新增信标
                        // console.log(this.mapEL.offsetTop);
                        // console.log(this.mapEL.offsetLeft);

                        // console.log(this.getMousePos(event));
                        let clickPoint = this.getMousePos(event);
                        // this.cardForm.coordinateX =
                        //   clickPoint.x - this.mapBoxLeft - this.mapEL.offsetLeft;
                        this.beaconForm.coordinateX = clickPoint.x - 262;
                        // this.cardForm.coordinateY =
                        //   clickPoint.y - this.mapBoxTop - this.mapEL.offsetTop;
                        this.beaconForm.coordinateY = clickPoint.y - 320;
                    }
                }
            },
            editPoint(item) {
                this.isAdd = false;
                if (this.projectSettingForm.positionType == 1) {
                    this.cardDialogTitle = this.$t('message.personnelPosition.mapManage.edit_cardText');//编辑卡片
                    this.cardForm = JSON.parse(JSON.stringify(item));
                    this.cardDialog = true;
                } else {
                    this.beaconDialogTitle = this.$t('message.personnelPosition.mapManage.edit_beaconText');//编辑信标
                    this.beaconForm = JSON.parse(JSON.stringify(item));
                    this.beaconDialog = true;
                }
            },
            removePoint(item) {
                if (this.projectSettingForm.positionType == 1) {
                    this.$confirm(this.$t('message.personnelPosition.mapManage.confirmText') + "【" + item.cardNo + "】?", this.$t('message.personnelPosition.mapManage.Tips'), {
                        confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
                        cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
                        type: "warning",
                    }).then(() => {
                        deletePositionCardApi({id: item.id}).then((res) => {
                            this.loadCardData();
                            this.$message.success(this.$t('message.personnelPosition.delete_success'));//删除成功!
                        });
                    });
                } else {
                    this.$confirm(this.$t('message.personnelPosition.mapManage.confirmText') + "【" + item.beaconMinor + "】?", this.$t('message.personnelPosition.mapManage.Tips'), {
                        confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
                        cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
                        type: "warning",
                    }).then(() => {
                        deletePositionBeaconApi({id: item.id}).then((res) => {
                            this.loadBeaconData();
                            this.$message.success(this.$t('message.personnelPosition.delete_success'));//删除成功!
                        });
                    });
                }
            },
            // 放大
            magnify() {
                if (this.multiples >= 3) {
                    return;
                }
                this.multiples += 0.25;
            },
            // 缩小
            shrink() {
                if (this.multiples <= 0.5) {
                    return;
                }
                this.multiples -= 0.25;
            },
            // 旋转
            rotate() {
                this.deg += 90;
                if (this.deg >= 360) {
                    this.deg = 0;
                }
            },
            //获取点位
            getPointList() {
                if (this.projectSettingForm.positionType == 1) {
                    this.loadCardData();
                } else {
                    this.loadBeaconData();
                }
            },
            //获取卡片列表
            loadCardData() {
                getAllPositionCardListApi({
                    projectSn: this.$store.state.projectSn,
                    floorId: this.currentFloorDetail.floorId
                }).then((res) => {
                    this.pointList = res.result;
                });
            },
            //添加或编辑卡片
            saveCardFn() {
                this.$refs["cardForm"].validate((valid) => {
                    if (valid) {
                        if (this.isAdd) {
                            this.cardForm.floorId = this.currentFloorDetail.floorId;
                            addPositionCardApi(this.cardForm).then((res) => {
                                this.cardDialog = false;
                                this.loadCardData();
                                this.$message.success(this.$t('message.personnelPosition.add_success'));//添加成功！
                            });
                        } else {
                            editPositionCardApi(this.cardForm).then((res) => {
                                this.cardDialog = false;
                                this.loadCardData();
                                this.$message.success(this.$t('message.personnelPosition.edit_success'));//编辑成功！
                            });
                        }
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            //获取信标列表
            loadBeaconData() {
                getAllPositionBeaconListApi({
                    projectSn: this.$store.state.projectSn,
                    floorId: this.currentFloorDetail.floorId
                }).then((res) => {
                    this.pointList = res.result;
                });
            },
            //添加或编辑信标
            saveBeaconFn() {
                this.$refs["beaconForm"].validate((valid) => {
                    if (valid) {
                        if (this.isAdd) {
                            this.beaconForm.floorId = this.currentFloorDetail.floorId;
                            addPositionBeaconApi(this.beaconForm).then((res) => {
                                this.beaconDialog = false;
                                this.loadBeaconData();
                                this.$message.success(this.$t('message.personnelPosition.add_success'));//添加成功！
                            });
                        } else {
                            editPositionBeaconApi(this.beaconForm).then((res) => {
                                this.beaconDialog = false;
                                this.loadBeaconData();
                                this.$message.success(this.$t('message.personnelPosition.edit_success'));//编辑成功！
                            });
                        }
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
        },
    };
</script>
<style lang="less" scoped>
    .title {
        border-bottom: 1px solid rgba(220, 230, 253, 1);
        color: @--color-primary;
        padding-left: 24px;
        font-size: 14px;

        span {
            position: relative;
            padding: 16px 0 5px;
            display: inline-block;

            &::before {
                content: "";
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: @--color-primary;
                z-index: 2;
            }
        }
    }

    .left {
        width: 212px;
        float: left;
    }

    .right {
        float: left;
        width: calc(100% - 222px);
        margin-left: 10px;
    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .flex2 {
        display: flex;
        align-items: center;
    }

    .addFirm {
        height: 45px;
        line-height: 45px;
        color: @--color-primary;
        font-size: 15px;
        text-align: center;
        background: #fff;
        border-top: 1px solid #dce6fd;
        font-family: PingFangSC-Regular;
        cursor: pointer;
    }

    .list_content {
        padding: 10px 0;
        height: calc(100% - 87px - 20px);
        position: relative;
    }

    .content_data {
        padding: 0 20px;
        box-sizing: border-box;
        height: 43px;
        line-height: 43px;
        cursor: pointer;
        position: relative;

        &.active {
            background-color: rgba(81, 129, 246, 0.1);

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 4px;
                height: 100%;
                background-color: @--color-primary;
                border-radius: 2px;
            }
        }
    }

    .floorBox {
        margin-bottom: 10px;
        // background-color: rgba(251, 251, 251, 1);
        padding: 20px 20px 10px;

        .addFloorBox {
            line-height: 20px;
            border: 1px solid @--color-primary;

            i {
                font-size: 25px;
                margin-top: 20px;
                color: @--color-primary;
            }

            p {
                font-size: 0.75rem;
            }
        }

        ul {
            display: inline-block;
            vertical-align: top;

            li {
                border: 1.2px solid rgba(0, 0, 0, 0.25);
                width: 80px;
                height: 80px;
                border-radius: 3px;
                text-align: center;
                //   background-color: rgba(41, 216, 180, 0.25);
                display: inline-block;
                margin: 0 10px 10px 0;
                line-height: 60px;
                font-size: 0.875rem;
                cursor: pointer;
                vertical-align: top;

                &.more {
                    font-size: 1.6rem;
                    line-height: 65px;
                }

                &.active {
                    background-color: #d8e2f9;
                    // color: #fff;
                    border-color: @--color-primary-deep;
                }

                .floorName {
                    height: 50px;
                    line-height: 70px;
                }

                .caretIcon {
                    height: 20px;
                    line-height: 20px;
                }
            }
        }
    }

    .mapContainer {
        height: calc(100% - 0px - 40px);
        padding: 20px;
        position: relative;

        .infoDetail {
            font-size: 14px;
            margin-bottom: 16px;

            span:first-child {
                margin-right: 165px;
                display: inline-block;
            }

            .uploadBtn {
                float: right;
                margin-top: -5px;
            }
        }

        .mapBox {
            border: 1px solid rgba(151, 151, 151, 0.5);
            height: calc(100% - 40px);
            position: relative;
            overflow: auto;
        }

        .mapContent {
            position: relative;
            // left: 0;
            // top: 0;
            // z-index: 3;
        }

        // .mapContent2{
        //   position: relative;
        // }
        .personBox {
            position: absolute;
            transition: 0.2s all;

            img {
                cursor: pointer;
            }

            .redText {
                margin-left: 20px;
                display: inline-block;
            }
        }
    }

    .devDetail {
        p {
            margin-bottom: 10px;

            .primaryText {
                margin-right: 20px;
                display: inline-block;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .operateBox {
        // margin-bottom: 10px;
        position: absolute;
        right: 112px;
        top: 11px;

        img {
            margin-right: 20px;
            cursor: pointer;
        }
    }

    .operateList {
        font-size: 12px;

        li {
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            justify-content: center;

            img {
                margin-right: 10px;
            }

            &.last {
                margin-bottom: 0;
            }
        }
    }
</style>