<template>
  <div class="jbz">
    <div class="btn">
      <el-button type="primary" round size="mini" @click="add">新增点位</el-button>
      <el-button
        type="primary"
        v-if="lineStatus === 'N'"
        round size="mini"
        @click="openLine('Y')"
      >开启辅助线</el-button>
      <el-button
        type="primary"
        v-if="lineStatus === 'Y'"
        round
        size="mini"
        @click="openLine('N')"
      >关闭辅助线</el-button>
      <div class="btn-item">
        <span>半径:</span>
        <el-slider
          v-model="radius"
          :min="10"
          :max="500"
          style="width: 300px"
        ></el-slider>
      </div>
      <div class="btn-item">
        <span>放大缩小:</span>
        <el-slider
          v-model="scale"
          :min="minScale"
          :max="maxScale"
          :step="0.01"
          style="width: 100px"
          :format-tooltip="formatTooltip"
        ></el-slider>
      </div>
    </div>
    <div style="height: 200px">
      {{dataList}}
    </div>

    <div class="container" :style="containerObjet">
      <div class="content" id="content"></div>
      <div
        v-if="lineStatus === 'Y'"
        v-for="item in xLine"
        class="line-x"
        :style="{
          top: item * scale + 'px'
        }"></div>
      <div
        v-if="lineStatus === 'Y'"
        v-for="item in yLine"
        class="line-y"
        :style="{
          left: item * scale + 'px'
        }"></div>
      <template v-if="containerDone">
        <xd-jbz-item
          v-for="(item,index) in dataList"
          :container="containerInfo"
          scroll-parant-ele="app-wrapper__right-content"
          :item="item"
          :default-value="item.position"
          :scale="scale"
          :key="item.id"
          :sort="index"
          :step="myStep"
          :radius-num="radius"
          v-model="item.position"
          ></xd-jbz-item>
      </template>
    </div>
  </div>

</template>

<script>
//import XdJbzItem from "@/dome/base/jbz/XdJbzItem.vue";
import XdJbzItem from "@/dome/base/jbz/XdJbzItemScale.vue";

export default {
  components: {XdJbzItem},
  data() {
    return {
      containerInfo:{},
      containerDone:false,
      myStep: 1000,
      radius:0,//半径
      dataList:[],//点位数据
      result: null, //活动数据

      //画布大小（通过上传图片获取画布高与宽）
      height:1593,
      width:750,

      //放大缩小
      scale:1,
      minScale:1,
      maxScale:4,


      //辅助线
      xLineStep: 10,
      yLineStep:10,
      xLine:[],
      yLine:[],
      lineStatus: 'N',

      //test
      xTop:15.2,
      xLeft:0,
      xWidth: 15.2,
      yTop:0,
      yLeft:15.2,
      yHeight: 15.2,

      value1:43,


    };
  },
  computed:{
    containerObjet(){
      return {
        height: this.height * this.scale + 'px',
        width:this.width * this.scale+'px',
        backgroundImage: `url(${this.result?this.result.backgroundImage.url:'none'})`
      }
    }
  },
  watch:{
    scale(){
      this.init()
    }
  },
  created() {
    setTimeout(()=>{
      this.result = {
        name: '重走长征路',
        radius: 43,
        items:[
          { "position": { "x": "71.93", "y": "121.70" }, "id": 1, "step": 0, "name": "", "thumb": "", "description": "" },
          { "position": { "x": "193.29", "y": "167.54" }, "id": 1, "step": 100, "name": "", "thumb": "", "description": "" },
          { "position": { "x": "80.54", "y": "176.54" }, "id": 2, "step": 500, "name": "", "thumb": "", "description": "" },
          { "position": { "x": "198.25", "y": "138.91" }, "id": 3, "step": 1500, "name": "", "thumb": "", "description": "" },
          { "position": { "x": "99.54", "y": "196.54" }, "id": 4, "step": 3000, "name": "", "thumb": "", "description": "" },
          { "position": { "x": "170.04", "y": "89.54" }, "id": "oOSyEZHY5nSmrbowKK1G", "name": "", "thumb": "", "description": "" },
          { "position": { "x": "70.54", "y": "150.54" }, "id": "5po6mZzQraHGUm542dZx", "name": "", "thumb": "", "description": "" },
          { "position": { "x": "190.29", "y": "111.29" }, "id": "1sA47CIbQ8v1YOY4y97g", "name": "", "thumb": "", "description": "" },
          { "position": { "x": "110.29", "y": "82.54" }, "id": "vdEdwu1CIQVxxwqU4xdm", "name": "", "thumb": "", "description": "" },
          { "position": { "x": "151.04", "y": "203.29" }, "id": "Aa4xLWQMtCf5BhmOclyI", "name": "", "thumb": "", "description": "" },
          { "position": { "x": "175.29", "y": "190.04" }, "id": "AdUrTg5Wmz2Pz9DU4wvY", "name": "", "thumb": "", "description": "" },
          { "position": { "x": "141.79", "y": "78.54" }, "id": "u7TaFMP7x298N3kbtJXS", "name": "", "thumb": "", "description": "" },
          { "position": { "x": "123.54", "y": "205.29" }, "id": "fTzGqXQlhw5j7B8GY6c3", "name": "", "thumb": "", "description": "" },
          { "position": { "x": "87.28", "y": "97.97" }, "id": "njwQOxRHZxuvUg8yc95T", "name": "", "thumb": "", "description": "" }
        ],
        backgroundImage:{"url":"//sandbox-img.jufubao.cn/uploads/20240403/9533cbde5ec8afc1584509c739ffa199.jpg"},
        color:'',
        status:'Y/N'
      };

      this.init();
      this.dataList = this.result.items;
      this.radius = this.result.radius
    },2000);

  },
  methods: {

    openLine(status){
      this.lineStatus = status;
    },
    drawLine(type='Y'){
      let step = type === 'Y'?this.yLineStep:this.xLineStep;
      let long =  type === 'Y'?this.height:this.width;
      let len = Math.floor(long/step);
      let temp =[];
      for(let i = 1; i <=len;i++) {
        temp.push(i*step);
      }
      return temp
    },
    formatTooltip(val) {
      return val
    },
    init(){
      this.$nextTick(() => {
        let containerEle = document.getElementById('content');
        let container = containerEle.getBoundingClientRect();
        this.containerInfo = {
          left:container.left,
          top:container.top,
          width:container.width,
          height:container.height,
          x:container.x,
          y:container.y,
        };
        this.containerDone = true;

        this.xLine = this.drawLine('Y');
        this.yLine = this.drawLine();
      });
    },
    handleScale(scale){
      this.scale = scale;
      this.init();
    },
    add(){
      this.dataList.push({
        position:{
          x: this.$xdHelper.random(0,(750-30)),
          y: this.$xdHelper.random(0,(450-30)),
        },
        id:this.$xdHelper.randomChar(20),
      });
      this.init();
    },

  }
};
</script>

<style scoped lang="scss">
.line-x {
  position: absolute;
  height: 1px;
  background: rgba(255,255,255,.5);
  z-index: 1000;
  left: 0;
  right: 0;
}
.line-y {
  position: absolute;
  background: rgba(255,255,255,.5);
  z-index: 1001;
  width: 1px;
  top:0;
  bottom: 0;
}
.jbz {
  margin: 20px;
}
.btn {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  & > * {
    font-size: 14px;
    flex-shrink: 0;
    margin: 0 20px 0 0;
    &:last-child {
      margin-right: 0;
    }
    &.btn-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      & > span {
        margin-right: 20px;
      }
    }
  }
}
.container {
  position: relative;
  background-color: #ccc;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  overflow: hidden;

  & > .content {
    height: 100%;
    width: 100%;
  }
}

</style>
