<template>
  <div
    class="xd-jbz-item"
    v-if="containerDone"
    :class="{active: stepStatus}"
    :id="id"
    :style="styleObject"
    @mousedown="dragStart"
    @touchstart="dragStart"
  >
    <div
      class="xd-jbz-item__circle"
      :style="{backgroundColor:stepStatus ? this.circleColor:'#ccc', lineHeight: height + 'px'}"
    >{{sort}}</div>
    <div class="xd-jbz-item__zb" v-if="1"></div>
  </div>
</template>
<script>
//背景放大坐标不放大
export default {
  name: "XdJbzItemScale",
  props:{
    container:{
      type: Object,
      required: true
    },
    defaultValue:{
      type:Object,
      default(){
        return {
          x: 0,
          y: 0
        }
      }
    },
    circleColor:{
      type:String,
      default() {
        return '#3498db';
      }
    },
    sort:{
      type:Number,
      default:0
    },
    scale:{
      type:Number,
      default:1,
    },
    step: {
      type:Number,
      required: true
    },
    item:{
      type:Object,
      required:true
    },
    radiusNum:{
      type:Number,
      default:43
    },
    //父级全屏滚动条元素
    scrollParentEle:{
      type: String,
      default:''
    }

  },
  data(){
    return {
      dragging: false,
      containerDone:false,
      id:'',

      //鼠标位置
      mouseX: 0,
      mouseY: 0,

      //保存在点击时刻原点偏移量(参与移动时候计算)
      startInitialX:0,
      startInitialY:0,

      //相对父容器容器的偏移量
      offsetX: 0,
      offsetY: 0,

      //滚动值
      scrollTop:0,
      scrollLeft:0,

      //显示
      showX:0,
      showY:0,

      //icon大小根据半径获取高与宽
      iconInfo:null,
      width: 0,
      height: 0,

      //移动
      changeOffsetX:null,
      changeOffsetY:null,
    }
  },
  watch:{
    scale(){
      this.init('scale');
    },
    radiusNum(){
      this.init('radius');
    }
  },
  computed: {
    styleObject() {
      return {
        left: `${this.offsetX}px`,
        top: `${this.offsetY}px`,
        width: `${this.width}px`,
        height: `${this.height}px`,
      };
    },
    stepStatus(){
      if(this.item.step === undefined) return false;
      return this.step >= this.item.step;
    }
  },
  created(){
    this.id = `circle_${this.$xdHelper.randomChar(20)}`;
    this.init('init');
    this.$nextTick(() => {
      this.containerDone = true;
      this.$nextTick(()=>{
        this.iconInfo = document.getElementById(this.id).getBoundingClientRect();
      });
      this.update()
    });
  },

  methods:{
    setOffsetR(){
      let r = 0;
      if(this.scale !== 1) r = this.diagonalLength();
      return r;
    },
    //正方形已知边长，求对角线
    calculateSquareDiagonal(a){
      return this.calculateRectangleDiagonalLength(a, a);
    },

    //正方形已知对角线，求边长
    calculateSquareSideLength(diagonalLength){
      return Math.sqrt(this.$xdHelper.divisionFloatNumber(Math.pow(diagonalLength, 2),2))
    },

    //计算长方形某个边长（已知对角线和某个边长）
    calculateRectangleMarginLength(diagonal,sideLen){
      let value = this.$xdHelper.cutFloatNumber(Math.pow(diagonal, 2),Math.pow(sideLen, 2));
      return  Math.sqrt(value)
    },

    //计算长方形对角线已知宽高，求对角线
    calculateRectangleDiagonalLength(a, b) {
      return  Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    },

    getIconOffset(type,isMove){
      return this.width/2
    },

    diagonalLength() {
      let width  = this.width;
      let height  = this.height;
      let newHeight = this.height * this.scale;
      let newWidth = this.width * this.scale;
      let side = this.calculateRectangleDiagonalLength(width,height);
      let newSide =  this.calculateRectangleDiagonalLength(newHeight,newWidth);
      return this.calculateSquareSideLength(newSide - side)/2
    },

    init(type){
      this.width = this.height = this.radiusNum/Math.sqrt(2) * this.scale;
      let isMove = this.changeOffsetY !== null;
      let r = this.getIconOffset(type, isMove);
      let offsetX = 0;
      let offsetY = 0;
      if(this.defaultValue.x !== undefined) offsetX = this.defaultValue.x * this.scale - r;
      if(this.defaultValue.y !== undefined) offsetY = this.defaultValue.y * this.scale - r;
      if(this.changeOffsetY !== null) offsetY = this.changeOffsetY * this.scale - r;
      if(this.changeOffsetX !== null) offsetX = this.changeOffsetX * this.scale - r;

      this.offsetX = offsetX;
      this.offsetY = offsetY;
    },
    getPhoneOffset(e){
      let X = 0,Y = 0;
      let iconInfo = document.getElementById(this.id).getBoundingClientRect();
      X = e.clientX - iconInfo.left;
      Y = e.clientY - iconInfo.top;
      return {X,Y}
    },
    dragStart(e) {
      debugger
      e.preventDefault();
      this.dragging = true;
      //保存点击原点信息
      this.startInitialX = (e.offsetX||this.getPhoneOffset(e.touches[0]).X);
      this.startInitialY = (e.offsetY||this.getPhoneOffset(e.touches[0]).Y);
      let bodyEle = document.getElementsByClassName('app-wrapper__right-content').item(0);
      this.scrollTop = bodyEle.scrollTop;
      this.scrollLeft = bodyEle.scrollLeft;

      document.addEventListener('mousemove', this.dragMove);
      document.addEventListener('mouseup', this.dragEnd);
      document.addEventListener('touchmove', this.dragMove);
      document.addEventListener('touchend', this.dragEnd);
    },
    dragMove(e) {
      if (this.dragging) {
        this.hasMove = true;
        //鼠标在适口窗口位置 + 滚动高度
        this.mouseX = (e.clientX || e.touches[0].clientX) + this.scrollLeft;
        this.mouseY = (e.clientY || e.touches[0].clientY) + this.scrollTop;

        //相对父容器容器的偏移量
        let offsetX = this.mouseX - this.container.x - this.startInitialX;
        let offsetY = this.mouseY - this.container.y - this.startInitialY;

        //小于最小值
        let r = this.getIconOffset();
        if(offsetX < 0) offsetX = 0;
        if(offsetY < 0) offsetY = 0;

        //大于最大值
        if((offsetY + this.height) > this.container.height) {
          offsetY = this.container.height - this.height;
        }
        if((offsetX + this.width) > this.container.width) {
          offsetX = this.container.width - this.width;
        }

        //复制
        this.offsetY = offsetY;
        this.offsetX = offsetX;
        this.changeOffsetX = this.$xdHelper.divisionFloatNumber(offsetX + r,this.scale).toFixed(2);
        this.changeOffsetY = this.$xdHelper.divisionFloatNumber(offsetY + r,this.scale).toFixed(2);
        this.update();
      }
    },
    dragEnd() {
      this.dragging = false;
      document.removeEventListener('mousemove', this.dragMove);
      document.removeEventListener('mouseup', this.dragEnd);
      document.removeEventListener('touchmove', this.dragMove);
      document.removeEventListener('touchend', this.dragEnd);
    },
    update(){
      let r = this.getIconOffset();
      this.$emit('input',{
        x: (this.changeOffsetX || this.defaultValue.x),
        y: (this.changeOffsetY ||this.defaultValue.y)
      })
    },
  }
}
</script>

<style scoped lang="scss">
.xd-jbz-item {
  position: absolute;
  top:-9999px;
  left:-9999px;
  &__circle{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 100%;
    color: #fff;
    font-size: 12px
  }
  &__zb {
    width: 2px;
    height: 2px;
    background: #c00;
    position: absolute;
    top:50%;
    left: 50%;
    margin: -1px 0 0 -1px;
  }
  &-value {
    position: relative;
    z-index: -1;
  }

  .x {
    height: 1px;
    position: absolute;
    left: 0;
    background: $blue;
  }
  .y {
    width: 1px;
    position: absolute;
    top: 0;
    background: $blue;
  }
}
</style>
