<template>
  <div class="map-ditu">
    <Tmap ref="map"></Tmap>
    <div class="ledata">
      <el-input v-model="treeval" @focus="showTree = true"></el-input>
      <div class="Showtree">
        <el-tree v-if="showTree" :data="treeData" @node-click="handleNodeClick"></el-tree>
      </div>

      <p><span class="SpText">风场总数：</span>20 个</p>
      <p><span class="SpText">已分析风场：</span>10 个</p>
      <p><span class="SpText">未分析风场：</span>10个</p>
      <p><span class="SpText">风机数量：</span>10 个</p>
      <p><span class="SpText">风机状态：</span>
        <span class="red"></span>
        <span class="yellow"></span>
        <span class="green"></span>
      </p>
      <el-switch v-model="value1" active-text="显示" inactive-text="隐藏" @change="handleSwitchChange">
      </el-switch>
    </div>
    <Rightdata v-show="ShowRi" class="ridata"></Rightdata>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
import Tmap from "@/components/map";
import Rightdata from "./component/rightdata.vue";
export default {
  name: "Index",
  components: {
    Tmap,
    Rightdata,
  },
  data() {
    return {
      ShowRi: true,
      treeval: "",
      value1: true,
      treeval: '', // 绑定的输入框值
      showTree: false, // 控制树列表显示
      treeData: [ // 树列表数据，根据实际需求自行替换
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 1-1'
            }
          ]
        },
        {
          id: 3,
          label: 'Node 2'
        }
      ]

    };
  },

  mounted() {
        //模拟地图上的点位
        const data = [{ point: [120.2, 30.35] }, { point: [121.2, 30.35] }];
    data.forEach((element) => {
      console.log(element);
      this.$refs.map.addMarker(element);
    });

   },

  methods: {

    clickEvent(data) {
      console.log(data);
      this.$router.push({ name: "about" });
    },
    
    handleSwitchChange() {
      this.ShowRi = !this.ShowRi;
    },
    handleNodeClick(data) {
      // 将点击的节点值赋给输入框
      this.treeval = data.label;
      // 隐藏树列表
      this.showTree = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.map-ditu {
  min-width: 86.9vw;
  max-width: 94.9vw;
  height: 93.4vh;
  position: relative;
}

.ridata {
  position: absolute;
  top: 20px;
  right: 20px;
}

.ledata {
  font-size: 14px;
  width: 300px;
  position: absolute;
  top: 20px;
  left: 60px;
  background: #008080;
  padding: 10px;
  color: #fff;
  border-radius: 5px;

  p {
    line-height: 24px;

    .SpText {
      display: inline-block;
      width: 90px;
      text-align: right;
    }

    .red,
    .yellow,
    .green {
      display: inline-block;
      width: 30px;
      height: 12px;
      margin-right: 5px;
    }
    .red { background-color: #E16757; }
  .yellow { background-color: #EECB5F; }
  .green { background-color:#7ECF51 }
  }
}
.Showtree{
  position: absolute;
  top: 55px;
  left: 10px;
  width: 280px
}
</style>
