<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from "vue-router";
let caselist = ref<any>([
  {
    detail: {
      title: 'Hotel FFE', position: 'Hotel FFE', name: 0
    }
  },
  {
    detail: {
      title: 'Doors', position: 'Door', name: 1
    }
  },
  {
    detail: {
      title: 'Windows', position: 'Window', name: 2
    }
  },
  {
    detail: {
      title: 'Railings&stairs', position: 'Railings&stairs', name: 3
    }
  },
  {
    detail: {
      title: 'Building Materials', position: 'Building Materials', name: 4
    }
  },
  {
    detail: {
      title: 'Kitchen Faucets/Sinks/Cabinets', position: 'Kitchen Faucets/Sinks/Cabinets', name: 5
    }
  },
  {
    detail: {
      title: 'Sanitary Ware', position: 'Sanitary Ware', name: 6
    }
  }
])

let productListArr = ref<any>([])
let projectlist = ref<any>([])
let screenWidth = ref<any>(0)
let clickStatus = ref<any>(false)
let scrollTopShow = ref<any>(true)
const router = useRouter()
onMounted(async () => {
  // let data={
  //   groupId:4
  // }
  // let res = await getDataApi(data)
  // if(res){
  //   res.map((li:any) => {
  //     li.detail = JSON.parse(li.detail);
  //     li.detail.pptsrc = userStore.globalUrl + "/" + li.detail.pptsrc;
  //     caselist.value.push(li)
  //   });
  // }
  screenWidth.value = document.body.offsetWidth;
  await getProduct()
  window.addEventListener('resize', function () {
    screenWidth.value = document.body.offsetWidth;
  })
  window.addEventListener("scroll", windowScrollListener, true)
})
// 监视滚动条
const windowScrollListener = () => {
  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollTop === 0) {
    scrollTopShow.value = true
  } else {
    scrollTopShow.value = false
  }
}
const goPage1 = (url: any, index: any) => {
  document.documentElement.scrollTop = 0
  clickStatus.value = false
  router.push({
    path: url,
    query: {
      index: index
    }
  })
}
// 跳转页面
const goPage = (url: any) => {
  document.documentElement.scrollTop = 0
  clickStatus.value = false
  router.push(url)
}
// 定位
const goto = (idname: any) => {
  document.getElementById(idname)?.scrollIntoView()
}
const mobheadFun = async () => {
  clickStatus.value = !clickStatus.value
}
const getProduct = async () => {
  productListArr.value = [
    [{ type: 'Design', position: 'Design' }],
    [{ type: 'After -sale Service', position: 'AsS' }],
    [{ type: 'Manufacture', position: 'Manufacture' }],
    [{ type: 'Installation', position: 'Installaion' }],
    [{ type: 'Quality', position: 'Quality' }],
    [{ type: 'Logistics', position: 'Logistics' }]
  ]
  projectlist.value = [
    { title: 'Fairmont Empress Hotel', position: 'FEH' },
    { title: 'Monsaraz Hilton', position: 'MH' },
    { title: 'Canopy By Hilton San Francisco Soma Hotel', position: 'CBHSFSH' },
    { title: 'Lofts on Laurel', position: 'LL' },
    { title: 'State&Oak Street', position: 'SOS' },
    { title: '989 Johson Street', position: '989JS' },
    { title: 'Tarrace Lofts', position: 'TL' },
    { title: 'Ocean 17', position: 'Ocean' }
  ]
}
</script>

<template>
  <div class="position-relative headerpage">
    <div class="navbar pb-4-px" :class="scrollTopShow ? 'bg-white' : 'bg-white'" v-if="screenWidth > 1200">
      <div class="navbar-container">
        <div class="navbar-header">
          <div class="navbar-brand">
            <router-link to="/" class="text-center">
              <div class="navbar-brand-logo" :class="scrollTopShow ? 'white-img' : 'black-img'"></div>
              <!--              <p :class="scrollTopShow?'color-000':'color-0167b1'" class="font-size-20">锁到之处  即小见大</p>-->
            </router-link>
          </div>
        </div>
        <div class="site-header-navbar d-flex justify-content-between">
          <div class="navbar-left width-5"></div>
          <div class="navbar-category">
            <div class="category-item font-size-18 position-relative">
              <div class="nav-item-title px-1 d-flex align-items-center"
                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goPage('/')">Home</div>
              <div class="dui-dropdown-men position-absolute">
                <div class="menu-container mt-1">

                </div>
              </div>
            </div>
            <div class="category-item ml-3 font-size-14 position-relative">
              <div class="nav-item-title d-flex px-1 align-items-center"
                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goPage('/productcenter')">Product Center</div>
              <div class="dui-dropdown-men position-absolute">
                <div class="menu-container mt-1">
                  <ul>
                    <li class="nav-item text-center" v-for="(item, index) in caselist" :key="index"
                      @click="goPage(`/productcenter/${item.detail.name}`)">
                      <div>
                        <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item.detail.title">{{
                          item.detail.title }}</div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="category-item ml-3 font-size-14 position-relative">
              <div class="nav-item-title d-flex px-1 align-items-center"
                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goto('service')">Service</div>
              <div class="dui-dropdown-men position-absolute">
                <div class="menu-container mt-1">
                  <ul>
                    <li class="nav-item text-center" v-for="(item, index) in productListArr" :key="index">
                      <div @click="goPage1('/service', index)">
                        <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item[0].type">{{ item[0].type
                        }}</div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="category-item ml-3 font-size-14 position-relative">
              <div class="nav-item-title px-1 d-flex align-items-center"
                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goPage('/projectcase')">Project Cases</div>
              <div class="dui-dropdown-men position-absolute">
                <div class="menu-container mt-1">
                  <ul>
                    <li class="nav-item text-center" v-for="(item, index) in projectlist" :key="index">
                      <div>
                        <div class="nav-item-link px-16-px text-overflow-ellipsis"
                          @click="goPage(`/projectcase/${index}`)">{{ item.title }}</div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="category-item ml-3 font-size-14 position-relative">
              <div class="nav-item-title px-1 d-flex align-items-center"
                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goPage('/news/all')">News</div>
              <div class="dui-dropdown-men position-absolute">
                <div class="menu-container mt-1">

                </div>
              </div>
            </div>
            <div class="category-item ml-3 font-size-14 position-relative">
              <router-link to="/contactUs" class="nav-item-title px-1 d-flex align-items-center"
                :class="scrollTopShow ? 'color-000' : 'color-000'">Contact Us</router-link>
              <div class="dui-dropdown-men position-absolute">
                <div class="menu-container mt-1">

                </div>
              </div>
            </div>
          </div>
          <div class="navbar-right width-10"></div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="MobileHead">
        <div class="logoimg text-center position-absolute" @click="goPage('/')"><img src="../assets/img/logo.png"
            alt="MONTIERI" class="width-100"></div>
        <div class="position-absolute menuIcon color-8c8fa4"><img src="../assets/img/menu.svg" alt="menu" class="width-15"
            @click="mobheadFun" v-if="!clickStatus" /><img src="../assets/img/close.svg" class="width-15" alt="closemenu"
            @click="mobheadFun" v-else></div>
        <div class="mobmenu" :class="clickStatus ? 'mobmenu1' : ''">
          <el-menu default-active="0" class="el-menu-vertical-demo">
            <el-menu-item index="0" @click="goPage('/')">
              <span>Home</span>
            </el-menu-item>
            <el-sub-menu index="1">
              <template #title>
                <span>Product Center</span>
              </template>
              <el-menu-item :index="'1-' + index" v-for="(item, index) in caselist" :key="index"
                @click="goPage(`/productcenter/${item.detail.position}`)">
                {{ item.detail.title }}
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <span>Service</span>
              </template>
              <el-menu-item :index="'2-' + index" v-for="(item, index) in productListArr"
                @click="goPage1('/service', index)" :key="index">{{ item[0].type }}</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <span>Project Case</span>
              </template>
              <el-menu-item :index="'3-' + index + 1" v-for="item, index in projectlist" :key="index"
                @click="goPage(`/projectcase/${index}`)">
                <span>{{ item.title }}</span>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="4" @click="goPage('/news/all')">
              <template #title>
                <span>News</span>
              </template>
            </el-menu-item>
            <el-menu-item index="5" @click="goPage('/contactUs')">
              <template #title>
                <span>Contact Us</span>
              </template>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.headerpage {
  margin-bottom: 4rem;
}

.navbar {
  box-shadow: 1px 5px 5px #eee;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  //height: 55px;
  border: 0;
  margin: auto;
  -webkit-font-smoothing: antialiased;
  // font-smoothing: antialiased;
  z-index: 1001;
  box-sizing: border-box;
  //box-shadow: 0 0 12px rgba(0,0,0,0.12);
}

.navbar-container {
  width: 100%;
  padding: 0 40px;
  /* max-width: 1200px; */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.48s;
  box-sizing: border-box;
}

.navbar-header {
  float: none;
  width: 215px;
}

.navbar-brand {
  display: inline-block;
  // float: left;
  height: auto;
}

.navbar-brand-logo {
  transition: backgroundImage .3s ease;
  vertical-align: middle;
  display: inline-block;
  width: 530px;
  height: 40px;
  background-size: 100% 100%;
}

.black-img {
  background: url("../assets/img/logo1.png") no-repeat;
  background-size: 45% auto;
  background-position: center;
}

.white-img {
  background: url("../assets/img/logo1.png") no-repeat;
  background-size: 45% auto;
  background-position: center;
}

.site-header-navbar {
  width: calc(100% - 165px);
  box-sizing: border-box;
}

.navbar-category {
  list-style: none;
  vertical-align: middle;
  display: flex;
  transition: all 0.5s;
}

.nav-item-title {
  transition: all .3s;
  vertical-align: middle;
  line-height: 60px;
  font-weight: normal;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  -moz-justify-content: center;
  justify-content: center;
  word-spacing: 0;
  height: 60px;
}

.nav-item-title::after {
  transition: all .3s ease;
  content: '';
  display: inline-block;
  position: absolute;
  bottom: 0;
  z-index: 1200;
  width: 100%;
  left: 0;
  height: 2px;
  background-color: rgba(0, 0, 0, .85);
  opacity: 0;
}

.menu-container {
  top: 55px;
}

.dui-dropdown-men {
  top: 55px;
  opacity: 0;
  transition: all .5s;
  left: 50%;
  transform: translate(-50%, -16px);
  height: 0;
  overflow: hidden;
}

.category-item:hover .dui-dropdown-men {
  opacity: 1;
  height: auto;
  z-index: 9998;
  transform: translate(-50%, 0);
}

.category-item:hover .nav-item-title::after {
  opacity: 1;
}

.menu-container ul {
  position: relative;
  overflow: visible;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  align-content: stretch;
  vertical-align: middle;
  margin: 0;
  list-style: none;
  background: #fff;
  color: rgba(0, 0, 0, .65);
  white-space: nowrap;
  -ms-box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
  -o-box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
  box-shadow: 0 8px 16px rgb(0 0 0 / 10%);
  -moz-align-items: stretch;
  align-items: stretch;
  padding: 8px 0;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}

.nav-item-link {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  color: rgba(0, 0, 0, .65);
}

.nav-item-link:hover {
  background: rgba(0, 0, 0, .04);
  text-decoration: none;
}



.MobileHead {
  width: 100%;
  position: fixed;
  background: #808080;
  top: 0;
  left: 0;
  padding: 0.625rem 1.25rem;
  box-shadow: 1px 1px 10px #eee;
  z-index: 999;
  height: 50px;
  box-sizing: border-box;

  .logoimg {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .menuIcon {
    left: 20px;
    top: 50%;
    transform: translate(0, -50%);
  }

  .leftimg {
    width: 50%;

    img {
      width: 11.25rem;
    }
  }

  .rightHead {
    .lbimg {
      width: 2.5rem;

      img {
        width: 100%;
      }
    }
  }

  .mobmenu {
    position: fixed;
    top: 3.8125rem;
    left: 0;
    width: 100%;
    top: 50px;
    background: #fff;
    text-align: left;
    overflow-y: auto;
    height: 0;
    box-sizing: border-box;
    transition: all .5s;
  }

  .mobmenu1 {
    height: 100%;

    span {
      color: #333;
    }
  }
}

@media screen and (max-width: 1900px) {
  .navbar-brand-logo {
    width: 480px;
  }
}

@media screen and (max-width: 1400px) {
  .navbar-brand-logo {
    width: 360px;
  }
}</style>
