Vue.component("ito-main-btn-menu", {
  template: `<div>
  <div v-if="type=='main'">
    <div class="container position-relative">
      <div
        class="py-3 mx-1 mx-md-0 row d-flex justify-content-between btn-main-box"
      >
        <div
          v-for="(item, index) in mainButtonList"
          :key="item.name"
          class="col-2"
          :style="item.style"
        >
          <div
            class="btn-main position-relative pointer"
            :class="'btn-main-'+index"
            @click="btnClick(index, $event, item.url, 'main')"

          >
            <div><img v-bind:src="'../assets/img/'+item.icon" />
              <div class="pt-2" :class="'green-underline-'+index" style="word-wrap: break-word;">
                {{item.name}}
              </div>
              <div
                v-show="index===0 || index===1"
                class="icon-plus-green"
                :class="'icon-plus-green-'+index"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-main-dropdown btn-main-0-dropdown py-3 px-3 mt-1">
        <div
          class="d-flex flex-wrap justify-content-start align-items-center"
        >
          <a
            v-for="(item, index) in mainButtonList[0].sub"
            :key="index"
            :href="item.url"
            class="col-md-2 text-center btn-menu btn-menu-h btn-green mx-3 my-1 d-flex align-items-center justify-content-center font-white"
            style="height: 6rem!important;"
            ><div>{{item.name}}</div></a
          >
        </div>
      </div>
      <div class="btn-main-dropdown btn-main-1-dropdown py-3 px-3 mt-1">
        <div
          class="d-flex flex-wrap justify-content-start align-items-center"
        >
          <a
            v-for="(item, index) in mainButtonList[1].sub"
            :key="index"
            :href="item.url"
            class="col-md-2 text-center btn-menu btn-menu-h btn-green mx-3 my-1 d-flex align-items-center justify-content-center font-white"
            style="height: 6rem!important;"
            ><div>{{item.name}}</div></a
          >
        </div>
      </div>
    </div>
  </div>
  <div v-else>
  <div class="d-block d-md-none container position-relative mt-md-5 btn-main-box-sp">
    <div
        class="py-3 mx-1 mx-md-0 row d-flex justify-content-between btn-main-box"
      >
        <div
          v-for="(item, index) in mainButtonList"
          :key="item.name"
          class="col-2"
          :style="item.style"
        >
          <div
            class="btn-main position-relative pointer"
            :class="'btn-main-'+index"
            @click="btnClick(index, $event, item.url)"
          >
            <div><img v-bind:src="'../assets/img/'+item.icon" />
              <div style="word-wrap: break-word;" class="pt-2" :class="'green-underline-'+index">
                {{item.name}}
              </div>
              <div
                v-show="index===0 || index===1"
                class="icon-plus-green"
                :class="'icon-plus-green-'+index"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-main-dropdown btn-main-0-dropdown py-3 px-3 mt-1">
        <div
          class="d-flex flex-wrap justify-content-start align-items-center"
        >
          <a
            v-for="(item, index) in mainButtonList[0].sub"
            :key="index"
            :href="'../'+item.url"
            class="col-md-2 text-center btn-menu btn-menu-h btn-green mx-3 my-1 d-flex align-items-center justify-content-center font-white"
            ><div>{{item.name}}</div></a
          >
        </div>
      </div>
      <div class="btn-main-dropdown btn-main-1-dropdown py-3 px-3 mt-1">
        <div
          class="d-flex flex-wrap justify-content-start align-items-center"
        >
          <a
            v-for="(item, index) in mainButtonList[1].sub"
            :key="index"
            :href="'../'+item.url"
            class="col-md-2 text-center btn-menu btn-menu-h btn-green mx-3 my-1 d-flex align-items-center justify-content-center font-white"
            ><div>{{item.name}}</div></a
          >
        </div>
      </div>
    </div>
  </div>
  <!-- overlay Menu (Mous Hover) -->
      <div class="btn-main-sp-overlay-menu">
        <div class="container">
          <a href="" class="closebtn" @click="closeClickNav()">&times;</a>
          <div class="btn-main-sp-overlay-content">
            <div
              class="btn-main-sp-overlay-menu-title pb-3 mx-5 font-22 fw-bold"
            >
              {{activeClickTitle}}
            </div>
            <div
              class="btn-main-sp-overlay-menu-list mt-3 px-4 d-flex flex-wrap 
                     justify-content-between align-items-center
                     iphone-se-font-13"
            >
            <div v-for="(item, index) in activeClickList"
                :key="index"
                class="col-6 px-1" >
              <a
                :href="type === 'main' ? item.url : '../'+item.url"
                class="my-1 py-1 px-0 d-flex align-items-center justify-content-center"
                style="height: 6rem!important;"
                ><div v-html="item.name"></div></a
              >
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- overlay Menu (Mous Hover) -->
</div>
`,
  props: ["type"],
  data() {
    return {
      windowWidth: window.innerWidth,
      activeClickTitle: "",
      activeClickList: [],

      mainButtonList: [
        {
          icon: "icon-main-01.png",
          name: "Thyroid and Parathyroid Disorders",
          // name: "甲状腺の病気",
          url: "02_thyroid_disease/01_kikkake.html",
          style: "margin-left: 1px;",
          sub: [
            {
              name: "When to seek medical care",
              url: "02_thyroid_disease/01_kikkake.html",
              //来院のきっかけ 
            },
            {
              name: "The Role of the Thyroid Gland",
              url: "./02_thyroid_disease/02_2function_of_thyroid.html",
              //甲状腺の役割
            },
            {
              name: "Disease Characteristics",
              url: "./02_thyroid_disease/02_1thyroid_diseases.html",
              //病気の特徴
            },
            {
              name: "Hashimoto’s disease",
              url: "./02_thyroid_disease/02_5_1about_hashimoto.html",
              //橋本病
            },
            {
              name: "Basedow’s Disease",
              url: "./02_thyroid_disease/02_4_1about_basedow.html",
              //バセドウ病
            },
            {
              name: "Thyroid Tumors",
              url: "02_thyroid_disease/02_7_1about_nodle.html",
              //甲状腺腫瘍
            },
            {
              name: "Subacute Thyroiditis",
              url: "02_thyroid_disease/02_6subacute_thyroiditis.html",
              //亜急性甲状腺炎
            },
            {
              name: "Simple Diffuse Goiter",
              url: "02_thyroid_disease/02_3diffuse_nontoxic_goiter.html",
            //単純性びまん性甲状腺腫
            },
            {
              name: "The Role and Diseases of the Parathyroid Glands",
              url: "02_thyroid_disease/03_1parathyroid.html",
              style: "font-size: 90%;"
              //副甲状腺の役割と病気
            },
           
          ],

        },
        {
          icon: "icon-main-02.png",
          name: "Consultation Information",
          // name: "外来受診のご案内"
          url: "05_guide/01_1outpatient_receipt.html",

          // url: "05_guide/01_1outpatient_receipt.html",
          sub: [
           
            {
              name: "Reception Hours & Clinic Days",
              url: "05_guide/01_1outpatient_receipt.html",
              //外来受付時間・診療日のご案内
            },
            {
              name: "Information about medical interpreting",
              url: "09_translate/translate.html",
              //医療通訳
            },
          ],
        },
        {
          icon: "icon-main-05.png",
          name: "Map & directions",
          url: "14_traffic_guide/traffic_guide.html",
        },
      ],
    };
  },

  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth;
    },
    btnClick(index, event, url, type) {
      console.log("click", index, event, url, type);
      if (index === 2 || index === 3 || index === 4) {
        if (type === "main") {
          window.location.href = url;
        } else {
          window.location.href = "../" + url;
        }
      }
      if (this.windowWidth <= 767) {
        if (index === 0) {
          event.target.classList.add("active");
          this.activeClickTitle = "Thyroid disease";
          this.activeClickList = this.mainButtonList[0].sub;
          this.openClickNav();
        } else if (index === 1) {
          event.target.classList.add("active");
          this.activeClickTitle = "Consultation Information";
          this.activeClickList = this.mainButtonList[1].sub;
          this.openClickNav();
        }
      }
    },
    openClickNav() {
      document.querySelector(".btn-main-sp-overlay-menu").style.display =
        "block";
    },
    closeClickNav() {
      document.querySelector(".btn-main-sp-overlay-menu").style.dislpay =
        "none";
    },
  },
  created() {
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  },
  destroyed() {
    window.removeEventListener("resize", this.handleResize);
  },
  mounted() {
    this.$nextTick(() => {
      if (this.windowWidth > 767) {
        var hoverBtn3 = document.querySelector(".btn-main-0");
        var hoverBtn4 = document.querySelector(".btn-main-1");

        hoverBtn3.addEventListener(
          "mouseenter",
          function (event) {
            handler("3", event);
          },
          false
        );
        hoverBtn3.addEventListener("mouseleave", function (event) {
          setTimeout(() => {
            remover("3", event);
          }, 100);
        });
        hoverBtn4.addEventListener(
          "mouseenter",
          function (event) {
            handler("4", event);
          },
          false
        );
        hoverBtn4.addEventListener("mouseleave", function (event) {
          setTimeout(() => {
            remover("4", event);
          }, 100);
        });

        function handler(type, event) {
          if (window.innerWidth <= 767) {
            return;
          }

          let dropdown;
          let valueCheck = {
            3: ".btn-main-0-dropdown",
            4: ".btn-main-1-dropdown",
          };
          dropdown = document.querySelector(valueCheck[type]);
          dropdown.classList.add("d-block");
          event.target.classList.add("active");
          dropdown.addEventListener("mouseenter", function (e) {
            e.target.classList.add("d-block", "active");
            event.target.classList.add("active");
          });
          dropdown.addEventListener("mouseleave", function (e) {
            e.target.classList.remove("d-block", "active");
            event.target.classList.remove("active");
          });
        }

        function remover(type, event) {
          let dropdown;
          let valueCheck = {
            3: ".btn-main-0-dropdown",
            4: ".btn-main-1-dropdown",
          };
          dropdown = document.querySelector(valueCheck[type]);
          if (dropdown.classList.contains("active") == false) {
            dropdown.classList.remove("d-block");
            event.target.classList.remove("active");
          }
        }
      }
    });
  },
  watch: {
    windowWidth: function (val) {
      if (val > 767) {
        var hoverBtn3 = document.querySelector(".btn-main-0");
        var hoverBtn4 = document.querySelector(".btn-main-1");

        hoverBtn3.addEventListener(
          "mouseenter",
          function (event) {
            handler("3", event);
          },
          false
        );
        hoverBtn3.addEventListener("mouseleave", function (event) {
          setTimeout(() => {
            remover("3", event);
          }, 100);
        });
        hoverBtn4.addEventListener(
          "mouseenter",
          function (event) {
            handler("4", event);
          },
          false
        );
        hoverBtn4.addEventListener("mouseleave", function (event) {
          setTimeout(() => {
            remover("4", event);
          }, 100);
        });

        function handler(type, event) {
          if (window.innerWidth <= 767) {
            return;
          }

          let dropdown;
          let valueCheck = {
            3: ".btn-main-0-dropdown",
            4: ".btn-main-1-dropdown",
          };
          dropdown = document.querySelector(valueCheck[type]);
          dropdown.classList.add("d-block");
          event.target.classList.add("active");
          dropdown.addEventListener("mouseenter", function (e) {
            e.target.classList.add("d-block", "active");
            event.target.classList.add("active");
          });
          dropdown.addEventListener("mouseleave", function (e) {
            e.target.classList.remove("d-block", "active");
            event.target.classList.remove("active");
          });
        }

        function remover(type, event) {
          let dropdown;
          let valueCheck = {
            3: ".btn-main-0-dropdown",
            4: ".btn-main-1-dropdown",
          };
          dropdown = document.querySelector(valueCheck[type]);
          if (dropdown.classList.contains("active") == false) {
            dropdown.classList.remove("d-block");
            event.target.classList.remove("active");
          }
        }
      }
    },
  },
});