<template>
  <div class="data-statistics flex align-center just-center">
    <div class="img_but" @click="gettbGjZdxxselectList">
      <div class="imgBox"><img src="@/assets/images/qt11/lx.png" alt="" /></div>
      <div class="textB">路线</div>
    </div>
    <div class="img_but boxCenter" @click="gettbGjclXlxxselectList">
      <div class="imgBox"><img src="@/assets/images/qt11/zt.png" alt="" /></div>
      <div class="textB">站台</div>
    </div>
    <div class="img_but" @click="clearContents">
      <div class="imgBox">
        <img src="@/assets/images/qt11/qc.png" alt="" />
      </div>
      <div class="textB">清除</div>
    </div>
  </div>
</template>

<script setup>
// 可以在这里添加需要的响应式数据和方法
import { tbGjZdxxselectList, tbGjclXlxxselectList } from "@/api/mosty-zhgj.js";
import emitter from "@/utils/eventBus.js";
const gettbGjZdxxselectList = () => {
  tbGjZdxxselectList({}).then((res) => {});
  tbGjZdxxselectList({}).then((res) => {
    const data = res.map((item) => {
      return { coords: [item.zb], text: item.xlmc };
    });
    emitter.emit("echoLine", {
      type: "solid",
      coords: data,
      isclear: true,
      flag: "lx",
      color: "#46ff71"
    });
  });
};
const gettbGjclXlxxselectList = () => {
  tbGjclXlxxselectList({}).then((res) => {
    if (res) {
      const coords = res
        .filter((item) => item.jd && item.wd)
        .map((items) => {
          return {
            jd: items.jd,
            wd: items.wd
          };
        });
      const icon = require("@/assets/images/qt11/car.png");
      emitter.emit("addPoint", { coords, flag: "gjz", icon });
    }
  });
};
// const coords = [
//   { jd: 102.651727, wd: 30.117088 },
//   { jd: 102.527442, wd: 30.108846 },
//   { jd: 102.801965, wd: 30.100063 },
//   { jd: 102.711411, wd: 30.158424 },
//   { jd: 102.579582, wd: 30.174818 }
// ];
// 清除
const clearContents = () => {
  emitter.emit("deletePointArea", "gjz");
  emitter.emit("deletePointArea", "lx");
};
</script>

<style scoped lang="scss">
.data-statistics {
  height: 100%;
  //
  .img_but {
    text-align: center;

    .imgBox {
      width: 101px;
      height: 78px;
      img {
        width: 100%;
      }
    }

    .imgT {
      background: url("~@/assets/images/bi/R_T.png") no-repeat center center;
    }
    .textB {
      //   width: 38px;
      width: 100%;
      align-self: center;
      height: 18px;
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 19px;
      color: #c9eeff;
      line-height: 19px;
    }
  }
  .boxCenter {
    margin: 0 15px;
  }
}
</style>
