<template>
  <header class="flex-between">
    <div class="flex-between2">
      <ul
        class="submenu contenedor-menu2"
        :class="{ 'show-menu ': showSubmenu }"
      >
        <li
          v-for="(item, index) in menuItems"
          :key="index"
          style="color: #3fb52d"
        >
          <span @click="toggleSubMenu(index)">
            {{ item.title }}
            <i
              :class="{
                'fa fa-chevron-down': item.open,
                'fa fa-chevron-up': !item.open,
              }"
            ></i>
          </span>
          <ul v-if="item.open">
            <li
              v-for="(subItem, subIndex) in item.subMenu"
              :key="subIndex"
              style="color: #333"
            >
              <router-link :to="subItem.route">
                {{ subItem.title }}</router-link
              >
            </li>
          </ul>
        </li>
        <!-- <li style="color: #3fb52d">
          <router-link to="/Mypage.page"> 마이페이지 </router-link>
        </li> -->
        <li style="color: #3fb52d">
          <router-link to="/Login.page"> 로그인 </router-link>
        </li>
      </ul>
    </div>
    <div class="logo flex">
      <input type="checkbox" id="menuicon" @click="toggleSubmenu()" />
      <label class="menu-icon" for="menuicon">
        <img :src="imageSrc" alt="Image" @click="toggle()" />
        <!-- <span></span>
      <span></span>
      <span></span> -->
      </label>
      <router-link to="/">
        <span class="logotxt"> AI 안전통합 횡단보도 플랫폼 </span>
      </router-link>
    </div>
    <div class="header_menu">
      <nav class="flex gap" v-show="store.state.loginUser != null">
        <router-link to="/Introduction.page">
          <span
            @mouseover="showDropdown = true"
            @mouseleave="showDropdown = false"
            >플랫폼 소개
          </span>
        </router-link>
        <div
          class="nav"
          v-show="showDropdown"
          @mouseover="showDropdown = true"
          @mouseleave="showDropdown = false"
        >
          <div class="menu flex-end gap">
            <ul>
              <li
                v-for="option in dropdownOptions"
                :key="option.value"
              >
                <router-link :to="option.route">{{ option.label }}</router-link>
              </li>
            </ul>
            <ul>
              <li
                v-for="option in dropdownOptions2"
                :key="option.value"
              >
                <router-link :to="option.route">{{ option.label }}</router-link>
              </li>
            </ul>
            <ul>
              <li
                v-for="option in dropdownOptions5"
                :key="option.value"
              >
                <router-link :to="option.route">{{ option.label }}</router-link>
              </li>
            </ul>
            <ul>
              <li
                v-for="option in dropdownOptions3"
                :key="option.value"
              >
                <router-link :to="option.route">{{ option.label }}</router-link>
              </li>
            </ul>
            <ul>
              <li
                v-for="option in dropdownOptions4"
                :key="option.value"
                @click="navigateToPage(option)"
              >
                <router-link :to="option.route">{{ option.label }}</router-link>
              </li>
            </ul>
          </div>
        </div>

        <router-link to="/RealtimeStatus.page">
          <span
            @mouseover="showDropdown = true"
            @mouseleave="showDropdown = false"
            >현황관제</span
          >
        </router-link>
        <router-link to="/Analysis.page">
          <span
            @mouseover="showDropdown = true"
            @mouseleave="showDropdown = false"
            >통계분석
          </span>
        </router-link>
        <router-link to="/CrosswalkInsert.page">
          <span
            @mouseover="showDropdown = true"
            @mouseleave="showDropdown = false"
            >횡단보도 관리</span
          >
        </router-link>
        <router-link to="/UserManagement.page">
          <span
            @mouseover="showDropdown = true"
            @mouseleave="showDropdown = false"
            >시스템 관리</span
          >
        </router-link>
      </nav>
      <div class="sub_menu">
        <router-link to="/Mypage.page">
          <span v-show="store.state.loginUser != null">마이페이지</span>
        </router-link>
        <!--
        <router-link to="/Login.page">
          <span v-show="store.state.loginUser == null">로그인</span>
        </router-link>
        -->
        <div
          class="logout-btn s-btn"
          @click="logout"
          v-show="store.state.loginUser != null"
        >
          로그아웃
        </div>
      </div>
    </div>
  </header>

  <!-- 가로 467px 일때 실행되는 template 평소엔 display:none -->

  <!-- <div class="submenu" v-show="showSubmenu">/// -->
  <!-- <ul class="submenu" >
      <li>
        <router-link to="/Introduction.page">
            <a href="#">플랫폼 소개<i class="fa fa-chevron-down"></i></a>
          </router-link>
          <ul>
            <li>스마트 횡단보도란?</li>
          </ul>
        </li>
        <li>
          <router-link to="/Analysis.page">
            <a href="#">현황관제<i class="fa fa-chevron-down"></i></a>
          </router-link>
          <ul>
            <li>실시간 현황관제</li>
            <li>상황발생 정보조회</li>
            <li>장애 발생 정보조회</li>
            <li>횡단보도 목록조회</li>
          </ul>
        </li>
        <li>
          <router-link to="/Analysis.page">
            <a href="#">통계분석<i class="fa fa-chevron-down"></i></a>
          </router-link>
          <ul>
            <li>통계분석</li>
          </ul>
        </li>
        <li>
          <router-link to="/CrosswalkInsert.page">
            <a href="#">횡단보도 관리<i class="fa fa-chevron-down"></i></a>
          </router-link>
          <ul>
            <li>횡단보도 등록</li>
            <li>횡단보도 조회</li>
          </ul>
        </li>
        <li>
          <router-link to="/UserManagement.page">
            <a href="#">시스템 관리<i class="fa fa-chevron-down"></i></a>
          </router-link>
          <ul>
            <li>사용자 관리</li>
            <li>유지보수 담당자 관리</li>
            <li>표준노드 관리</li>
            <li>행정동 관리</li>
            <li>데이터 수집기록</li>
          </ul>
        </li>
        <li>
          <router-link to="/Mypage.page"> 마이페이지 </router-link>
        </li>
        <li>
          <router-link to="/Login.page">
            <a href="#">로그인</a>
          </router-link>
        </li>
      </ul> -->
</template>

<script>
// import test from "./sidebar-accordion";
const Menu = require("./Menu");
import { useStore } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      imageSrc:
        "https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5",
      menuOpen: false,
      showDropdown: false,
      showSubmenu: false,
      dropdownOptions: [
        {
          label: "스마트 횡단보도란?",
          value: "Introduction",
          route: "/Introduction.page",
        },
        // { label: '매뉴얼 다운로드', value: 'ManualDown', route: '/ManualDown.page' },
      ],
      selectedOption: null,
      dropdownOptions2: [
        {
          label: "실시간 현황 관제",
          value: "RealtimeStatus",
          route: "/RealtimeStatus.page",
        },
        {
          label: "상황발생 정보 조회",
          value: "SituationSearch",
          route: "/SituationSearch.page",
        },
        {
          label: "장애발생 정보 조회",
          value: "ErrorSearch",
          route: "/ErrorSearch.page",
        },
        {
          label: "횡단보도 목록 조회",
          value: "CrosswalkListSearch",
          route: "/CrosswalkListSearch.page",
        },
      ],
      selectedOption2: null,
      dropdownOptions3: [
        {
          label: "횡단보도 등록",
          value: "CrosswalkInsert",
          route: "/CrosswalkInsert.page",
        },
        {
          label: "횡단보도 조회",
          value: "CrosswalkSearch",
          route: "/CrosswalkSearch.page",
        },
      ],
      selectedOption3: null,
      dropdownOptions4: [
        {
          label: "사용자 관리",
          value: "UserManagement",
          route: "/UserManagement.page",
        },
        {
          label: "유지보수담당자 관리",
          value: "ChargeManagement",
          route: "/ChargeManagement.page",
        },
        {
          label: "표준노드 관리",
          value: "NodeManagement",
          route: "/NodeManagement.page",
        },
        // {
        //   label: "행정동 관리",
        //   value: "DongManagement",
        //   route: "/DongManagement.page",
        // },
        {
          label: "데이터 수집 기록",
          value: "DataRecord",
          route: "/DataRecord.page",
        },
      ],
      selectedOption4: null,
      dropdownOptions5: [
        { label: "통계분석", value: "Analysis", route: "/Analysis.page" },
      ],
      selectedOption5: null,
      menuItems: [
        {
          title: "플랫폼 소개",
          open: false,
          subMenu: [
            { title: "스마트 횡단보도란?", route: "/Introduction.page" },
          ],
        },
        {
          title: "현황관제",
          open: false,
          subMenu: [
            { title: "실시간 현황관제", route: "/RealtimeStatus.page" },
            { title: "상황발생 정보조회", route: "/SituationSearch.page" },
            { title: "장애 발생 정보조회", route: "/ErrorSearch.page" },
            { title: "횡단보도 목록조회", route: "/CrosswalkListSearch.page" },
          ],
        },
        {
          title: "통계분석",
          open: false,
          subMenu: [{ title: "통계분석", route: "/Analysis.page" }],
        },
        {
          title: "횡단보도 관리",
          open: false,
          subMenu: [
            { title: "횡단보도 등록", route: "/CrosswalkInsert.page" },
            { title: "횡단보도 조회", route: "/CrosswalkSearch.page" },
          ],
        },
        {
          title: "시스템 관리",
          open: false,
          subMenu: [
            { title: "사용자 관리", route: "/UserManagement.page" },
            { title: "유지보수 담당자 관리", route: "/ChargeManagement.page" },
            { title: "표준노드 관리", route: "/NodeManagement.page" },
            // { title: "행정동 관리", route: "/DongManagement.page" },
            { title: "데이터 수집기록", route: "/DataRecord.page" },
          ],
        },
        // {
        //   title: "마이페이지",
        //   open: false,
        //   route: "/Mypage.page"
        // },
        // {
        //   title: "로그인",
        //   open: false,
        //   subMenu: [{ title: "로그인", route: "/Login.page" },],
        // },
      ],
      store: useStore(),
    };
  },
  methods: {
    //로그아웃
    logout: function () {
      if (confirm("로그아웃 하시겠습니까?") == false) {
        return;
      }
      let vm = this;
      axios({
        url: "/user/logout.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
      })
        .then(function (response) {
          // console.log("logout - response : ", response);
          vm.$router.push({ path: "/Login.page", query: {} });
        })
        .catch(function (error) {
          console.log("logout - error : ", error);
        });
    },

    toggleSubMenu(index) {
      this.menuItems[index].open = !this.menuItems[index].open;
      this.showSubmenu = true;
      console.log("toggleSubMenu 호출됨");
    },
    toggle() {
      if (
        this.imageSrc ===
        "https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5"
      ) {
        this.imageSrc =
          "https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/close2.png?alt=media&token=801544fa-80dd-4dc5-98c2-099a2fdb7791";
      } else {
        this.imageSrc =
          "https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5";
      }
    },
    toggleSubmenu: function () {
      this.showSubmenu = !this.showSubmenu;
    },

    toggleDropdown() {
      this.showDropdown = !this.showDropdown;
      // this.menuOpen = !this.menu;
    },
    selectOption(option) {
      this.selectedOption = option;
      this.showDropdown = false;
    },
    toggleDropdown2() {
      this.showDropdown2 = !this.showDropdown2;
    },
    selectOption2(option) {
      this.selectedOption2 = option;
      this.showDropdown2 = false;
    },
    toggleDropdown3() {
      this.showDropdown3 = !this.showDropdown3;
    },
    selectOption3(option) {
      this.selectedOption3 = option;
      this.showDropdown3 = false;
    },
    toggleDropdown4() {
      this.showDropdown4 = !this.showDropdown4;
    },
    selectOption4(option) {
      this.selectedOption4 = option;
      this.showDropdown4 = false;
    },
  },
};
</script>

<style scoped>
.menu-icon {
  display: none;
}
header {
  position: relative;
}
nav {
  position: relative;
}
nav a {
  width: 16rem;
  text-align: center;
}
nav span {
  padding: 2.7rem 0;
  /* border: 1px solid blue; */
}
.nav {
  position: absolute;
  left: 0;
  top: 47px;
  z-index: 500;
  width: -webkit-fill-available;
  box-sizing: border-box;
  /* padding: 50em 50em 50em 50em !important; */
  /* padding-left: 50em !important; */
  height: 14rem;
  /* background-color: white; */
}
.menu {
  position: absolute;
  left: 0;
  /* top: -1.6rem; */
  z-index: 500;
  width: fit-content;
  /* border: 1px solid red; */
  /* padding: 1rem 25.5rem 1rem 1rem; */
  text-align: center;
  background-color: rgba(255, 255, 255, 0.86);
  padding: 1em 50em 2em 100em;
  transform: translateX(-100em);
  border-bottom: 1px solid #b0afaf;
}
.menu li:hover {
  background: #13833b;
}
.menu li:hover a {
  color: #fff;
}

ul {
  width: 16rem;
}
li a {
  color: #7e7e7f;
}
.logotxt {
  transition: 0.3s;
  color: #ffffff;
  font-size: 23px;
}

.logotxt:hover {
  transition: 0.3s;
  color: #fff200;
}
.logoimg {
  display: none;
}

.header_menu {
  transition: 0.3s;
  color: #ffffff;
  font-size: 16px;
  display: flex;
  gap: 10rem;
  align-items: center;
  align-content: center;
  justify-content: center;
  /* width: 45%; */
  
}

.header_menu span:hover {
  transition: 0.3s;
  color: #fff200;
}

.sub_menu {
  color: #ffffff81;
  font-size: 14px;
  gap: 3rem;
  display: flex;
  left: 70%;
  align-items: center;
  width: 40%;
}
.sub_menu a{width: max-content;}
input[id="menuicon"] {
  display: none;
}
.flex-between2 {
  display: none;
}

@media (max-width: 749px) {
  .logo {
    align-items: unset;
    padding-top: 2rem;
    gap: 1rem;
  }
  .menu-icon img {
    width: 3rem;
  }
  .logotxt {
    text-align: center;
    /* width: 100vw;
    position: absolute; */
    left: 0%;
    top: 22%;
    font-size: 2rem;
  }
  input#menuicon {
    display: none;
  }
  input#menuicon + label {
    display: block;
    /* width: 30px; */
    height: 40px;
    /* position: absolute; */
    left: 2%;
    top: 25px;
    cursor: pointer;
  }
  input#menuicon + label span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 30px;
    background: #ffffff;
    transition: all 0.35s;
  }
  input#menuicon + label span:nth-child(1) {
    top: 0;
  }
  input#menuicon + label span:nth-child(2) {
    top: 20%;
    transform: translateY(-60%);
  }
  input#menuicon + label span:nth-child(3) {
    bottom: 60%;
  }

  input#menuicon:checked + label span:nth-child(1) {
    top: 20%;
    transform: rotate(50deg);
  }
  input#menuicon:checked + label span:nth-child(2) {
    opacity: 0;
  }
  input#menuicon:checked + label span:nth-child(3) {
    bottom: 79%;
    transform: rotate(-50deg);
  }

  .flex-between2 {
    /* width: 100vw; */
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 40000;
    display: none;
  }

  body {
    font-family: "Montserrat", sans-serif;
  }

  a {
    text-decoration: none;
  }

  .btnMenu {
    display: none;
    padding: 20px;
    display: block;
    background: #1abc9c;
    color: #fff;
  }

  .btnMenu i.fa {
    float: right;
  }

  .contenedor-menu2 {
    display: none;
    position: absolute;
    top: 100%;
    left: -21px;
    /* padding-left: 3rem; */
    background-color: #fff;
    z-index: 999;
    min-width: 329px;
    margin-top: 70px;
    /* display: inline-block; */
    /* /background: #fff; */
    font-size: 20px;
    /* height: 700px; */
    /* margin: 0 auto; */
    /* text-align: center; */
    /* border: 1px solid red; */
    line-height: 18px;
    cursor: pointer;
  }

  .show-menu {
    display: block;
    padding: 1rem;
  }

  .contenedor-menu2 li {
    width: -webkit-fill-available;
    text-align: left;
    /* margin-top: 20px; */
    padding: 1rem 2rem;
    /* margin-bottom: 20px;

    /* border: 1px solid green; */
  }
  .contenedor-menu2 li ul {
    margin-top: 1rem;
  }
  /* .contenedor-menu2 li ul li{padding: 2rem 1rem 1rem 1rem;} */
  .contenedor-menu2 a {
    width: 100vw;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
    /* border: 1px solid green; */
  }
  .sub_menu {
    width: 100vw;
    background: #fff;
    height: 700px;
  }
  .contenedor-menu2 .menu2 {
    width: 100%;
  }

  .contenedor-menu2 ul {
    list-style: none;
    width: -webkit-fill-available;
  }

  .contenedor-menu2 .menu2 li a {
    color: #494949;
    display: block;
    border: 1px solid red;
    padding: 15px 0px;
    text-align: center;
    background: #e9e9e9;
    font-size: 25px;
  }
  .contenedor-menu2 .menu2 li a:hover {
    background: #16a085;
    color: #fff;
  }
  .contenedor-menu2 .menu2 i.fa {
    font-size: 12px;
    line-height: 18px;
    float: right;
    margin-left: 10px;
  }

  .contenedor-menu2 .menu2 ul {
    display: none;
  }
  .contenedor-menu2 .menu2 ul li a {
    background: #424242;
    color: #e9e9e9;
  }

  .contenedor-menu2 .menu2 .activado > a {
    background: #16a085;
    color: #fff;
  }

  body {
    font-family: "Montserrat", sans-serif;
  }

  a {
    text-decoration: none;
  }

  .header_menu {
    display: none;
  }
  .flex-between2 {
    display: block;
  }
}
</style>
