uk_front/components/PcHeader.vue

<template>
  <header>
    <div class="topbar com-margin-auto com-flex com-width-1400">
      <nuxt-link :to="{ name: 'index' }">
        <img
          src="@/assets/img/logo.png"
          alt="PromoCollection Logo"
          id="logo" />
      </nuxt-link>
      <div class="search-input">
        <el-input
          v-model="keyword"
          placeholder="Search item here"
          @focus="focus"
          @blur="blur"
          @keyup.enter.native="goSearchResultPage">
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="goSearchResultPage"></i>
        </el-input>
        <div
          v-loading="loading"
          class="search-detail flex column stretch"
          :style="{ display: showType }">
          <div
            class="flex-auto flex center stretch no-result"
            v-if="
              !loading && result.cate.length < 1 && productsList.length < 1
            ">
            No results found for “{{ keyword }}”
          </div>
          <div
            v-else
            class="flex-auto flex stretch"
            style="overflow: hidden">
            <div class="category-list flex column start stretch">
              <p class="autocomplete-title sub">CATEGORIES</p>
              <ul class="stretch">
                <li
                  v-for="item in result.firstCate"
                  :key="item.id"
                  class="flex column stretch">
                  <nuxt-link
                    :to="{
                      name: 'category-firstCategory',
                      params: {
                        firstCategory: item.name
                          .replace(/\s+/g, '-')
                          .replace('-&', '')
                          .toLowerCase(),
                      },
                    }">
                    <p>{{ item.name }}</p>
                  </nuxt-link>
                </li>

                <p
                  v-if="result.subCate.length"
                  class="autocomplete-title">
                  SUB CATEGORIES
                </p>
                <li
                  v-for="item in result.subCate"
                  :key="item.id"
                  class="flex column stretch">
                  <nuxt-link
                    v-if="item.lev === 2"
                    :to="{
                      name: 'category-firstCategory-secondCategory',
                      params: {
                        firstCategory: item.parentName
                          .replace(/\s+/g, '-')
                          .replace('-&', '')
                          .toLowerCase(),
                        secondCategory: item.name
                          .replace(/\s+/g, '-')
                          .replace('-&', '')
                          .toLowerCase(),
                      },
                    }">
                    <p>{{ item.name }}</p>
                  </nuxt-link>
                  <nuxt-link
                    v-else
                    :to="{
                      name: 'category-firstCategory-secondCategory-thirdCategory',
                      params: {
                        firstCategory: item.grandName
                          .replace(/\s+/g, '-')
                          .replace('-&', '')
                          .toLowerCase(),
                        secondCategory: item.parentName
                          .replace(/\s+/g, '-')
                          .replace('-&', '')
                          .toLowerCase(),
                        thirdCategory: item.name
                          .replace(/\s+/g, '-')
                          .replace('-&', '')
                          .toLowerCase(),
                      },
                    }">
                    <p>{{ item.name }}</p>
                  </nuxt-link>
                </li>
              </ul>
            </div>
            <div class="product-list flex-auto flex column stretch">
              <div class="flex between start">
                <p class="autocomplete-title">PRODUCTS</p>
                <nuxt-link
                  v-if="result.total"
                  :to="{
                    name: 'category-searchResult',
                    query: { keyword: keyword },
                  }">
                  <div class="seeAllResult">
                    Show all {{ result.total }} Results
                  </div>
                </nuxt-link>
              </div>
              <ul
                class="flex-auto flex column stretch"
                style="overflow-y: auto">
                <li
                  v-for="item in productsList"
                  :key="item.id">
                  <nuxt-link
                    :to="{
                      name: 'product-code',
                      params: { code: item.product_code },
                    }">
                    <img
                      :src="
                        item.image && !$mediaRegExp.test(item.image)
                          ? $OSS_PREFIX + item.image
                          : $utils.generateResizedImageUrl(item.image, 100)
                      "
                      alt="" />
                    <div class="product-info">
                      <p>{{ item.product_name }}</p>
                      <p>{{ item.product_code }}</p>
                    </div>
                  </nuxt-link>
                </li>
                <div
                  class="no-result"
                  v-if="!loading && productsList.length < 1">
                  No results found for “{{ keyword }}”
                </div>
              </ul>
            </div>
          </div>
          <div class="sth-else">
            <span>Can't find what you're looking for?</span>
            <nuxt-link
              :to="{
                name: 'news-newsName',
                params: { newsName: 'indent-ideas', id: indentIdeasArticle.id },
                hash: '#formTag',
              }">
              click here
            </nuxt-link>
          </div>
        </div>
      </div>
      <div
        class="topbar-item com-flex"
        style="cursor: default"
        v-if="email">
        <img
          src="@/assets/img/help.png"
          alt="help" />
        <div class="topbar-item-right com-flex-item">
          <p style="margin-bottom: 6px">(+44)203 916 5098</p>
          <p>info@promocollection.uk</p>
        </div>
      </div>
      <div class="topbar-item com-flex">
        <div
          class="topbar-item com-flex"
          v-if="!email">
          <img src="@/assets/img/login.png" />
          <div class="topbar-item-right com-flex-item">
            <p @click="openDialog">Login</p>
          </div>
        </div>
        <div
          class="topbar-item"
          v-else>
          <el-popover
            placement="bottom-end"
            width="292"
            trigger="click"
            ref="userPopover">
            <div
              slot="reference"
              class="topbar-item-right-myAccount">
              <!-- <div class="greeting">
                Hello {{ $store.state.userInfo.contacts }}
              </div> -->
              <div class="flex center">
                <img src="@/assets/img/login.png" />
                <p>Hello, {{ $store.state.userInfo.contacts }}</p>
                <span class="el-icon-caret-bottom"></span>
              </div>
            </div>
            <div
              class="user-menu-panel flex column center"
              @click="closePopoverAndNavigate">
              <!-- <div class="greeting">
                Hello {{ $store.state.userInfo.contacts }}
              </div> -->
              <div class="user-menu-wrap">
                <div class="user-menu">
                  <div class="menu-title">Client Portal</div>
                  <!-- <div class="sub-menu">
                    <nuxt-link
                      :to="{
                        path: '/home/myDetail',
                        query: { type: 'enquiry' },
                      }">
                      <div class="flex">
                        <div class="icon order"></div>
                        <div class="sub-title">My Enquires</div>
                      </div>
                    </nuxt-link>
                  </div> -->
                  <div class="sub-menu">
                    <nuxt-link
                      :to="{
                        path: '/home/myDetail',
                        query: { type: 'all-orders' },
                      }">
                      <div class="flex">
                        <div class="icon order"></div>
                        <div class="sub-title">My Orders</div>
                      </div>
                    </nuxt-link>
                  </div>
                  <div style="height: 4px; width: 1px"></div>
                  <div class="menu-title">Marketing Resources</div>
                  <!-- <div class="sub-menu">
                    <nuxt-link to="/home/video">
                      <div class="flex">
                        <div class="icon video"></div>
                        <div class="sub-title">Videos</div>
                      </div>
                    </nuxt-link>
                  </div> -->
                  <!-- <div class="sub-menu">
                    <a
                      href="https://www.flipsnack.com/promocollection/"
                      target="_blank">
                      <div class="flex">
                        <div class="icon book"></div>
                        <div class="sub-title">Catalogue</div>
                      </div>
                    </a>
                  </div> -->
                  <!-- <div class="sub-menu">
                    <nuxt-link to="/home/EDMS">
                      <div class="flex">
                        <div class="icon book"></div>
                        <div class="sub-title">EDMS</div>
                      </div>
                    </nuxt-link>
                  </div> -->
                  <div class="sub-menu">
                    <a
                      href="mailto:Info@promocollection.uk?subject=Sample%20Request">
                      <div class="flex">
                        <div class="icon mail"></div>
                        <div class="sub-title">Sample Request</div>
                      </div>
                    </a>
                  </div>
                  <div class="sub-menu">
                    <a
                      href="mailto:Info@promocollection.uk?subject=Free%20Mockup%20Request">
                      <div class="flex">
                        <div class="icon mail"></div>
                        <div class="sub-title">Mockup Request</div>
                      </div>
                    </a>
                  </div>
                  <div class="menu-title">
                    <nuxt-link
                      :to="{
                        path: '/home/myDetail',
                        query: { type: 'profile' },
                      }">
                      My Profile
                    </nuxt-link>
                  </div>
                  <div class="menu-title">
                    <div
                      class="btn-logout"
                      @click="logout">
                      Sign Out
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
    <nav>
      <ul class="com-width-1400 com-minwidth-1024 com-margin-auto">
        <li class="nav-list">
          <div class="nav-list-title">
            <span
              class="shopProducts"
              @click.stop="openShopProduct">
              Shop Products
              <i
                :class="
                  isShopBlock ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                "></i>
            </span>
          </div>
          <Transition name="category">
            <div
              class="nav-menu border-radius"
              v-show="isShopBlock"
              @click="closeAllBlock">
              <div class="nav-menu-content">
                <div
                  class="nav-menu-item"
                  v-for="item1 in categoryList"
                  :key="item1.id">
                  <div class="primary-classification">
                    <nuxt-link
                      :to="{
                        name: 'category-firstCategory',
                        params: {
                          firstCategory: item1.name
                            .replace(/\s+/g, '-')
                            .replace('-&', '')
                            .toLowerCase(),
                        },
                      }">
                      <div class="menu-item-icon">
                        <img
                          :src="
                            item1.style && !$mediaRegExp.test(item1.style)
                              ? $OSS_PREFIX + item1.style
                              : item1.style
                          "
                          alt="" />
                      </div>
                      <div class="menu-item-title">
                        {{ item1.name }}
                      </div>
                    </nuxt-link>
                    <div class="menu-separator"></div>
                  </div>
                  <div
                    class="secondary-classification"
                    v-for="item2 in item1.child"
                    :key="item2.id">
                    <nuxt-link
                      :to="{
                        name: 'category-firstCategory-secondCategory',
                        params: {
                          firstCategory: item1.name
                            .replace(/\s+/g, '-')
                            .replace('-&', '')
                            .toLowerCase(),
                          secondCategory: item2.name
                            .replace(/\s+/g, '-')
                            .replace('-&', '')
                            .toLowerCase(),
                        },
                      }">
                      {{ item2.name }}
                    </nuxt-link>
                  </div>
                </div>
              </div>
            </div>
          </Transition>
        </li>
        <!-- <li class="nav-list">
          <div class="nav-list-title">
            <span
              class="LeadTime"
              @click.stop="openLeadTime">
              By Lead Time
              <i :class="isShopBlock?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
            </span>
          </div>
          <Transition name="leadTime">
            <ul
              class="leadTime-list border-radius"
              v-show="isLeadTimeBlock"
              @click="closeAllBlock">
              <li
                class="leadTime-list-item"
                v-for="item in leadTime"
                :key="item.id">
                <nuxt-link
                  :to="{ name: 'category', query: { lead_time: item.id } }">
                  {{ item.name }}
                </nuxt-link>
              </li>
            </ul>
          </Transition>
        </li>
        <li class="nav-list">
          <div class="nav-list-title">
            <span
              class="Budget"
              @click.stop="openBudget"
              >By Budget
              <i :class="isShopBlock?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
            </span>
          </div>
          <Transition name="budge">
            <ul
              class="budget-list border-radius"
              v-show="isBudgetBlock"
              @click.stop="closeAllBlock">
              <div
                class="budget-list-item"
                v-for="item in budget"
                :key="item.id">
                {{ item.name }}
                <div class="sub-item-wrap border-radius flex column stretch">
                  <div class="budget-list-sub-item-title">QTY Needed</div>
                  <div
                    class="budget-list-item"
                    v-for="(v, i2) in qtyList"
                    :key="`${item.id}-${i2}`">
                    <nuxt-link
                      :to="{
                        name: 'category',
                        query: { pricetype: item.id, qty: v.value },
                      }">
                      {{ v.name }}
                    </nuxt-link>
                  </div>
                </div>
              </div>
            </ul>
          </Transition>
        </li> -->
        <li
          class="nav-list"
          @click="closeAllBlock">
          <!-- <a :href="'/category?feature=54'"> New products</a> -->
          <div class="nav-list-title">
            <nuxt-link
              :to="{ name: 'category', query: { feature: 54 } }"
              target="_self">
              New Products
            </nuxt-link>
          </div>
        </li>
        <li
          class="nav-list"
          @click="closeAllBlock">
          <div class="nav-list-title">
            <a href="/article/Compliance">
              Compliance
            </a>
          </div>
        </li>
        <li
          class="nav-list"
          @click="closeAllBlock">
          <div class="nav-list-title">
            <nuxt-link
              id="indentLink"
              :to="{
                name: 'news-newsName',
                params: { newsName: 'indent-ideas', id: indentIdeasArticle.id },
              }"
              target="_self">
              Indent Sourcing
            </nuxt-link>
          </div>
        </li>
        <!-- <li
          class="nav-list"
          @click="closeAllBlock">
          <div class="nav-list-title">
            <nuxt-link
              to="/category/apparel/socks"
              target="_self">
              Sock Collection
            </nuxt-link>
          </div>
        </li> -->
        <!-- <li
          class="nav-list compare-list"
          @click="closeAllBlock">
          <div class="nav-list-title">
            <el-badge
              :value="compareList.length"
              class="item"
              v-show="compareList.length">
            </el-badge>
            <span>Wishlist</span>
          </div>
          <div class="compare-product">
            <div class="compare-product-title">
              <p>Product to Compare</p>
              <el-button
                class="compare-btn"
                size="mini"
                @click="compareAll">
                Compare All
              </el-button>
            </div>
            <div class="red-line"></div>
            <div
              class="prompt-info"
              v-show="!compareList.length">
              <ul>
                <li>
                  Select products to compare by clicking the "Compare list +"
                  batton on any product listing.
                </li>
                <li>You can compare up to 5 products.</li>
                <li>
                  After selecting products, click on the "Compare All" button to
                  view the comparison chart.
                </li>
              </ul>
            </div>
            <ul>
              <li
                v-for="item in compareList"
                :key="item.id">
                <div class="item-left">
                  <img
                    :src="
                      item.main.image &&
                      item.main.image.indexOf(
                        'http://promocollection.s3.ap-southeast-2.amazonaws.com'
                      ) != -1
                        ? item.main.image
                        : 'https://www.promocollection.uk/' +
                          item.main.image
                    " />
                  <p>{{ item.product_name }}</p>
                </div>
                <div
                  class="item-right"
                  @click="clearCompare(item.id)">
                  <i class="el-icon-error"></i>
                </div>
              </li>
            </ul>
            <el-button
              class="clear-btn"
              size="mini"
              @click="clearAll"
              v-show="compareList.length">
              Clear All
            </el-button>
          </div>
        </li> -->
      </ul>
    </nav>
    <div class="header-redLine"></div>
  </header>
</template>

<script>
import { mapMutations } from 'vuex'
import cloneDeep from 'lodash.clonedeep'
import algoliasearch from 'algoliasearch'

export default {
  data() {
    return {
      // loaded: false,
      loading: false,
      timer: '',
      keyword: '',
      result: { cate: [], subCate: [], firstCate: [] },
      showType: 'none',
      matchingList: [],
      categoryList: [],
      // leadTime: [],
      budget: [],
      compareList: [],
      indentIdeasArticle: {},
      complianceArticle: {},
      isShopBlock: false,
      isLeadTimeBlock: false,
      isBudgetBlock: false,
      qtyList: [
        {
          value: 50,
          name: 50,
        },
        {
          value: 100,
          name: 100,
        },
        {
          value: 250,
          name: 250,
        },
        {
          value: 500,
          name: 500,
        },
        {
          value: 1000,
          name: '1,000',
        },
        {
          value: 2500,
          name: '2,500',
        },
        {
          value: 5000,
          name: '5,000',
        },
        {
          value: 10000,
          name: '10,000',
        },
      ],
      index: null,
    }
  },
  async fetch() {
    const p1 = this.$axios.post('/uk-api/common/shopProductList').then(res => {
      if (res.code === 1) {
        this.categoryList = res.result
      }
    })
    // const p2 = this.$axios.get('/api/home/lead_time').then(res => {
    //   if (res.code === 1) {
    //     this.leadTime = res.result.sort((a, b) => a.rank - b.rank)
    //   }
    // })
    // const p3 = this.$axios
    //   .post('/api/common/goodsFilterList', { pid: 2 })
    //   .then(res => {
    //     if (res.code === 1) {
    //       this.budget = res.result
    //     }
    //   })
    const p4 = this.$axios
      .post('/uk-api/home/articleList', { keyword: 'Indent Ideas' })
      .then(res => {
        this.indentIdeasArticle = res.result.data[0] || {}
      })
    const p5 = this.$axios
      .post('/uk-api/home/articleList', { keyword: 'Compliance' })
      .then(res => {
        this.complianceArticle = res.result.data[0] || {}
      })
    // 并联异步操作，总耗时===耗时最长的单个请求。之前的逻辑是串联，总耗时为所有请求耗时的累加
    await Promise.all([p1, p4, p5])
  },
  computed: {
    email() {
      return this.$store.state.userInfo?.email
    },
    compareLists() {
      return this.$store.state.compareList
    },
    productsList() {
      if (this.result?.goods) {
        return this.result.goods.map(item => {
          const temp = {
            ...item,
          }
          if (item.img) {
            temp.image = !this.$mediaRegExp.test(item.img)
              ? this.$OSS_PREFIX + item.img
              : item.img
          }
          return temp
        })
      } else {
        return []
      }
    },
  },
  watch: {
    keyword: {
      handler(newValue, oldValue) {
        // if (newValue.length > 2 && this.loaded) {
        if (newValue.length > 2) {
          this.debounce(this.search, 700)
        } else {
          setTimeout(() => {
            this.showType = 'none'
          }, 501)
        }
      },
      deep: true,
    },
    compareLists: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.compareList = cloneDeep(newValue)
        }
      },
      deep: true,
      immediate: true,
    },
    $route(to, from) {
      if (to.path == from.path && to.query.keyword != from.query.keyword) {
        location.reload()
      }
      if (!to.query.keyword) {
        this.keyword = ''
      }
    },
  },
  created() {},
  mounted() {
    // if (this.$route.query.keyword && this.$route.query.keyword.length) {
    //   this.keyword = this.$route.query.keyword
    // }
    // setTimeout(() => {
    //   this.loaded = true
    // }, 0)
    window.addEventListener('click', this.closeLeadtimeAndBudget)

    if (process.env.NODE_ENV === 'development') {
      const client = algoliasearch(
        '7KGEFE6I2Z',
        'e39e202ace0a2fa12ea61095e6ede35d'
      )
      this.index = client.initIndex('test_uk')
    } else {
      const client = algoliasearch(
        '2340OWI595',
        '2d4c53cdcf2bab0c361e589c2c2272fa'
      )
      this.index = client.initIndex('product_uk')
    }
  },
  beforeDestroy() {
    window.removeEventListener('click', this.closeLeadtimeAndBudget)
  },
  methods: {
    ...mapMutations([
      'openDialog',
      'clearUserInfo',
      // 'clearCompareList',
    ]),

    debounce(fn, wait) {
      if (this.timer !== null) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(fn, wait)
    },
    search() {
      this.result = { cate: [], subCate: [], firstCate: [] }
      this.showType = 'flex'
      this.loading = true

      const key = this.keyword ? this.keyword.trim() : ''
      if (this.index) {
        this.index
          .search(key, {
            hitsPerPage: 1000,
          })
          .then(({ nbHits, hits }) => {
            const temp = {
              goods: [],
              total: nbHits || hits.length || 0,
              cate: [],
              firstCate: [],
              subCate: [],
            }
            const t1 = []
            const t2 = []
            hits
              .filter(i => i.status === 1 || i.status === '1' || i.status)
              .forEach(item => {
                let colorImg = ''
                item.colour_imgs = JSON.parse(item.colour_imgs)
                item.colour_imgs.sort((a, b) => a.name.length - b.name.length)
                if (
                  Array.isArray(item.colour_imgs) &&
                  item.colour_imgs.length
                ) {
                  item.colour_imgs.forEach(colorItem => {
                    if (colorItem.name && colorItem.name.length) {
                      if (
                        new RegExp(colorItem.name.toLowerCase(), 'i').test(key)
                      ) {
                        console.log(
                          item.product_code,
                          colorItem.name,
                          'replace'
                        )
                        colorImg = colorItem.img
                      } else if (
                        /\s/.test(colorItem.name) &&
                        colorItem.name
                          .split(' ')
                          .filter(a => a.length > 0)
                          .some(b => new RegExp(b.toLowerCase(), 'i').test(key))
                      ) {
                        console.log(
                          item.product_code,
                          colorItem.name,
                          'advance replace'
                        )
                        colorImg = colorItem.img
                      }
                    }
                  })
                  item.colour_imgs.forEach(i => {
                    if (i.name && i.name.length) {
                      if (key.toLowerCase().includes(i.name.toLowerCase())) {
                        console.log(
                          item.product_code,
                          i.name,
                          'complete replace'
                        )
                        colorImg = i.img
                      }
                    }
                  })
                  console.log('---')
                }
                temp.goods.push({
                  ...item,
                  img: colorImg || item.image || item.img,
                  product_name: item.product_name || item.name,
                })
                if (!item.category_id) return
                const id = parseInt(item.category_id)
                const categoryResult = this.getCategoryFromTree(
                  id,
                  this.categoryList
                )
                switch (categoryResult.lev) {
                  case 1:
                    if (!t1.includes(id)) {
                      t1.push(id)
                      temp.firstCate.push(categoryResult)
                    }
                    break
                  case 2:
                  case 3:
                    if (!t2.includes(id)) {
                      t2.push(id)
                      temp.subCate.push(categoryResult)
                    }
                    // 当前商品在2 3 级, 搜索出来的分类里面应同时展示1级.
                    if (!t1.includes(categoryResult.root.id)) {
                      t1.push(categoryResult.root.id)
                      temp.firstCate.push(categoryResult.root)
                    }
                  // no default
                }
              })

            this.result = temp
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
    focus() {
      clearTimeout(this.timer)
      if (this.keyword) {
        this.showType = 'flex'
      }
    },
    blur() {
      this.timer = setTimeout(() => {
        this.showType = 'none'
      }, 200)
    },
    goSearchResultPage() {
      // 匹配同组件的路由更改query时, 页面不会被刷新
      // this.$router.push({
      //   name: 'category-searchResult',
      //   query: { keyword: this.keyword },
      // })
      location.href =
        location.origin +
        `/category/searchResult?keyword=${encodeURIComponent(this.keyword)}`
    },
    logout() {
      this.$store.dispatch('logout').then(() => {
        this.$router.push('/')
      })
    },
    compareAll() {
      if (this.compareList.length) {
        this.$router.push('/home/compareList')
      }
    },
    // clearCompare(id) {
    //   this.$axios
    //     .post('/api/home/compare_clear', {
    //       id,
    //       compare_keys: 'keys',
    //     })
    //     .then(res => {
    //       if (res.code === 1) {
    //         this.compareList.splice(
    //           this.compareList.findIndex(item => item.id === id),
    //           1
    //         )
    //       }
    //     })
    // },
    // clearAll() {
    //   if (this.compareList.length) {
    //     this.$axios
    //       .post('/api/home/compare_clear', {
    //         id: 0,
    //         compare_keys: 'keys',
    //       })
    //       .then(res => {
    //         if (res.code === 1) {
    //           this.clearCompareList()
    //         }
    //       })
    //   }
    // },
    openShopProduct() {
      this.isShopBlock = !this.isShopBlock
      this.isLeadTimeBlock = false
      this.isBudgetBlock = false
    },
    // openLeadTime() {
    //   this.isLeadTimeBlock = !this.isLeadTimeBlock
    //   this.isShopBlock = false
    //   this.isBudgetBlock = false
    // },
    openBudget() {
      this.isBudgetBlock = !this.isBudgetBlock
      this.isLeadTimeBlock = false
      this.isShopBlock = false
    },
    closeAllBlock() {
      this.isShopBlock = false
      this.isLeadTimeBlock = false
      this.isBudgetBlock = false
    },
    closeLeadtimeAndBudget(e) {
      const className = e.target?.className
      if (!['shopProducts', 'LeadTime', 'Budget'].includes(className)) {
        this.isShopBlock = false
        this.isLeadTimeBlock = false
        this.isBudgetBlock = false
      }
    },
    closePopoverAndNavigate() {
      this.$refs.userPopover.doClose()
    },
    // 从分类树数据里面找到对应分类
    getCategoryFromTree(id, tree) {
      let result = {}
      if (!tree.length) return result
      tree.forEach(i => {
        if (i.id === id) {
          result = cloneDeep(i)
          result.lev = 1
        }

        if (!Array.isArray(i.child)) return
        i.child.forEach(secondCate => {
          if (secondCate.id === id) {
            result = cloneDeep(secondCate)
            result.parentName = i.name
            result.lev = 2
            result.root = {
              name: i.name,
              id: i.id,
              pid: 0,
            }
          }

          if (!Array.isArray(secondCate.child)) return
          secondCate.child.forEach(thirdCate => {
            if (thirdCate.id === id) {
              result = cloneDeep(thirdCate)
              result.parentName = secondCate.name
              result.grandName = i.name
              result.lev = 3
              result.root = {
                name: i.name,
                id: i.id,
                pid: 0,
              }
            }
          })
        })
      })
      return result
    },
  },
}
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
  background-color: #fff;
  .topbar {
    min-width: 800px;
    height: 92px;
    display: flex;
    align-items: center;

    #logo {
      cursor: pointer;
    }
    .search-input {
      flex: 1;
      padding: 0 26px 0 50px;
      position: relative;

      .search-detail {
        z-index: 101;
        padding: 12px 0 8px;
        box-sizing: border-box;
        width: calc(100% - 76px);
        height: 320px;
        position: absolute;
        top: 52px;
        background: #ffffff;
        border: 1px solid #bebebe;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        .autocomplete-title {
          height: 36px;
          line-height: 36px;
          margin-bottom: 8px;
          font-size: 14px;
          font-weight: bold;
          color: #000000;
        }
        .category-list {
          box-sizing: border-box;
          padding: 0 12px;
          height: 100%;
          width: 35%;
          min-width: 35%;
          border-right: 1px solid #7f7f7f;
          position: relative;
          ul {
            overflow-y: auto;
            li {
              width: 100%;
              position: relative;
              p {
                box-sizing: border-box;
                padding: 0 8px;
                width: 100%;
                height: 50px;
                line-height: 50px;
                color: #333;
                font-size: 14px;
                cursor: pointer;
                &:hover {
                  background-color: #f5f5f5;
                  color: #0b6dc9;
                }
              }
            }
          }
        }
        .product-list {
          padding: 0 16px;
          ul li {
            margin-bottom: 10px;
            a {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              img {
                width: 43px;
                height: 43px;
              }
              p {
                height: 24px;
                line-height: 24px;
                margin-left: 5px;
              }
            }
            &:hover {
              background: #f5f5f5;
              p {
                color: #0b6dc9;
              }
            }
          }
          .seeAllResult {
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            background-color: #00213b;
            color: #fff;
            padding: 0 12px;
            line-height: 26px;
            height: 26px;
            border-radius: 4px;
          }
        }
        .sth-else {
          margin-top: 4px;
          text-align: center;
          height: 24px;
          line-height: 24px;
          font-size: 18px;
          font-weight: 600;
          color: #00213b;
          a {
            display: inline-block;
            padding: 0 6px;
            border-radius: 4px;
            background-color: #00213b;
            color: #fff;
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
          }
          a:hover {
            background-color: #000;
          }
        }
      }
    }
    .topbar-item {
      font-weight: bold;
      white-space: nowrap;
      cursor: pointer;
      .topbar-item-right {
        padding: 0 30px 0 12px;
      }
      .topbar-item-right-myAccount {
        // display: flex;
        // align-items: center;

        position: relative;
        p {
          margin-left: 10px;
        }
        .greeting {
          position: absolute;
          top: -20px;
          left: 30px;
        }
      }
    }
  }
  nav {
    background-color: #00213b;
    height: 52px;
    // font-family: ProximaNova-Regular;
    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      li.nav-list {
        width: 170px;
        height: 52px;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 52px;
        .nav-list-title {
          font-weight: 600;
        }
        a {
          display: block;
          width: 100%;
          color: #ffffff;
        }
        span {
          display: inline-block;
          cursor: pointer;
          .el-icon-arrow-up,
          .el-icon-arrow-down {
            margin-left: 5px;
            text-align: center;
          }
        }
        .nav-menu {
          width: 1400px;
          height: 395px;
          color: #fff;
          background-color: RGB(56 54 55);
          overflow: hidden;
          .nav-menu-content {
            box-sizing: border-box;
            padding: 20px 0 0 20px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .nav-menu-item {
              position: relative;
              width: 130px;
            }
            .primary-classification {
              $width: 85px;
              .menu-item-icon {
                width: $width;
                height: $width;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              &:hover {
                .menu-item-title {
                  color: #0b6dc9;
                }
              }
              .menu-item-title {
                margin-top: 5px;
                height: 24px;
                font-size: 15px;
                // font-size: 1.1rem;
                font-weight: bold;
                text-align: left;
                line-height: 24px;
                cursor: pointer;
                white-space: normal;
                word-break: keep-all;
                overflow: hidden;
              }
              .menu-separator {
                width: $width;
                height: 1px;
                background-color: #666;
                margin: 12px 0;
              }
            }
            .secondary-classification {
              width: 100%;
              font-size: 13px;
              font-weight: 400;
              line-height: 24px;
              text-align: left;
              cursor: pointer;
              white-space: normal;
              word-break: keep-all;
              overflow: hidden;
            }
          }
        }
        .leadTime-list,
        .budget-list {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #fff;
          background-color: RGB(56 54 55);
          text-align: center;
          font-size: 14px;
          width: 171px;
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
          .budget-list-item,
          .leadTime-list-item {
            width: 171px;
            height: 40px;
            line-height: 40px;
            min-height: 40px;
            a {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
        .sub-item-wrap {
          display: none;
          z-index: 1;
          background-color: rgb(56 54 55);
          position: absolute;
          top: 0;
          left: 170px;

          .budget-list-item {
            cursor: pointer;
          }
          .budget-list-sub-item-title {
            width: 171px;
            height: 40px;
            line-height: 40px;
            min-height: 40px;
          }
          // color: red;
        }
        .budget-list-item {
          position: relative;
          overflow: visible;
          &:hover {
            .sub-item-wrap {
              display: flex;
            }
          }
        }
        .leadTime-list {
          height: 280px;
        }
        .budget-list {
          height: 360px;
        }
        .compare-product {
          width: 543px;
          background: #fff;
          color: #333333;
          box-shadow: 0px 1px 10px 0px rgba(7, 5, 5, 0.13);
          margin-left: -372px;
          padding: 31px 13px 14px 29px;
          box-sizing: border-box;
          visibility: hidden;
          opacity: 0;
          .compare-product-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            p {
              font-size: 24px;
              font-weight: bold;
            }
            .compare-btn {
              width: 136px;
              height: 38px;
              background: #00213b;
              border-radius: 4px;
              color: #ffffff;
              font-size: 14px;
            }
          }
          .red-line {
            width: 27px;
            height: 7px;
            background: #e90000;
          }
          .prompt-info {
            font-size: 14px;
            text-align: left;
            line-height: 24px;
          }
          ul {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin-top: 10px;
            li {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 500px;
              .item-left {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                img {
                  width: 30px;
                  height: 30px;
                  margin-right: 10px;
                }
              }
              .el-icon-error {
                color: #e90000;
                font-size: 21px;
              }
            }
          }
          .clear-btn {
            background: #e90000;
            color: #fff;
            font-size: 14px;
            padding: 10px 20px;
          }
        }

        &:hover {
          div.nav-list-title {
            color: #333333;
            background-color: #e3e3e3;
            a {
              color: #333333;
              background-color: #e3e3e3;
            }
            .el-icon-arrow-down {
              color: #333333;
            }
          }

          .compare-product {
            opacity: 1;
            visibility: visible;
            transition: all 0.5s;
          }
        }
        .menu-item-title:hover,
        .secondary-classification:hover a {
          color: #0b6dc9;
        }
        .leadTime-list-item:hover,
        .budget-list-item:hover {
          background: #0b6dc9;
          color: #f5f5f5;
          & > a {
            background: #0b6dc9;
            color: #f5f5f5;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  :deep(.el-badge.item .el-badge__content) {
    background-color: #e90000;
  }
  .header-redLine {
    height: 4px;
    background: #e90000;
  }
}
:deep(.el-input) {
  .el-input__inner {
    border-radius: 18px;
  }
}
:deep(.el-menu-item-group__title) {
  padding: 0;
}
:deep(.el-submenu__title) {
  font-family: Proxima Nova;
  font-size: 14px;
  color: #333333;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  &:hover {
    color: #1a72b7;
  }
}
:deep(.el-menu-item) {
  font-family: Proxima Nova;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  color: #333333;
  a {
    display: inline-block;
    width: 100%;
  }
  &:hover a {
    color: #1a72b7;
  }
}
:deep(.el-menu-item.is-active) {
  a {
    color: #1a72b7;
  }
}
:deep(.el-menu-item-group) {
  font-family: Proxima Nova;
  .el-menu-item {
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    &:hover a {
      color: #1a72b7;
    }
  }
  .is-active a {
    color: #1a72b7;
    font-size: 12px;
    font-weight: 400;
  }
}
@keyframes fade {
  0% {
    height: 0;
  }
}
.category-enter-active,
.leadTime-enter-active,
.budge-enter-active {
  overflow: hidden;
  animation: fade 0.3s ease-in-out;
}
.category-leave-active,
.leadTime-leave-active,
.budge-leave-active {
  overflow: hidden;
  animation: fade 0.3s ease-in-out reverse;
}
.border-radius {
  border-radius: 6px;
}
.no-result {
  margin-top: 120px;
  font-size: 34px;
  font-family: Proxima Nova;
  font-weight: 600;
  color: #797979;
}
.user-menu-panel {
  width: 292px;
  box-sizing: border-box;
  padding: 0 0 20px;
  font-size: 15px;
  font-family: ProximaNova-Semibold, sans-serif;
  color: #333;
  & div {
    box-sizing: border-box;
  }
  & > div {
    padding-left: 27px;
    padding-right: 27px;
  }
  .greeting {
    width: 270px;
    font-weight: 600;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 11px;
    padding-right: 11px;
    border-bottom: 1px solid rgba(#002369, 0.3);
  }
  .btn-logout {
    display: inline-block;
    cursor: pointer;
  }
}
.user-menu-wrap {
  width: 100%;
  padding-top: 6px;
  padding-bottom: 24px;
}
.user-menu {
  margin-top: 8px;
  .menu-title {
    font-weight: 600;
    line-height: 36px;
  }
  .sub-menu {
    font-family: Proxima Nova, sans-serif;
    padding-left: 14px;
    display: flex;
    align-items: center;
    .icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 8px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      &.book {
        background-image: url(~@/assets/img/header/book.png);
      }
      &.folder {
        background-image: url(~@/assets/img/header/folder.png);
      }
      &.mail {
        background-image: url(~@/assets/img/header/mail.png);
      }
      &.order {
        background-image: url(~@/assets/img/header/order.png);
      }
      &.video {
        background-image: url(~@/assets/img/header/video.png);
      }
    }
    .sub-title {
      display: inline-block;
      line-height: 36px;
      font-size: 14px;
    }
    &:hover {
      .sub-title {
        color: #409eff;
      }
    }
  }
}
</style>