<template>
  <view class="themes-goods position-a"
        :style="{ height: 'calc(100vh - ' + hearHeight + ')' }">
    <view :class="{'themes-goods__content' : !nodata}">
      <view class="nav-list flex j-between al-item-center">
        <view
          @tap.stop="sortClick"
          class="search-navbar-item"
          :style="!field || field == 'sort' ? 'color:#D11800' : ''"
          data-field="sort"
          data-order="desc"
          >推荐</view
        >
        <view
          @tap.stop="sortClick"
          class="search-navbar-item"
          :style="field == 'sales' ? 'color:#D11800' : ''"
          data-field="sales"
          data-order="desc"
          >销量</view
        >
        <view
          @tap.stop="sortClick"
          class="search-navbar-item"
          :style="field == 'createtime' ? 'color:#D11800' : ''"
          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:#D11800' : ''"
            >价格</text
          >
          <text
            style="font-size: 26rpx"
            class="iconfont icon-danbianjiantou1"
            :style="{
              color: field == 'sell_price' && order == 'asc' ? '#D11800' : '',
            }"
          ></text>
          <text
            style="font-size: 26rpx; margin-left: -10rpx"
            class="iconfont icon-danbianjiantou"
            :style="{
              color: field == 'sell_price' && order == 'desc' ? '#D11800' : '',
            }"
          ></text>
        </view>
      </view>
      <scroll-view
        class="scroll-list"
        :scroll-y="true"
        v-if="shopSelPro && shopSelPro.length > 0"
      >
        <themes-shop
          :mgtop="0"
          :mgright="30"
          :mgleft="30"
          :mgbottom="2"
          :shopProduct="shopSelPro"
        ></themes-shop>
        <nomore v-if="nomore"></nomore>
      </scroll-view>
    </view>
    <loading v-if="loading"></loading>
    <nodata text="没有查找到相关商品" v-if="nodata"></nodata>
  </view>
</template>

<script>
import { myMixin } from "../logic/goods.js";
import themesHead from "./components/themes-head.vue";
import themesShop from "./components/themes-shop.vue";

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

<style lang="scss" scoped>
.themes-goods {
  background: #F4F4F4;
  left: 0;
  right: 0;
  border-radius: 20rpx 20rpx 0 0;
  display: flex;
  flex-direction: column;
}
.themes-goods__content {
	height: 100%;
}
.nav-list {
  height: 80rpx;
  padding: 28rpx 30rpx 12rpx;

  .selec {
    transform: scale(1.1);
  }
}
.scroll-list {
  height: calc(100% - 80rpx);
  padding: 0 28rpx;
  & ::-webkit-scrollbar {
    display: none;
  }
}
.lise-h {
  height: 100%;
  padding-top: 10rpx;
}
</style>