<!--  -->
<template>
  <div class="header">
    <div class="main-nav-container">
      <div class="main-nav">
        <div class="nav-left">
          <div class="nav-logo">
            <img src="@/assets/images/logo-en.png" alt="logo" />
          </div>
          <template v-if="route.path == '/'">
            <span class="nav-border"></span>
            <div class="nav-city">
              <n-dropdown
                trigger="click"
                :options="options"
                :show-arrow="true"
                @select="handleSelect"
              >
                <div class="s-city">Zhuhai</div>
              </n-dropdown>
            </div></template
          >
        </div>
        <div class="nav-right" v-if="route.path == '/'">
          <div class="search-wrapper">
            <n-input round placeholder="please enter the property name" v-model:value="iptVal">
            </n-input>
          </div>
          <n-button tertiary round @click="handleSearch">Search</n-button>
        </div>
      </div>
      <div v-if="route.path == '/'" class="main-tab">
        <div @click="handleAll" class="tab-item" :class="{ active: !isSearch }">
          All Properties
        </div>
        <!-- <div class="tab-item">近期楼盘</div>
        <div class="tab-item">优惠楼盘</div> -->
      </div>
      <!-- <div class="main-tab"><span>珠海</span>><span>详情</span></div> -->
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  toRefs,
  onBeforeMount,
  onMounted,
  nextTick,
  watch,
  defineEmits,
  defineProps,
} from "vue";
import { useRoute } from "vue-router";
const emits = defineEmits(["close", "search"]);
const route = useRoute();
const iptVal = ref("");
const isSearch = ref(false);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  path: {
    type: String,
    default: "",
  },
  isClose: {
    type: Boolean,
    default: false,
  },
  // isBack: {
  //   type: Boolean,
  //   default: false,
  // },
});

const handleSearch = () => {
  emits("search", iptVal.value);
  isSearch.value = true;
};
const handleAll = () => {
  emits("search", "all");
  isSearch.value = false;
};

const handleSelect = (key) => {
  console.log(key);
};
const options = ref([
  {
    label: "Zhuhai",
    key: "marina bay sands",
    disabled: true,
  },
  // {
  //   label: "中山",
  //   key: "brown's hotel, london",
  // },
]);
onMounted(() => {});
</script>
<style lang="scss" scoped>
.header {
  .main-nav-container {
    margin-bottom: 20px;
    background: #f5f5f6;
    box-shadow: 0 1px 0 0 #eee;
    border-top: 1px solid #eee;
    padding-bottom: 4px;
    .main-nav {
      width: 1150px;
      margin: 0 auto;
      padding-bottom: 9px;
      display: flex;
      margin-top: 22px;
      .nav-left {
        display: flex;
        align-items: center;
        margin-right: 50px;
        .nav-border {
          width: 1px;
          height: 28px;
          margin: 0 16px;
          background: #ccc;
          display: inline-block;
          vertical-align: middle;
        }
        .nav-city {
          .s-city {
            height: 26px;
            padding: 0 8px;
            line-height: 26px;
            border: 1px solid #dfdfdf;
            border-radius: 2px;
            text-decoration: none;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            &:after {
              content: " ";
              display: inline-block;
              width: 0;
              height: 0;
              margin: 2px 0 0 8px;
              border: 4px solid transparent;
              border-top-color: #999;
              vertical-align: middle;
            }
          }
        }
      }
      .nav-right {
        display: flex;
        align-items: center;
        .search-wrapper {
          position: relative;
          width: 450px;
          height: 46px;
          line-height: 46px;
          margin-right: 10px;
        }
      }
    }
    .main-tab {
      width: 1150px;
      margin: 0 auto;
      padding-bottom: 9px;
      display: flex;
      .tab-item {
        margin-right: 35px;
        padding: 16px 0 10px;
        font-size: 16px;
        color: #101d37;
        font-weight: 700;
        cursor: pointer;
        &.active {
          color: #3072f6;
          border-bottom: 2px solid #3072f6;
        }
      }
    }
  }
}
</style>
