<template>
  <!-- 搜索框 -->
  <view class="diy-search" :class="style.sticky">
    <view class="inner" :class="style.searchStyle" @click="onTargetSearch">
      <view class="search-input"
        :style="{ textAlign: style.textAlign }">
        <text class="search-icon iconfont icon-search"></text>
        <text>请输入关键字进行搜索</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        style: {
            sticky: true,
          searchStyle: 'round',
          textAlign: 'left',
        }
      }
    },
    methods: {
      onTargetSearch() {
        this.$navTo('pages/search/index')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .diy-search {
    background: #f1f1f2;
    padding: 20rpx 20rpx;

    &.sticky {
      position: sticky;
      top: var(--window-top);
      z-index: 100;
    }
  }

  .inner {
    height: 60rpx;
    background: #fff;
    overflow: hidden;

    &.radius {
      border-radius: 10rpx;
    }

    &.round {
      border-radius: 60rpx;
    }

    .search-input {
      height: 60rpx;
      //width: 100%;
      line-height: 60rpx;
      color: #999999;
      padding: 0 24rpx;
      font-size: 26rpx;

      .search-icon {
        margin-right: 12rpx;
      }
    }
  }
</style>