<template>
  <!-- 搜索组件 -->
  <div class="search flex-row-center" :style="{ 'background': meta.workbench ? '#F4F4F4' : '#ffffff' }">
    <div class="search-bos">
      <img class="logo" src="@/assets/images/head.png" alt="" />
      <div class="search-box">
        <div class="search-div flex-row-start">
          <div class="search-input flex-row-center">
            <el-input class="el-input" v-model="input" placeholder="搜索商品、品牌、分类..." />
            <div class="bnt flex-row-center" @click="onPath('/search?type=1&input=' + input)">
              <el-icon color="#ffffff" size="20">
                <Search />
              </el-icon>
            </div>
          </div>
          <div class="cat-bos flex-row-center" @click="onPath('/cart')">
            <img src="@/assets/images/layout/layout4.png" alt="" />
            <span>我的购物车</span>
          </div>
        </div>
        <div class="search-text">
          <div>家纺</div>
          <div>打印机</div>
          <div>打印耗材</div>
          <div>空调</div>
          <div>取暖</div>
          <div>开门红</div>
          <div>劳保福利</div>
        </div>
      </div>
      <img class="code" src="@/assets/images/code.png" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
const input = ref<any>('');
const route = useRoute();
const meta = ref<any>({});
meta.value = route.meta;

watch(route, () => {
  meta.value = route.meta;
});
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 25px;

  .search-bos {
    width: 1200px;
    display: flex;

    .logo {
      width: 185px;
      height: 90px;
      margin-top: 14px;
    }

    .search-box {
      flex: 1;
      padding-top: 50px;
      padding-left: 36px;

      .search-div {
        .search-input {
          width: 656px;
          height: 48px;
          border-radius: 10px;
          border: 2px solid #fb2c36;
          padding-right: 4px;

          .el-input {
            height: 40px;
            width: 100%;
            font-size: 16px;

            :deep(.el-input__wrapper) {
              border: none;
              /* 可选：去除聚焦时的高亮 */
              box-shadow: none;
              outline: none;
            }
          }

          .bnt {
            width: 68px;
            height: 40px;
            background: #e7000b;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
          }
        }

        .cat-bos {
          width: 143px;
          height: 48px;
          background: #ffffff;
          border-radius: 10px;
          border: 1px solid #e5e7eb;
          margin-left: 24px;
          font-size: 16px;
          color: #e7000b;
          cursor: pointer;

          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            margin-top: 2px;
          }
        }
      }

      .search-text {
        font-size: 14px;
        color: #e7000b;
        display: flex;
        margin-top: 6px;

        div {
          margin-left: 10px;
        }
      }
    }

    .code {
      height: 90px;
      width: 90px;
      margin-top: 30px;
    }
  }
}
</style>
