<template>
  <div class="header">
    <div class="header-row">
      <image
          class="logo"
          :src="componentContent.imageUrl"
          mode="heightFix"
      />
      <div
          class="search-col"
          @click="toSearch(item)">
        <div class="search-input">
          <div v-if="componentContent.keyList.length === 0">搜索商品</div>
          <swiper
              v-else
              class="swiper-wrapper"
              :circular="true"
              :indicator-dots="false"
              :autoplay="true"
              :vertical="true">
            <swiper-item
                class="swiper-slide"
                v-for="(item,index) in componentContent.keyList"
                :key="index">
              <div class="a-link">{{ item }}</div>
            </swiper-item>
          </swiper>
        </div>
      </div>
    </div>
    <div class="tabs-nav-warp">
      <div
          class="tabs-nav"
          scroll-x="true">
        <div class="ul">
          <div
              v-for="(item, index) in componentContent.tabs"
              :key="index"
              class="li"
              :class="{ on: activeTab === index + 1 }"
              @click="jumpLink(item.link)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, toRefs } from 'vue';
import commonMixin from '../mixin';

const props = defineProps({
  componentContent: {
    type: Object,
    default() {
      return {};
    },
  },
});
const {componentContent} = toRefs(props);
const {jumpLink, toSearch} = commonMixin();
const activeTab = ref(0);
</script>

<style
    lang="scss"
    scoped>
.header {
  padding: 11rpx 34rpx 0;

  .logo {
    // width: 280px;
    height: 40rpx;
    margin-bottom: 11rpx;
  }

  .search-col {
    height: 60rpx;
    overflow: hidden;
    border-radius: 30rpx;
    padding: 0 30rpx 0 90rpx;
    background: #FFFFFF url("https://b2c-pro-static-dev.zkthink.com/static/images/icon-search.png") no-repeat 30rpx center / auto 30rpx;
    font-size: 24rpx;
    line-height: 60rpx;
    color: #999999;
    margin: 24rpx 0;
    .search-input{
      width: 100%;
    }
    .swiper-wrapper{
      width: 100%;
      height: 60rpx;
    }
  }
}

.tabs-nav-warp {
  margin-top: 20rpx;
  overflow: hidden;

  .tabs-nav {
    .ul {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      overflow: auto;

      .li {
        margin-left: 48rpx;
        font-size: 28rpx;
        color: #262626;
        position: relative;
        padding-bottom: 18rpx;
        white-space: nowrap;
        cursor: pointer;

        &:first-child {
          margin-left: 0;
        }

        &.on, &:hover {
          font-weight: bold;
          font-size: 36rpx;

          &:after {
            content: "";
            width: 48rpx;
            height: 6rpx;
            background: #F26E47;
            position: absolute;
            left: 50%;
            margin-left: -24rpx;
            bottom: 10rpx;
          }
        }
      }
    }
  }
}
</style>
