<template>
  <div class="container">
    <el-card class="statics">
      <div class="statics-item">
        <p class="statics-item__title">面积总量</p>
        <p class="statics-item__num">{{ list.reduce((a,b) => a + Number(b.dikuaimianji),0) }} 平方</p>
      </div>
      <div class="statics-item">
        <p class="statics-item__title">资产总量</p>
        <p class="statics-item__num">{{ total }} 处</p>
      </div>
      <div class="statics-item">
        <p class="statics-item__title">闲置面积</p>
        <p class="statics-item__num">{{ Math.round(Math.random()*5000+5000) }} 平方</p>
      </div>
      <div class="statics-item">
        <p class="statics-item__title">租聘面积</p>
        <p class="statics-item__num">{{ list.reduce((a,b) => a + Number(b.jianzhumianji || 0),0) }} 平方</p>
      </div>
      <div class="statics-item">
        <p class="statics-item__title">公益产业</p>
        <p class="statics-item__num">{{ Math.round(Math.random()*5000+5000) }} 平方</p>
      </div>
    </el-card>

    <el-card class="search-bar">
      <span class="search-name">区域</span>
      <el-select
        clearable
        style="width: 110px;"
        v-model="select.filter[0].value"
        size="mini"
        placeholder="请选择区域"
      >
<!--        @change="areaPick"-->
        <el-option
          v-for="(item, index) in wxAreas"
          :value="index + 1"
          :label="item"
        ></el-option>
      </el-select>

      <span class="search-name">地块类型</span>
      <el-select
        clearable
        style="width: 120px;"
        v-model="select.filter[2].value"
        size="mini"
        placeholder="请选择地块类型"
      >
        <el-option
          v-for="(item, index) in dikuaileixingTypes"
          :value="item.value"
          :label="item.key"
        ></el-option>
      </el-select>

      <span class="search-name">建筑类型</span>
      <el-select
        clearable
        style="width: 120px;"
        v-model="select.filter[3].value"
        size="mini"
        placeholder="请选择建筑类型"
      >
        <el-option
          v-for="(item, index) in jianzhuleixingTypes"
          :value="item.value"
          :label="item.key"
        ></el-option>
      </el-select>

      <span class="search-name">资产类型</span>
      <el-select
        clearable
        style="width: 120px;"
        v-model="select.filter[4].value"
        size="mini"
        placeholder="请选择资产类型"
      >
        <el-option
          v-for="(item, index) in zichanleixingTypes"
          :value="item.value"
          :label="item.key"
        ></el-option>
      </el-select>

      <el-button size="mini" type="primary" style="margin-left: 10px;" @click="areaPick">查询</el-button>
    </el-card>

    <transition name="fade">
      <div class="search-list" v-show="searchShow" v-loading="loading">
        <div class="search-list__close" @click="searchShow = false">
          <i class="el-icon-arrow-right"></i>
        </div>

        <div
          class="search-list__bar"
        >
          <Button size="small" type="success" :ghost="select.filter[5].value !== 1" @click="select.filter[5].value = 1,areaPick()">有建筑</Button>
          <Button size="small" type="primary" :ghost="select.filter[5].value !== 2" @click="select.filter[5].value = 2,areaPick()">无建筑</Button>
          <Button size="small" type="info" :ghost="!!select.filter[5].value" @click="select.filter[5].value = '',areaPick()">全部</Button>
          <el-input size="mini" style="margin-top: 4px;" placeholder="请输入地块名称" v-model="select.filter[1].value" clearable>
            <el-button type="primary" slot="append" icon="el-icon-search" @click="areaPick"></el-button>
          </el-input>
<!--          <RadioGroup v-model="select.filter[5].value" type="button" button-style="solid">-->
<!--            <Radio label="是" :value="1"></Radio>-->
<!--            <Radio label="否" :value="0"></Radio>-->
<!--            <Radio label="全部" value=""></Radio>-->
<!--          </RadioGroup>-->
<!--          <Input-->
<!--            ref="search-input"-->
<!--            v-model="select.filter[1].value"-->
<!--            style="width: 120px; margin-right: 10px"-->
<!--            placeholder="地块名称"-->
<!--            @mousedown="test"-->
<!--          />-->
<!--          <el-select-->
<!--            v-model="select.filter[0].value"-->
<!--            size="small"-->
<!--            style="width: 120px; margin-right: 10px"-->
<!--            placeholder="请选择区域"-->
<!--          >-->
<!--            <el-option-->
<!--              v-for="(item, index) in wxAreas"-->
<!--              :value="index + 1"-->
<!--              :label="item"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--          <Button type="primary" @click="$refs['table'].getTableData(true)"-->
<!--          >查询</Button-->
<!--          >-->
        </div>

        <p style="zoom: .9;text-align: center;padding: 4px 0;font-weight: 600;">总共 {{total}} 条</p>
        <ul v-if="list && list.length > 0">
          <li v-for="(item,index) in list" :key="item.id" :style="{'border-color': openData.id === item.id ? 'blue' : ''}">
            <div class="left">
              <p>{{ item.dikuaimingcheng }}</p>
              <Tag color="blue" v-if="item.suoshuqu">{{ wxAreas[item.suoshuqu-1] }}</Tag>
              <Tag color="cyan" v-if="item.suoshuqu">{{ dikuaileixing(item.dikuaileixing) }}</Tag>
              <Tag color="gold" v-if="item.jianzhuleixing">{{ jianzhuleixing(item.jianzhuleixing) }}</Tag>
              <Tag color="magenta" v-if="item.zichanleixing">{{ zichanleixing(item.zichanleixing) }}</Tag>
            </div>
            <div class="right">
              <Button type="primary" @click="pickRow({ row:item })">查看</Button>
            </div>
          </li>
        </ul>
        <el-empty v-else style="flex: 1;width: 100%;padding: 40px 60px;">
        </el-empty>
<!--        <div>-->
<!--          <xy-table-->
<!--            ref="table"-->
<!--            :height="360"-->
<!--            :action="index"-->
<!--            :table-item="table"-->
<!--            :req-opt="selectList"-->
<!--            @row-click="pickRow"-->
<!--          ></xy-table>-->
<!--        </div>-->
      </div>
    </transition>
    <transition name="fade">
      <div class="search-list__close close-btn__hidden" v-show="!searchShow" @click="searchShow = true">
        <i class="el-icon-arrow-left"></i>
      </div>
    </transition>
<!--    <div class="search" v-draggable="(status) => (dragging = status)">-->
<!--      <transition name="fade">-->
<!--        <div-->
<!--          class="search-btn"-->
<!--          v-if="!searchShow"-->
<!--          @click="dragging ? '' : (searchShow = true)"-->
<!--        >-->
<!--          查询-->
<!--        </div>-->
<!--      </transition>-->

<!--      <transition name="fade">-->
<!--        <div class="search-list" v-if="searchShow">-->
<!--          <div class="search-list__close" @click="searchShow = false">-->
<!--            <i class="el-icon-arrow-right"></i>-->
<!--          </div>-->

<!--          <div-->
<!--            style="-->
<!--              display: flex;-->
<!--              justify-content: flex-start;-->
<!--              flex-wrap: wrap;-->
<!--              margin-bottom: 10px;-->
<!--            "-->
<!--          >-->
<!--            <Input-->
<!--              ref="search-input"-->
<!--              v-model="selectList.filter[1].value"-->
<!--              style="width: 120px; margin-right: 10px"-->
<!--              placeholder="地块名称"-->
<!--              @mousedown="test"-->
<!--            />-->
<!--            <el-select-->
<!--              v-model="selectList.filter[0].value"-->
<!--              size="small"-->
<!--              style="width: 120px; margin-right: 10px"-->
<!--              placeholder="请选择区域"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="(item, index) in wxAreas"-->
<!--                :value="index + 1"-->
<!--                :label="item"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--            <Button type="primary" @click="$refs['table'].getTableData(true)"-->
<!--              >查询</Button-->
<!--            >-->
<!--          </div>-->

<!--          <div>-->
<!--            <xy-table-->
<!--              ref="table"-->
<!--              :height="360"-->
<!--              :action="index"-->
<!--              :table-item="table"-->
<!--              :req-opt="selectList"-->
<!--              @row-click="pickRow"-->
<!--            ></xy-table>-->
<!--          </div>-->
<!--        </div>-->
<!--      </transition>-->
<!--    </div>-->

    <div class="map" id="map" :style="{ height: mapHeight + 'px' }"></div>

    <div ref="infoWindow" id="infoWindow" v-show="isShowInfoWindow">
      <el-scrollbar style="height: 260px; width: 100%">
        <div class="infoWindow-container">
          <div class="infoWindow-container__item" v-for="item in form">
            <p>{{ item.name }}</p>
            <p>{{ contentFormat(item) }}{{ units.get(item.field) }}</p>
          </div>
        </div>
      </el-scrollbar>

      <p
        class="to-detail"
        @click="$router.push('/assetsDetail?id=' + openData.id)"
      >
        查看详情
      </p>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/system/baseForm";
import { show } from "@/api/system/customForm";
import { listdept } from "@/api/system/department";
import { getparameter } from "@/api/system/dictionary";
export default {
  name: "mapList",
  data() {
    return {
      loading: false,
      dragging: false,
      searchShow: true,
      selectList: {
        table_name: "assets",
        filter: [
          {
            key: "suoshuqu",
            op: "eq",
            value: "",
          },
          {
            key: "dikuaimingcheng",
            op: "like",
            value: "",
          }
        ],
      },
      select: {
        table_name: "assets",
        filter: [
          {
            key: "suoshuqu",
            op: "eq",
            value: "",
          },
          {
            key: "dikuaimingcheng",
            op: "like",
            value: "",
          },
          {
            key: "dikuaileixing",
            op: "eq",
            value: ""
          },
          {
            key: "jianzhuleixing",
            op: "eq",
            value: ""
          },
          {
            key: 'zichanleixing',
            op: 'eq',
            value: ''
          },
          {
            key: 'zichanshifouyoujianzhu',
            op: 'eq',
            value: ''
          }
        ],
      },
      customForm: {
        customFormId: "",
        tableName: "",
      },
      form: [],
      total: 0,
      table: [],
      list: [],
      mapHeight: 0,
      center: [120.283692, 31.614211],
      isShowInfoWindow: false,
      openData: {},
      infoWindow: null,
      district: null,
      cluster: null,
      polygons: [],
      markerList: [],
      wxAreas: [
        "宜兴市",
        "惠山区",
        "新吴区",
        "梁溪区",
        "江阴市",
        "滨湖区",
        "锡山区",
      ],
      units: new Map([
        ["jianzhumianji", "m²"],
        ["jianzhugaodu", "m"],
        ["dikuaizongjia", "元"],
        ["dikuaimianji", "m²"],
        ["muqianjunjia", "元"],
      ]),
    };
  },
  methods: {
    index,
    areaPick(e) {
      this.areaBG(this.wxAreas[this.select.filter[0].value - 1]);
      this.getList().then((res) => {
        this.setMapMarker();
      });
    },
    pickRow({ row }) {
      this.isShowInfoWindow = true;
      this.openData = row;
      if (row.zichanweizhi) {
        let lat, lng;
        [lng, lat] = row.zichanweizhi.split(",");
        this.map.panTo([lng, lat]);
        this.map.setZoom(30);
        this.infoWindow.open(this.map, [lng, lat]);
      } else {
        this.map.panTo(this.center);
        this.infoWindow.open(this.map, this.center);
      }
    },
    async getList() {
      this.loading = true;
      const res = await index({
        page: 1,
        page_size: 9999,
        ...this.select,
      });
      this.total = res.total;
      this.list = res.data;
      this.loading = false;
    },
    addCluster() {
      if (this.cluster) {
        this.cluster.setMap(null);
      }
      this.cluster = new AMap.MarkerClusterer(this.map, this.markerList, {
        gridSize: 50, // 设置网格像素大小
        renderClusterMarker: this.renderClusterMarker, // 自定义聚合点样式
        renderMarker: this.renderMarker, // 自定义非聚合点样式
      });
    },
    renderClusterMarker(context) {
      let factor = Math.pow(context.count / this.list.length, 1 / 18);
      let div = document.createElement("div");
      let Hue = 180 - factor * 180;
      let bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
      let fontColor = "hsla(" + Hue + ",100%,90%,1)";
      let borderColor = "hsla(" + Hue + ",100%,40%,1)";
      let shadowColor = "hsla(" + Hue + ",100%,90%,1)";
      div.style.backgroundColor = bgColor;
      let size = Math.round(
        30 + Math.pow(context.count / this.list.length, 1 / 5) * 20
      );
      div.style.width = div.style.height = size + "px";
      div.style.border = "solid 1px " + borderColor;
      div.style.borderRadius = size / 2 + "px";
      div.style.boxShadow = "0 0 5px " + shadowColor;
      div.innerHTML = context.count;
      div.style.lineHeight = size + "px";
      div.style.color = fontColor;
      div.style.fontSize = "14px";
      div.style.textAlign = "center";
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
      context.marker.setContent(div);
    },
    renderMarker(context) {
      let content =
        '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
      let offset = new AMap.Pixel(-9, -9);
      context.marker.setContent(content);
      context.marker.setOffset(offset);
    },
    setMapMarker() {
      this.map.remove(this.markerList);
      this.markerList = [];

      this.list.forEach((item) => {
        if (item.zichanweizhi) {
          let lat, lng;
          [lng, lat] = item.zichanweizhi.split(",");
          let marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: [Number(lng), Number(lat)],
            offset: new AMap.Pixel(-13, -30),
          });
          let markerContent = document.createElement("div");
          markerContent.setAttribute("class", "map-marker");
          markerContent.onclick = () => {
            this.pickRow({ row: item });
          };
          let markerImg = document.createElement("img");
          markerImg.src =
            item.zichanshifouyoujianzhu === 1 ? "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" : "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
          let markerSpan = document.createElement("span");
          markerSpan.setAttribute("class", "map-marker__text");
          markerSpan.innerText =
            item.dikuaimingcheng.length > 4
              ? item.dikuaimingcheng.slice(0, 2) +
                ".." +
                item.dikuaimingcheng.slice(item.dikuaimingcheng.length - 2)
              : item.dikuaimingcheng;
          markerContent.appendChild(markerImg);
          markerContent.appendChild(markerSpan);
          marker.setContent(markerContent);
          this.markerList.push(marker);
        }
      });
      this.map.add(this.markerList);

      this.addCluster();
    },
    init(adcode = ["320200"]) {
      let winHeight = document
        .querySelector("#app")
        ?.getBoundingClientRect()?.height;
      this.mapHeight = winHeight - 50 - 20 - 20;

      this.map = new AMap.Map("map", {
        center: this.center,
        mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
        zoom: 15,
      });
      // 行政区域加载
      this.areaBG(adcode);
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true,
        autoMove: true,
        avoid: [20, 20, 20, 20],
        content: this.$refs.infoWindow,
        closeWhenClickMap: true,
        offset: new AMap.Pixel(-10, -10),
      });
      this.map.on('click',e => {
        console.log(e)
      })
    },
    // 加载
    areaBG(adcode = ["320200"]) {
      AMap.service("AMap.DistrictSearch", () => {
        let opts = {
          subdistrict: 1, // 返回下一级行政区
          extensions: "all", // 返回行政区边界坐标组等具体信息
          level: "city", // 查询行政级别为市
          // adcode:'320200'
        };
        // 实例化DistrictSearch
        let district = new AMap.DistrictSearch(opts);
        district.setLevel("district");
        // 行政区查询
        district.search(`${adcode}`, (status, result) => {
          //清空
          this.map.remove(this.polygons);
          this.polygons = [];
          // 获取边界信息
          let bounds = result.districtList[0]?.boundaries;
          if (bounds) {
            for (let i = 0, l = bounds.length; i < l; i++) {
              // 生成行政区划polygon
              let polygon = new AMap.Polygon({
                map: this.map,
                strokeWeight: 1,
                path: bounds[i],
                fillOpacity: 0.2,
                fillColor: "#3579c788",
                strokeColor: "#3579c7",
              });
              polygon.on('click',e => {
                console.log('polygon',e)
              })
              this.polygons.push(polygon);
              this.map.setFitView(polygon);
            }
          }
        });
      });
    },

    async getFormDetail() {
      if (this.$route.meta.params?.custom_form) {
        let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
        try {
          let custom_form = JSON.parse(decode);
          this.customForm.customFormId = custom_form.custom_form_id;
          this.customForm.tableName = custom_form.table_name;
          this.select.table_name = custom_form.table_name;
        } catch (err) {
          console.warn(err);
        }
      }

      const res = await show({ id: this.customForm.customFormId }, false);

      //字段处理
      //初始表白名单
      let baseTable = new Map([
        [
          "departments",
          async () => {
            const res = await listdept();
            return res;
          },
        ],
        ["admins", []],
      ]);
      let { fields, relation } = res;
      let fieldRes = fields.sort((a, b) => a.sort - b.sort);
      if (
        !fields ||
        !relation ||
        !fields instanceof Array ||
        !relation instanceof Array
      ) {
        throw new Error("fields或relation格式错误");
      }
      fieldRes?.forEach((i, index) => {
        i._relations = relation.find(
          (j) => j.link_table_name.split("_")[1] === i.field
        );
        if (i.select_item && typeof i.select_item === "object") {
          let keys = Object.keys(i.select_item);
          i._params = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(i.select_item[key])
                ? Number(i.select_item[key])
                : i.select_item[key],
            };
          });
        }
        if (i.edit_input === "file" || i.edit_input === "files") {
          return;
        }
        if (i._relations) {
          if (baseTable.get(i._relations.link_table_name)) {
            baseTable
              .get(i._relations.link_table_name)()
              .then((res) => {
                i._params = res.data;
              });
          } else {
            i._params = i._relations.parameter_id
              ? getparameter({ id: i._relations.parameter_id }, false).then(
                  (res) => {
                    i._params = res.detail;
                  }
                )
              : this.index({
                  table_name: i._relations.link_table_name,
                  page: 1,
                  page_size: 9999,
                }).then((res) => {
                  i._params = res.data;
                });
          }
        }
      });
      this.form = fieldRes || [];
      this.form
        ?.filter((i) => i.list_show)
        .forEach((i) => {
          let linkOb = {};

          if (i.edit_input === "richtext") {
            linkOb.customFn = (row) => {
              return (
                <div
                  style={{ "max-height": "55px", overflow: "scroll" }}
                  domPropsInnerHTML={row[i.field]}
                ></div>
              );
            };
          }
          if (
            i.select_item &&
            typeof i.select_item === "object" &&
            !(i.select_item instanceof Array)
          ) {
            let keys = Object.keys(i.select_item);
            linkOb.customFn = (row) => {
              let paramMap = new Map();
              keys.forEach((key) => {
                paramMap.set(i.select_item[key], key);
              });

              return <span>{paramMap.get(row[i.field]?.toString())}</span>;
            };
          }
          if (i._relations) {
            let { link_relation, foreign_key, link_with_name } = i._relations;
            if (link_relation === "newHasOne" || link_relation === "hasOne") {
              linkOb.customFn = (row) => {
                if (i.edit_input === "file") {
                  return (
                    <a
                      download={row[link_with_name]?.original_name}
                      href={row[link_with_name]?.url}
                    >
                      {row[link_with_name]?.original_name}
                    </a>
                  );
                } else {
                  return (
                    <span>
                      {row[link_with_name]?.name ||
                        row[link_with_name]?.no ||
                        row[link_with_name]?.value}
                    </span>
                  );
                }
              };
            }

            if (link_relation === "hasMany" || link_relation === "newHasMany") {
              linkOb.customFn = (row) => {
                if (i.edit_input === "files") {
                  return (
                    <div style="display: flex;flex-direction: column;">
                      {row[link_with_name]?.map((o) => (
                        <a>{o?.original_name || o?.name}</a>
                      ))}
                    </div>
                  );
                } else {
                  return (
                    <div>
                      {row[link_with_name]?.map((o) => (
                        <p>
                          {o?.name ||
                            o?.no ||
                            o?.value ||
                            o?.biaoti ||
                            o?.mingcheng}
                        </p>
                      ))}
                    </div>
                  );
                }
              };
            }
          }

          let alignLeft = ["dikuaimingcheng"];
          this.table.push(
            Object.assign(
              {
                prop: i.field,
                label: i.name,
                width: i.width,
                align: alignLeft.find((m) => m === i.field) ? "left" : "center",
                fixed: i.is_fixed,
              },
              linkOb
            )
          );
        });
      this.table.unshift({
        type: "index",
        width: 60,
        label: "序号",
      });
    },
  },
  computed: {
    contentFormat() {
      return function (i) {
        if (i._params && i._params.length > 0) {
          return i._params.find(
            (param) => param.value == this.openData[i.field]
          )?.key;
        }
        if (i._relations) {
          let { link_relation, foreign_key, link_with_name, link_table_name } =
            i._relations;

          if (link_table_name && link_relation) {
            if (link_relation === "hasOne" || link_relation === "newHasOne") {
              return (
                this.openData[link_with_name]?.name ||
                this.openData[link_with_name]?.no ||
                this.openData[link_with_name]?.value
              );
            }
            if (link_relation === "hasMany" || link_relation === "newHasMany") {
              return this.openData[link_with_name]
                ?.map((o) => o?.original_name || o?.name || o?.no || o?.value)
                ?.toString();
            }
          }
        }

        return this.openData[i.field] || "/";
      };
    },
    dikuaileixing () {
      return function (dikuaileixing) {
        return this.form.find(j => j.field === 'dikuaileixing')?._params.find(i => i.value == dikuaileixing)?.key || ''
      }
    },
    dikuaileixingTypes () {
      return this.form.find(j => j.field === 'dikuaileixing')?._params || []
    },
    jianzhuleixing () {
      return function (jianzhuleixing) {
        return this.form.find(j => j.field === 'jianzhuleixing')?._params.find(i => i.value == jianzhuleixing)?.key || ''
      }
    },
    jianzhuleixingTypes () {
      return this.form.find(j => j.field === 'jianzhuleixing')?._params || []
    },
    zichanleixing () {
      return function (zichanleixing) {
        return this.form.find(j => j.field === 'zichanleixing')?._params.find(i => i.value == zichanleixing)?.key || ''
      }
    },
    zichanleixingTypes () {
      return this.form.find(j => j.field === 'zichanleixing')?._params || []
    },
  },
  created() {
    this.getFormDetail();
  },
  async mounted() {
    let areaId = Number(this.$route.query.area) || ''
    areaId ? (this.init(this.wxAreas[areaId - 1]),this.select.filter[0].value = areaId) : this.init();

    await this.getList();
    this.setMapMarker();
  }
};
</script>

<style scoped lang="scss">
$staticsHeight: 60px;
.statics {
  height: $staticsHeight;

  z-index: 2;
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;

  ::v-deep .el-card__body {
    height: 100%;
    display: flex;
    align-items: center;

    padding: 0;
  }
  &-item {
    text-align: center;
    flex: 1;

    position: relative;
    &__title {
      zoom: .9;

    }
    &__num {
      font-weight: 600;
      line-height: 1.5;
      font-size: 22px;
    }

    &::after {
      content: '';
      width: 2px;
      border-radius: 6px;
      background: #66666655;

      position: absolute;
      right: 1px;
      top: 5px;
      bottom: 5px;
    }
    &:nth-last-child(1){
      &::after {
        display: none;
      }
    }
  }
}
.container {

  position: relative;
}
::v-deep .el-card__body {
  padding: 8px;
}
.search-bar {
  .search-name {
    zoom: .9;

    padding: 0 10px;
  }

  z-index: 2;
  position: absolute;
  top: calc(8px * 2 + #{$staticsHeight});
  left: 8px;
}
.close-btn__hidden {
  filter: drop-shadow(2px 2px 5px #00000033);

  z-index: 2;
  position: absolute;
  right: 0;
  left: unset!important;
  top: 8px;
}
.search-list {
  background-color: #ebeef6;
  max-height: calc(100% - 8px * 3 - #{$staticsHeight});
  min-height: 200px;
  max-width: 355px;
  border-radius: 6px;
  filter: drop-shadow(2px 2px 5px #00000055);
  display: flex;
  flex-direction: column;

  z-index: 2;
  position: absolute;
  right: 8px;
  top: calc(8px * 2 + #{$staticsHeight});

  &__bar {
    background-color: #fff;
    display: flex;
    border-radius: 6px 6px 0 0;
    justify-content: center;
    flex-wrap: wrap;

    padding: 8px 10px;

    Button {
      flex: 1;
    }
  }
  &__close {
    zoom: 0.85;
    width: 40px;
    height: 40px;
    border-radius: 40px 0 0 40px;
    text-align: center;
    line-height: 40px;
    font-size: 22px;
    background: #ebeef6;
    cursor: pointer;

    position: absolute;
    top: 84px;
    left: -30px;
  }

  ul {
    flex: 1;
    overflow-y: scroll;

    padding: 10px;
    padding-top: 0;
    &::-webkit-scrollbar {
      width: 4px;
    }
    li {
      border-color: #0000;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      background-color: #fff;
      list-style: none;
      filter: drop-shadow(2px 2px 5px #00000022);
      display: flex;

      padding: 8px;
      .left {
        flex: 1;

        margin-right: 20px;
        & > p {
          font-weight: 600;
        }
      }
      & + li {

        margin-top: 10px;
      }
    }
  }
}
//.search {
//  min-width: 50px;
//  min-height: 50px;
//  position: fixed;
//  top: 115px;
//  left: 85px;
//  z-index: 99;
//
//  &-btn {
//    color: #fff;
//    width: 50px;
//    height: 50px;
//    background: $primaryColor;
//    filter: drop-shadow(2px 2px 5px #000000aa);
//    transition: all 0.3s;
//    border-radius: 50px;
//    text-align: center;
//    line-height: 50px;
//    cursor: pointer;
//    font-weight: bold;
//
//    position: absolute;
//    top: 0;
//    left: 0;
//    &:hover {
//      transform: scale(1.1, 1.1);
//    }
//  }
//
//  &-list {
//    max-width: 560px;
//    border-radius: 6px;
//    filter: drop-shadow(2px 2px 5px #00000055);
//    background: #fff;
//
//    padding: 10px;
//    position: relative;
//
//    &__close {
//      zoom: 0.85;
//      width: 40px;
//      height: 40px;
//      border-radius: 40px 0 0 40px;
//      text-align: center;
//      line-height: 40px;
//      font-size: 22px;
//      background: #fff;
//      cursor: pointer;
//      transform: translateY(-50%);
//
//      position: absolute;
//      top: 10%;
//      left: -24px;
//    }
//  }
//}

#map {
  border-radius: 4px;
  filter: drop-shadow(2px 2px 5px #00000033);

  margin-top: 20px;
}

.fade-enter-active {
  animation: fade-in 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
.fade-leave-active {
  animation: fade-out 0.4s ease-out both;
}

@keyframes fade-out {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(200px);
    opacity: 0;
  }
}
</style>
<style lang="scss">
#infoWindow {
  min-width: 260px;
  max-height: 260px;
  box-sizing: border-box;
  filter: drop-shadow(2px 2px 5px #00000055);
  border-radius: 0 4px 4px 4px;
  background: #fff;

  animation: fade-in 0.4s forwards;
  position: relative;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#infoWindow > p {
  background: $primaryColor;
  color: #fff;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 6px 6px 0 0;
  transform: translateY(-100%);

  position: absolute;
  left: 0;
  top: 0;
}
.infoWindow-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;

  padding: 20px;
  & > div > p:nth-child(1) {
    font-weight: 600;
    padding-bottom: 6px;
  }
  & > div > p:nth-child(2) {
    white-space: nowrap;
  }
}

::v-deep #infoWindow .el-icon-close {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.showInfo {
  text-align: center;
  cursor: pointer;
  color: $primaryColor;
}

.map-marker {
  display: flex;
  flex-direction: column;
  align-items: center;

  &__text {
    background: #fff;
    zoom: 0.75;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    filter: drop-shadow(2px 2px 5px #00000055);
  }
}
</style>
