<template>
  <div class="style_container layerControl" v-if="isShow">
    <div class="container">
      <div class="title" onselectstart="return false;">图层</div>
      <div class="list">
        <ul>
          <li v-for="(item, index) in layerArr" :key="index">
            <div class="control">
              <div
                class="layername"
                :title="item.title"
                @click="location(item)"
              >
                {{ item.title }}
              </div>

              <div class="func_button">
                <div>
                  <div class="up">
                    <p
                      class="bg"
                      @click="upLayer(item, index)"
                      v-if="index != 0"
                      title="图层上移"
                    ></p>
                  </div>
                  <div class="down">
                    <p
                      class="bg"
                      @click="downLayer(item, index)"
                      v-if="index != layerArr.length - 1"
                      title="图层下移"
                    ></p>
                  </div>
                </div>
                <p
                  :class="[
                    {
                      layershow: item.show,
                    },
                    {
                      layerhide: !item.show,
                    },
                  ]"
                  :title="item.show ? '图层显示' : '图层隐藏'"
                  @click="hideOrshow(item)"
                ></p>
                <p class="remove" @click="removeLayer(item)"></p>
                <p
                  :class="[
                    {
                      opacityShow:
                        item.opacityShow == undefined ||
                        item.opacityShow == false
                          ? false
                          : true,
                    },
                    {
                      opacityHide:
                        item.opacityShow == undefined ||
                        item.opacityShow == false
                          ? true
                          : false,
                    },
                  ]"
                  :title="'打开透明度设置面板'"
                  @click="contorlOpacityContent($event, item)"
                ></p>
              </div>
            </div>
            <div class="opacityContent" v-show="item.opacityShow">
              <span class="demonstration">透明度</span>
              <el-slider
                v-model="item.opacity"
                :min="0"
                :max="1"
                :step="0.01"
                @input="changeOpacity($event, item)"
              >
              </el-slider>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      addedLayer: [],
      isShow: false,
    };
  },
  mounted() {},
  methods: {
    bindMoveEvent() {
      $(".layerControl .title").on("mouseenter", function () {
        $(this).css("cursor", "move"); //改变鼠标的形状
      });
      $(".layerControl .title").on("mousedown", function (e) {
        var off = $(this).offset(); //获得的是方块的绝对偏移量
        // console.log(e.pageX)
        // console.log(off);
        var x = e.pageX - off.left; //这个是获得鼠标点击的位置与边框边左边距的位置
        var y = e.pageY - off.top; //这个是获得鼠标点击位置与上边框的位置
        $(document).bind("mousemove", function (ev) {
          $(".layerControl").stop();
          var lastx = ev.pageX - x;
          var lasty = ev.pageY - y;

          $(".layerControl").animate(
            { left: lastx + "px", top: lasty + "px" },
            10
          );
        });
      });
      $(document).on("mouseup", function () {
        $(".layerControl").css("cursor", "default");
        $(this).unbind("mousemove");
      });
    },
    changeOpacity(number, item) {
      item.layer.setOpacity(number);
    },
    hideOrshow(item) {
      item.show = !item.show;
      item.layer.setVisible(item.show);
    },
    location(item) {
      globalVariable.map.getView().fit(item.layer.getSource().getExtent());
    },
    upLayer(item, index) {
      // 上移
      this.layerArr.exchange(index, index - 1);
      this.$store.dispatch("resetLayerControl", this.layerArr);
    },
    downLayer(item, index) {
      // 下移
      this.layerArr.exchange(index, index + 1);
      this.$store.dispatch("resetLayerControl", this.layerArr);
    },
    removeLayer(item) {
      item.removeLayer(item);
    },
    contorlOpacityContent(e, item) {
      let judge =
        item.opacityShow == undefined || item.opacityShow == false
          ? true
          : false;
      this.$set(item, "opacityShow", judge);
    },
  },
  computed: {
    layerArr() {
      return this.$store.state.layers;
    },
  },
  watch: {
    layerArr(newVal, oldVal) {
      let that = this;
      if (newVal.length == 0) {
        this.isShow = false;
      } else {
        this.isShow = true;
        if (newVal.length == 1 && oldVal.length == 1)
          this.$nextTick(function () {
            that.bindMoveEvent();
          });
      }
      newVal.map(function (item, index) {
        item.layer.setZIndex(500 - index);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.layerControl {
  position: absolute;
  top: calc(100% - 230px);
  left: 10px;
}
.layerControl .container {
  width: 500px;
  .title {
    height: 50px;
    width: 100%;
    line-height: 50px;
    text-indent: 10px;
    font-size: 20px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #003662;
    border-bottom: 1px solid #eeeeee;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .list {
    min-height: 120px;
    max-height: 240px;
    width: 100%;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    overflow: hidden;
    overflow-y: auto;
    li {
      border-bottom: 1px solid #eeeeee;
      margin: 0 10px;
    }
    .control {
      width: 100%;
      height: 40px;
      position: relative;
      > div {
        display: inline-block;
        vertical-align: top;
      }
      .layername {
        width: calc(100% - 170px);
        height: 100%;
        line-height: 40px;
        font-size: 18px;
        color: #1c4a6f;
        padding-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        white-space: nowrap;
        word-break: break-all;
      }
      .func_button {
        height: 40px;
        box-sizing: border-box;
        padding: 3px 0px;
        > div {
          width: 32px;
          height: 32px;
          margin: 0px 5px;
          vertical-align: top;
          display: inline-block;
          .up,
          .down {
            width: 100%;
            height: 16px;
            p {
              width: 100%;
              height: 100%;
            }
          }
          .up .bg {
            background: url(../assets/images/layercontrol/layer_up.png) center
              center no-repeat;
          }
          .down .bg {
            background: url(../assets/images/layercontrol/layer_down.png) center
              center no-repeat;
          }
        }
        > p {
          width: 28px;
          height: 28px;
          cursor: pointer;
          display: inline-block;
          // border:1px solid #124572;
          border-radius: 16px;
          margin: 3px 4px 3px 3px;
        }
        .remove {
          background: url(../assets/images/layercontrol/remove1.png) center
            center no-repeat;
        }
        .layershow {
          background: url(../assets/images/layercontrol/show1.png) center center
            no-repeat;
        }
        .layerhide {
          background: url(../assets/images/layercontrol/hide1.png) center center
            no-repeat;
        }
        .opacityShow {
          background: url(../assets/images/layercontrol/opacity_show1.png)
            center center no-repeat;
        }
        .opacityHide {
          background: url(../assets/images/layercontrol/opacity_hide1.png)
            center center no-repeat;
        }
      }
    }
    .opacityContent {
      height: 40px;
      span {
        font-size: 16px;
        color: #333333;
        display: inline-block;
        width: 80px;
        line-height: 40px;
        vertical-align: top;
        text-indent: 15px;
      }
      .el-slider {
        display: inline-block;
        width: calc(100% - 125px);
        padding: 1px 0px;
        vertical-align: top;
      }
    }
  }
}
</style>