<template>
  <div class="home">
    <Map ref="mainMap" />
    <!-- <span class="el-input__suffix" style="transform: translateX(-56px)">
      <span class="el-input__suffix-inner">
        <i class="el-input__icon el-icon-circle-close el-input__clear"> </i>
      </span>
    </span>-->
    <div class="style_container zujian">
      <div class="container">
        <div>
          <div class="list" @click="controlMenu" v-if="!isSingleLayerShow"></div>
          <el-input
            placeholder="请输入关键字"
            v-model="keyword"
            class="input-with-select"
            v-on:keyup.enter.native="search"
            clearable
          >
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option
                v-for="item in searchTypeArr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-button id="elbtn" slot="append" @click="search" icon="el-icon-search"></el-button>
          </el-input>
          <Menu ref="menu" :menuIsShow="menuIsShow" :keyword="keyword" v-if="!isSingleLayerShow"></Menu>
          <PlaceList ref="placelist" :placeIsShow="placeIsShow" :keyword="keyword"></PlaceList>
          <ContentList ref="contentlist" :contentIsShow="contentIsShow" :keyword="keyword"></ContentList>
        </div>
      </div>
    </div>
    <div id="echart_main" class="style_container" v-if="isShowChart">
      <div class="container">
        <el-button type="text" @click="closeChart">
          <i class="el-icon-close"></i>
        </el-button>
        <div id="pie"></div>
      </div>
    </div>

    <Tool></Tool>
    <LayerControl></LayerControl>
    <Footer v-bind="{
      lon: lon,
      lat: lat,
      zoom: zoom,
    }"></Footer>
  </div>
</template>

<script>
// @ is an alias to /src
import api from "@/api/login";
import getSVGApi from "@/api/getSVG";

// import Map from "@/components/Map.vue";
// import PlaceList from "@/components/PlaceList.vue";
// import ContentList from "@/components/ContentList.vue";
// import Menu from "@/components/Menu.vue";
// import Tool from "@/components/Tool.vue";
// import LayerControl from "@/components/LayerControl.vue";
// import Footer from "@/components/Footer.vue";

export default {
  name: "Home",
  components: {
    Map: () => import("../components/Map.vue"),
    PlaceList: () => import("../components/PlaceList.vue"),
    ContentList: () => import("../components/ContentList.vue"),
    Menu: () => import("../components/Menu.vue"),
    Tool: () => import("../components/Tool.vue"),
    LayerControl: () => import("../components/LayerControl.vue"),
    Footer: () => import("../components/Footer.vue"),
  },
  data() {
    return {
      menuIsShow: false,
      placeIsShow: false,
      contentIsShow: false,
      searchTypeArr: [
        {
          id: 1,
          name: "地名",
        },
        {
          id: 2,
          name: "图层",
        },
        {
          id: 3,
          name: "内容",
        },
      ],
      select: 1,
      keyword: "",
      lon: 0,
      lat: 0,
      zoom: 0,
      isSingleLayerShow: false,
      setIntervalLoadDefaultLayer: null,
    };
  },
  created() {
    let that = this;
    this.$store.commit("setUrlParams", this.getParams());
    this.urlParam = this.getParams();
    if (
      this.urlParam.modelId != "" &&
      this.urlParam.modelId != null &&
      this.urlParam.modelId != undefined
    ) {
      this.isSingleLayerShow = true;
    } else {
      this.isSingleLayerShow = false;
    }
    api
      .login({
        userName: "user001",
        password: "1234567890",
        clientId: "1",
      })
      .then((result) => {
        if (result.code == 200) {
          that.$store.commit("setToken", result.message);
          that.getSvg();
          that.setIntervalLoadDefaultLayer = setInterval(() => {
            if (that.$refs.mainMap) {
              that.$refs.mainMap.loadDefaultLayer();
              clearInterval(that.setIntervalLoadDefaultLayer)
            }
          },100);

        }
      })
      .catch((err) => {
        console.log(err);
      });

    Array.prototype.exchange = function (beforeIndex, afterIndex) {
      let beforeEle = this[beforeIndex];
      let afterEle = this[afterIndex];
      this[afterIndex] = beforeEle;
      this[beforeIndex] = afterEle;
    };
  },

  // mounted() {
  //   // 
  // },

  methods: {
    controlMenu() {
      this.menuIsShow = !this.menuIsShow;
    },

    search() {
      switch (this.select) {
        case 1:
          this.placeIsShow = true;
          this.contentIsShow = false;
          this.$refs.placelist.search();
          break;
        case 2:
          this.placeIsShow = false;
          this.menuIsShow = true;
          this.$refs.menu.filterText();
          break;
        case 3:
          this.placeIsShow = false;
          this.contentIsShow = true;
          this.$refs.contentlist.search();
          break;
        default:
          break;
      }
    },

    getSvg() {
      let that = this;
      this.worker = new Worker("/static/getsvgworker.js");
      this.worker.onmessage = function (event) {
        that.$store.commit("setSVGObject", event.data);
      };
      getSVGApi
        .getMark()
        .then((result) => {
          if (result.code == 200)
            that.worker.postMessage({
              url: systemConfig.markImageUrl,
              arr: result.content,
              token: that.$store.state.token,
            });
        })
        .catch((err) => { });
    },

    getParams() {
      let obj = {
        userId: null,
        level: null,
        modelId: null,
        showType: null,
      };
      obj.userId = this.getQueryString("userId");
      obj.level = this.getQueryString("level");
      obj.modelId = this.getQueryString("modelId");
      obj.showType = this.getQueryString("showType");
      return obj;
    },

    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    closeChart() {
      this.$store.commit("setChartIsShow", false);
    },
  },

  computed: {
    lonlat() {
      return this.$store.state.mouseLocation;
    },
    zoomNum() {
      return this.$store.state.nowZoom;
    },
    isShowChart() {
      return this.$store.state.isShowChart;
    },

    dg() {
      return this.$refs.mainMap
    }
  },
  watch: {
    keyword(newVal) {
      if (newVal == "") {
        switch (this.select) {
          case 1:
            break;
          case 2:
            this.$refs.menu.clearFilter();
            break;
          case 3:
            break;
          default:
            break;
        }
      }
    },
    select(newVal, oldVal) {
      if (oldVal == 2) {
        this.$refs.menu.clearFilter();
      }
    },
    lonlat(newVal) {
      this.lon = newVal[0];
      this.lat = newVal[1];
    },
    zoomNum(newVal) {
      this.zoom = newVal;
    },
    isSingleLayerShow(newVal) {
      if (newVal) {
        this.searchTypeArr = [
          {
            id: 1,
            name: "地名",
          },
        ];
      } else {
        this.searchTypeArr = [
          {
            id: 1,
            name: "地名",
          },
          {
            id: 2,
            name: "图层",
          },
          {
            id: 3,
            name: "内容",
          },
        ];
      }
    },
  },
};
</script>

<style lang="less" scoped>
@height: 40px;
.home {
  .zujian {
    position: absolute;
    top: 10px;
    left: 10px;
    background: transparent !important;
  }
  .zujian .container {
    border-radius: 4px;
    width: fit-content;
    height: @height;
    box-sizing: border-box;
    > div {
      position: relative;
      .list {
        width: 21px;
        height: 17px;
        padding: (@height - 17)/2 (@height - 21)/2;
        cursor: pointer;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        background: #003662 url(../assets/images/menu/menu-icon.png) center
          center no-repeat;
        display: inline-block;
      }
      .input-with-select {
        width: 460px;
        border: 0px solid;
        height: @height;
        vertical-align: top;
        /deep/ .el-input-group__prepend {
          background: transparent;
          border: 0px solid;
          .el-select {
            .el-input {
              .el-input__suffix {
                .el-input__icon {
                  color: #ffffff;
                }
              }
            }
          }
        }
        /deep/ .el-input__inner {
          height: 40px;
          font-size: 16px;
          border: 0px solid;
          line-height: 40px;
          color: #ffffff;
          background-color: #436987c4;
        }
        /deep/ .el-input-group__append {
          background: transparent;
          border: 0px solid;
          background-color: #436987c4;
        }
        /deep/ .el-input__suffix {
          .el-input__clear:hover {
            color: #ffffff !important;
          }
        }
        .el-select {
          width: 100px;
          font-size: 16px;
          color: #fff;
        }
        // .el-input {
        //   width: 130px;
        // }
        #elbtn {
          /deep/ .el-icon-search {
            color: #ffffff;
          }
        }
      }
    }
  }
}
.el-select-dropdown__item {
  text-align: center;
}

#echart_main {
  position: absolute;
  right: 20px;
  bottom: 40px;
}
#echart_main .container {
  width: 500px;
  height: 400px;
  border-radius: 4px;
}

#echart_main button {
  position: absolute;
  right: 0px;
  z-index: 1;
  color: #000000;
  padding: 12px 12px;
}
#pie {
  position: relative;
  width: 500px;
  height: 400px;
}
</style>
