<template>
	<view class="themes-search">
		<view class="search-head">
			<view class="head-b flex al-item-center border-rius-r">
				<text class="iconfont icon-search"></text>
				<input v-model="keyword" placeholder="商品搜索" placeholder-style="font-size:28rpx;" @confirm="searchConfirm" />
        <text class="iconfont icon-shanchu" @click="delKeywordtex"></text>
			</view>
		</view>
		<view class="search-content">
			<view class="nav-list flex j-between al-item-center">
				<view
            @tap.stop="sortClick"
            class="search-navbar-item"
            :style="!field || field == 'sort' ? 'color: #1870C5' : ''"
            data-field="sort"
            data-order="desc"
            >推荐</view
          >
          <view
            @tap.stop="sortClick"
            class="search-navbar-item"
            :style="field == 'sales' ? 'color: #1870C5' : ''"
            data-field="sales"
            data-order="desc"
            >销量</view
          >
          <view
            @tap.stop="sortClick"
            class="search-navbar-item"
            :style="field == 'createtime' ? 'color: #1870C5' : ''"
            data-field="createtime"
            data-order="desc"
            >新品</view
          >
          <view
            @tap.stop="sortClick"
            class="search-navbar-item"
            data-field="sell_price"
            :data-order="order == 'asc' ? 'desc' : 'asc'"
          >
            <text :style="field == 'sell_price' ? 'color: #1870C5' : ''"
              >价格</text
            >
            <text
              style="font-size: 26rpx"
              class="iconfont icon-danbianjiantou1"
              :style="{
                color:
                  field == 'sell_price' && order == 'asc' ? '#1870C5' : '',
              }"
            ></text>
            <text
              style="font-size: 26rpx; margin-left: -10rpx"
              class="iconfont icon-danbianjiantou"
              :style="{
                color:
                  field == 'sell_price' && order == 'desc' ? '#1870C5' : '',
              }"
            ></text>
          </view>
			</view>
		</view>
		<scroll-view class="scroll-list lise-h" :scroll-y="true" @scrolltolower="getmorecomment" >
			<themes-shop :shopProduct="shopProduct" :mgtop="0" :mgright="30" :mgleft="30" :mgbottom="2"></themes-shop>
		<loading v-if="loading"></loading>
        <nomore v-if="nomore"></nomore>
        <nodata text="没有查找到相关商品" v-if="nodata"></nodata>
		</scroll-view>
    <!-- 悬浮按钮 -->
    <drag-button></drag-button>
	</view>
</template>

<script>
import { myMixin } from '../logic/search.js';
import themesShop from "../haiNaBaiXian/components/classify-shop.vue";

export default {
  mixins: [myMixin],
  components: {
    themesShop,
  },
};
</script>

<style lang="scss">
.themes-search {
  height: 100vh;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  background: #F4F4F4;
  ::v-deep .classify-shops {
    .shops-item {
      padding: 24rpx 40rpx 12rpx 20rpx;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.0300);
      border-radius: 10rpx;
      border-bottom: 0;
      margin-bottom: 20rpx;
    }
  }
  .search-head {
    width: 100%;
    height: 74rpx;
    padding: 10rpx 28rpx 0;
    flex-shrink: 0;
    background: #FFF;
    .head-b {
      width: 100%;
      height: 100%;
      padding: 0 12rpx;
      background-color: #F7F7F7;

      .icon-search {
        color: #ABABAB;
        font-size: 50rpx;
        flex-shrink: 0;
      }
      input {
        flex: 1;
        font-size: 28rpx;
        line-height: 40rpx;
        margin-left: 14rpx;
        color: #333333;
      }
      .icon-shanchu {
        font-size: 40rpx;
        color: #cccccc;
      }
    }
  }

  .search-content {
    flex-shrink: 0;
    background: #FFFFFF;
    .nav-list {
      height: 100rpx;
      padding: 34rpx 32rpx 34rpx 40rpx;

      .selec {
        // font-size: 32rpx;
        transform: scale(1.2);
      }
    }
  }

  .scroll-list {
    flex: 1;
    overflow-y: scroll;
    padding: 20rpx 28rpx;
    & ::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>