<!--
 * @Author: your name
 * @Date: 2022-01-11 13:44:17
 * @LastEditTime: 2022-02-17 11:47:53
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /test/hello-world/src/views/Home.vue
-->
<template>
  <div class="home bigwindow">
    <div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
    <div id="map"></div>
    <Center :show="show" :centerData="centerData" />
    <PipeColor />
    <div class="home-div">
      <img
        src="@/assets/mapinages/bottombanner.png"
        alt=""
        style="width: 100%; height: 100%; z-index: 999"
      />
      <div class="listingsSty fangy">
        <div
          @click="allCompany"
          :class="selarr.length == 3 ? 'active' : ''"
          class="firsty"
        >
          全部
        </div>
        <div
          class="firsty"
          :class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
          v-for="(item, index) in typeList"
          :key="item.val"
          @click="sel(index, item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <div
      id=""
      style="position: fixed; top: 0; right: 0; width: 100px; height: 100px"
    >
      <!-- <markerInfoWindow></markerInfoWindow> -->
    </div>

    <!-- 头部 -->
    <div class="banner-test">
      <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
      <img src="@/assets/mapinages/topbanner.png" alt="" />
    </div>

    <!-- 左边 -->
    <div class="leftbar">
      <leftBar ref="mychild2"></leftBar>
    </div>
    <!-- 右边 -->
    <div class="rightbar">
      <rightBar ref="mychild"></rightBar>
    </div>

    <!-- 左上角天气 -->
    <div
      class="weather"
      style="
        position: fixed;
        top: 0;
        margin-top: 5px;
        margin-left: 10px;
        left: 0;
        z-index: 999;
        width: 100px;
        height: 50px;
      "
    >
      <!-- <iframe src="../../static/weather.html" frameborder="0"></iframe> -->
      <iframe
        scrolling="no"
        src="https://yiketianqi.com/api.php?style=ty&skin=pitaya&color=a8a5a5"
        frameborder="0"
        width="200"
        height="55"
        allowtransparency="true"
      ></iframe>
      <!-- <iframe scrolling="no" src="https://yiketianqi.com/api.php?style=ty&skin=pitaya" frameborder="0" width="300" height="75" allowtransparency="true"></iframe> -->
    </div>

    <!-- 右上角时间 -->
    <div
      class="right-time"
      style="
        position: fixed;
        top: 0;
        margin-top: 10px;
        margin-right: 5px;
        right: 0;
        z-index: 999;
        width: 190px;
        height: 50px;
        color: #a8a5a5;
      "
    >
      <div style="height: 50px; width: 49%; float: right; font-size: 14px">
        <div>{{ nowweek }}</div>
        <div>{{ nowDate }}</div>
      </div>
      <div style="height: 50px; width: 45%; line-height: 47px; font-size: 20px">
        {{ nowtime }}
      </div>
    </div>
    <div style="height: 50px; width: 45%; line-height: 47px; font-size: 20px">
      {{ nowtime }}
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { EditorMap } from "@/utils/mapClass/map";
import {
  pipeData,
  tiaoyaxiang,
  famen,
  changzhan,
  jiankong,
  user,
} from "@/utils/mapClass/config.js";
import Line from "@/components/bigWindow/Line.vue";
import VideoView from "@/components/bigWindow/VideoView.vue";
import DeviceA from "@/components/bigWindow/DeviceA.vue";
import User from "@/components/bigWindow/User.vue";
import Center from "@/components/bigWindow/Center.vue";
import PipeColor from "@/components/bigWindow/PipeColor.vue";

// import markerInfoWindow from './components/markerInfoWindow.vue'
import leftBar from "@/components/bigWindow/leftBar.vue";
import rightBar from "@/components/bigWindow/rightBar.vue";
export default {
  name: "Home",
  components: {
    leftBar,
    rightBar,
    Center,
    PipeColor,
  },
  data() {
    return {
      map: null,
      show: false,
      centerData: null,
      selarr: [1, 2, 3],
      weather: "",
      lower: "",
      higher: "",
      nowDate: "",
      nowweek: "",
      nowtime: "", // 当前日期

      typeList: [
        {
          val: 1,
          name: "中燃祥科",
        },
        {
          val: 2,
          name: "中诚然气",
        },
        {
          val: 3,
          name: "中燃韵科",
        },
      ],
    };
  },
  watch: {
    selarr(newValue) {
      if (newValue.length == 3) {
        this.$refs.mychild.choice(0);
        this.$refs.mychild2.choice(0);
      }
    },
  },
  mounted() {
    this.map = new EditorMap(
      "map",
      {
        mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
        zoom: 14.5,
      },
      this
    );
    this.addPipeLine();
    this.addDevice(tiaoyaxiang, DeviceA);
    this.addDevice(famen, DeviceA);
    this.addDevice(changzhan, DeviceA);
    this.addDevice(user, User);
    this.addDevice(jiankong, VideoView);

    this.currentTime();
    this.$refs.mychild.choice(0);
    this.$refs.mychild2.choice(0);
  },
  methods: {
    addPipeLine() {
      for (let comp in pipeData) {
        pipeData[comp].forEach((pipe) => {
          this.map.addPipeLine(pipe, Line);
        });
      }
    },
    // 设备上图
    addDevice(data, component) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addDevice(pipe, component);
        });
      }
    },
    centerShow(boolean) {
      this.show = boolean;
    },
    centerDataFunc(centerData) {
      this.centerData = centerData;
      console.log(centerData);
      this.show = true;
    },

    allCompany() {
      if (this.selarr.length == 3) {
        this.selarr = [];
      } else {
        this.selarr = [1, 2, 3];
      }

      this.map.companyFilter(this.selarr);
      this.map.infowindowClose();
      this.show = false;
    },
    sel(index, item) {
      this.map.infowindowClose();
      this.show = false;
      const ind = this.selarr.indexOf(item.val);
      if (ind >= 0) {
        this.selarr.splice(ind, 1);
        if (item.val == 3) {
          this.$refs.mychild.choice(1);
          this.$refs.mychild2.choice(1);
        } else {
          this.$refs.mychild.choice(item.val + 1);
          this.$refs.mychild2.choice(item.val + 1);
        }
      } else {
        this.selarr.push(item.val);
        this.$refs.mychild.choice(item.val);
        this.$refs.mychild2.choice(item.val);
      }
      this.map.companyFilter(this.selarr);
    },
    currentTime() {
      setInterval(() => {
        this.formatDate();
      }, 1000);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowtime = `${hour}:${minute}:${second}`;
      this.nowweek = `${weekArr[week]}`;
      this.nowDate = `${year}/${month}/${day}`;
    },
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  position: relative;
  height: 100vh;
}
.goSystem {
  position: fixed;
  z-index: 9999;
  top: 20px;
  right: 210px;
  font-size: 18px;
  color: #18baff;
  cursor: pointer;
  &:hover {
    color: #1890ff;
  }
}
#map {
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 100%;
}
.banner-test {
  width: 100%;
  height: 85px;
  position: relative;
  top: 0;
  z-index: 999;
}
.banner-test img {
  width: 100%;
  height: 100%;
}

.leftbar {
  width: 450px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(20%, rgb(17 34 56 / 90%)),
    color-stop(80%, rgb(18 24 29))
  );
}
.rightbar {
  width: 450px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(20%, rgb(17 34 56 / 90%)),
    color-stop(80%, rgb(18 24 29))
  );
}
.home-div {
  width: 50%;
  height: 70px;
  position: fixed;
  bottom: 0;
  margin-left: 25%;
  z-index: 1000;
}
.listingsSty {
  /* height: 25px; */
  position: fixed;
  /* border: 1px solid #fff; */
  bottom: 0;
  margin-bottom: 10px;
  width: 30%;
  margin-left: 10%;
    // font-family: 'arialbd';
}
.firsty {
  width: 15%;
  height: 35px;
  text-align: center;
  line-height: 35px;
  /* border: 1px solid #fff; */
  color: #fff;
  font-size: 16px;
  float: left;
  margin-left: 8%;
  cursor: pointer;
  // font-family: 'arialbd';
}
.active {
  color: #2ee7e7;
  background: url(../../assets/mapinages/background.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 18px;

  /*position:relative;*/
  /*&::after{
    width: 80px;
    height: 50px;
    z-index: -1;
    content: " ";
    position: absolute;
    top: -7px;
    left: 50%;
    margin-left:-40px;
    background: url(/img/bac1.0ec28f27.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    color: aquamarine;
  }*/
}
.weather-icon {
  float: left;
  width: 30px !important;
  height: 30px !important;
  margin-top: 10px !important;
  margin-left: 10px !important;
  padding-right: 5px;
}
.tttt {
  background-image: -webkit-linear-gradient(
    bottom,
    rgb(134, 185, 233),
    #ffffff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
