<style>
  .choiceAreaAuth .shadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #2E9FFF;
  }

  .choiceAreaAuth .hotspot {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px dashed #5CB3FD;
    z-index: 100;
  }

  .choiceAreaAuth .hotspot .close {
    position: absolute;
    right: -16px;
    top: -16px;
    z-index: 101
  }

  .choiceAreaAuth .el-input {
    width: 70px;
  }

  .choiceAreaAuth .right label {
    padding: 0 10px;
  }

  .choiceAreaAuth .inside {
    position: relative;
    width: 750px;
    min-height: 1334px;
    background-color: #eee;
    zoom: 0.5;
  }

  .choiceAreaAuth .pic {
    width: auto;
    height: auto;
    max-width: 750px;
    max-height: 1334px;
    transform: scale(0.5);
  }

  .choiceAreaAuth .pic-list {
    position: relative;
  }

  .choiceAreaAuth .pic-list div {
    position: absolute;
    left: 0;
    top: 0;
  }

  .choiceAreaAuth {
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

  .choiceAreaAuth .el-input-group__append {
    background-color: #fff;
  }
  .choiceAreaAuth .choiceCommon_Auth{
    display: inline-block;
    width:20px;
  }
  .choiceAreaAuth .choice_PX{
    margin-left:10px;
  }
</style>
<template id="choiceAreaAuth">
  <div class="choiceAreaAuth">
    <div @click="dialogVisible = !dialogVisible" style="display: inline-block">
      <slot></slot>
    </div>
    <el-dialog append-to-body title="热区划分" :visible.sync="dialogVisible" :close-on-click-modal="false"
      class="choiceAreaAuth" width="900px">
      <div flex="dir:left box:first">
        <div class="inside" flex="dir:left main:center cross:center" ref="inside">
          <div style="position: relative;" ref="box">
            <div class="shadow" :style="{zIndex: zIndex}" @click="hotSpotclick" @mousedown="mousedown"
              @mouseup="mouseup" @mousemove="mousemove" @mouseout="mouseout "></div>
            <div class="hotspot"
              :style="{width:item.width+'px',height:item.height+'px',left:item.left+'px',
                             top:item.top+'px', maxWidth:'calc('+width+' - '+item.left+'px)',
                             maxHeight:'calc('+height+' - '+item.top+'px)', backgroundColor: index == key ? 'rgba(92, 179, 253, 0.2)' : ''}"
              @click="selectHotSpot(key)" v-for="(item, key) in hotspotList" :key="key" :data-index="key">
              <div class="close" @click.stop="delHotSpot()" v-if="item.width>0 && item.IsChecked">
                <img style="width: 32px;height: 32px" :src="getIconLink('/Static/icon-close.png')">
              </div>
            </div>
            <div :style="calcstyle" flex="dir:left main:center cross:center">
              <img style="width:auto;height:auto;max-width:100%;max-height:100%" :src="picUrl">
            </div>
          </div>
        </div>
        <el-form label-width="120px">
          <el-form-item>
            <el-checkbox v-if="hotspotList&&hotspotList.length>0" v-model="hotspotList[0].IsChecked"
              @change="changeItem(hotspotList[0],0)">不登录按钮
            </el-checkbox>
          </el-form-item>
          <el-form-item label="热区尺寸">
            <el-row type="flex">
              <el-col :span="15">
                <div flex="dir:left">
                  <label class="choiceCommon_Auth">W</label>
                  <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
                    v-model="hotspotList[0].width" :max="maxWidth_Cancel">
                  </el-input>
                  <label class="choice_PX">px</label>
                </div>
              </el-col>
              <el-col :span="15">
                <div flex="dir:left">
                  <label class="choiceCommon_Auth">H</label>
                  <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
                    v-model="hotspotList[0].height" :max="maxHeight_Cancel">
                  </el-input>
                  <label class="choice_PX">px</label>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="热区位置">
            <el-row type="flex">
              <el-col :span="15">
                <div flex="dir:left">
                  <label class="choiceCommon_Auth">X</label>
                  <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
                    v-model.number="hotspotList[0].left">
                  </el-input>
                  <label class="choice_PX">px</label>
                </div>
              </el-col>
              <el-col :span="15">
                <div flex="dir:left">
                  <label class="choiceCommon_Auth">Y</label>
                  <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>0"
                    v-model.number="hotspotList[0].top">
                  </el-input>
                  <label class="choice_PX">px</label>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label-width="20px">
            <div style="width:100%;height:1px;border-bottom:1px dashed #d1d1d1"></div>
          </el-form-item>
          <el-form-item>
              <el-checkbox v-if="hotspotList&&hotspotList.length>1" v-model="hotspotList[1].IsChecked"
                @change="changeItem(hotspotList[1],1)">登录按钮
              </el-checkbox>
          </el-form-item>
          <el-form-item label="热区尺寸">
            <el-row type="flex">
              <el-col :span="15">
                <div flex="dir:left">
                  <label class="choiceCommon_Auth">W</label>
                  <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
                    v-model="hotspotList[1].width" :max="maxWidth_Login">
                  </el-input>
                  <label class="choice_PX">px</label>
                </div>
              </el-col>
              <el-col :span="15">
                <div flex="dir:left">
                  <label class="choiceCommon_Auth">H</label>
                  <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
                    v-model="hotspotList[1].height" :max="maxHeight_Login">
                  </el-input>
                  <label class="choice_PX">px</label>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="热区位置">
            <el-row type="flex">
              <el-col :span="15">
                <div flex="dir:left">
                  <label class="choiceCommon_Auth">X</label>
                  <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
                    v-model.number="hotspotList[1].left">
                  </el-input>
                  <label class="choice_PX">px</label>
                </div>
              </el-col>
              <el-col :span="15">
                <div flex="dir:left">
                  <label class="choiceCommon_Auth">Y</label>
                  <el-input size="small" type="number" v-if="hotspotList&&hotspotList.length>1"
                    v-model.number="hotspotList[1].top">
                  </el-input>
                  <label class="choice_PX">px</label>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <div style="padding: 20px 40px;">请先在左侧蓝框内用鼠标划出热区范围</div>
          <el-form-item label="">
            <el-button style="margin-left: 10px" v-if="hotspotList.length==2" type="primary" size="small"
              @click="confirm">保存</el-button>
            <el-button size="small" @click="clearAll">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {
      multiple: Boolean,
      picUrl: String,
      width: {
        type: String,
        default: '750px'
      },
      height: {
        type: String,
        default: '1334px'
      },
      hotspotArray: {
        type: Array,
        default: []
      },
      max: Number,
      mode: String
    },
    data() {
      return {
        dialogVisible: false,
        is_mousedown: false,
        is_mousemove: false,
        hotspotList: JSON.parse(JSON.stringify(this.hotspotArray)),
        index: -1,
        zIndex: 99,
      };
    },
    watch: {
      dialogVisible(oldVal, newVal) {
        this.hotspotList = JSON.parse(JSON.stringify(this.hotspotArray))
        this.index = -1;
        if (this.hotspotList.length > 0) {
          this.index = 0;
          this.hotspotList[0].IsChecked = true;
          this.hotspotList[1].IsChecked = false;
          this.selectHotSpot(0);
        }
      }
    },
    computed: {
      //获取高度和宽度
      calcstyle() {
        var objStyle = {
          width: this.width,
          height: this.height
        };
        return objStyle;
      },
      //不登录按钮最大宽度
      maxWidth_Cancel() {
        var widthStr = this.width.replace("px", "");
        var tempWidth = parseFloat(widthStr);
        var firstLeft = 0;
        if (this.hotspotList && this.hotspotList.length > 0 && this.hotspotList[0].left) {
          firstLeft = this.hotspotList[0].left;
        }
        tempWidth = tempWidth - firstLeft;
        return tempWidth;
      },
      //不登录按钮最大高度
      maxHeight_Cancel() {
        var heightStr = this.height.replace("px", "");
        var maxHeight = parseFloat(heightStr);
        var firstTop = 0;
        if (this.hotspotList && this.hotspotList.length > 0 && this.hotspotList[0].top) {
          firstTop = this.hotspotList[0].top;
        }
        maxHeight = maxHeight - firstTop;
        return maxHeight;
      },
      //登录按钮最大宽度
      maxWidth_Login() {
        var widthStr = this.width.replace("px", "");
        var tempWidth = parseFloat(widthStr);
        var secondLeft = 0;
        if (this.hotspotList && this.hotspotList.length > 1 && this.hotspotList[1].left) {
          secondLeft = this.hotspotList[1].left;
        }
        tempWidth = tempWidth - secondLeft;
        return tempWidth;
      },
      //登录按钮最大高度
      maxHeight_Login() {
        var heightStr = this.height.replace("px", "");
        var maxHeight = parseFloat(heightStr);
        var secondTop = 0;
        if (this.hotspotList && this.hotspotList.length > 1 && this.hotspotList[1].top) {
          secondTop = this.hotspotList[1].top;
        }
        maxHeight = maxHeight - secondTop;
        return maxHeight;
      },
    },
    created() {

    },
    methods: {
      //选中项
      changeItem(item, index) {
        this.hotspotList.forEach(subItem => {
          subItem.IsChecked = false;
        });
        item.IsChecked = !item.IsChecked;
        this.selectHotSpot(index);
      },
      //热区点击
      hotSpotclick(e) {
        this.is_mousedown = false;
      },
      position(e) {
        function getElementPosition(e) {
          var x = 0,
            y = 0;
          while (e != null) {
            x += e.offsetLeft;
            y += e.offsetTop;
            e = e.offsetParent;
          }
          return {
            x: x,
            y: y
          };
        }
        // 缩放比例
        let zoom = 2;
        let position = {
          x: e.offsetX * zoom,
          y: e.offsetY * zoom
        };
        return position;
      },
      mousedown(e) {
        var count = 0;
        this.hotspotList.forEach(item => {
          if (item.width > 0) {
            count++;
          }
        })
        if (this.max && count === this.max) {
          return;
        }
        let position = this.position(e);
        this.is_mousedown = true;
        this.hotspotList[this.index].left = position.x;
        this.hotspotList[this.index].top = position.y;
        this.hotspotList[this.index].defaultX = position.x;
        this.hotspotList[this.index].defaultY = position.y;
        this.zIndex = 102;
      },
      mousemove(e) {
        if (this.is_mousedown) {
          if (this.index === -1) {
            return;
          }
          let position = this.position(e);
          let tempHotspot = this.hotspotList[this.index];
          this.hotspotList[this.index].left = Math.min(position.x, tempHotspot.defaultX);
          this.hotspotList[this.index].top = Math.min(position.y, tempHotspot.defaultY);
          this.hotspotList[this.index].width = Math.abs(tempHotspot.defaultX - position.x);
          this.hotspotList[this.index].height = Math.abs(tempHotspot.defaultY - position.y);
          this.is_mousemove = true;
        }
      },
      mouseout(e) {
        if (this.index === -1) {
          return;
        }
        this.is_mousedown = false;
        this.hotspotList[this.index].is_close = true;
        this.is_mousemove = false;
        this.zIndex = 99;
      },
      mouseup(e) {
        if (this.index === -1) {
          return;
        }
        this.is_mousedown = false;
        this.hotspotList[this.index].is_close = true;
        this.is_mousemove = false;
        this.zIndex = 99;
      },
      delHotSpot() {
        this.hotspotList[this.index].left = 0;
        this.hotspotList[this.index].top = 0;
        this.hotspotList[this.index].width = 0;
        this.hotspotList[this.index].height = 0;
        this.hotspotList[this.index].defaultX = 0;
        this.hotspotList[this.index].defaultY = 0;
      },
      selectHotSpot(index) {
        if (this.is_mousemove) {
          return;
        }
        this.index = index;
      },
      clearAll() {
        this.index = -1;
        //this.hotspotList = [];
      },
      confirm() {
        this.dialogVisible = false;
        this.index = -1;
        this.$emit('confirm', this.hotspotList);
      },
    }
  };

</script>
