<template>
  <view class="shop-product-container" :style="{ height: windowHeight + 'px' }">
    <view class="shop-product-container__bar">
      <view class="list">
        <view class="item" :class="{ active: filterIndex === 0 }" @tap="handleBarTab(0)">{{ $t('mall.sort.comprehensive') }}</view>
        <view class="item" :class="{ active: filterIndex === 1 }" @tap="handleBarTab(1)">{{ $t('mall.sort.sales') }}</view>
        <view class="item" :class="{ active: filterIndex === 2 }" @tap="handleBarTab(2)">{{ $t('mall.sort.new') }}</view>
        <view class="item" :class="{ active: filterIndex === 3 }" @tap="handleBarTab(3)">
          <view>{{ $t('mall.sort.price') }}</view>
          <view class="box">
            <text :class="{ active: priceOrder === 1 && filterIndex === 3 }" class="wlIcon wlIcon-sheng" />
            <text :class="{ active: priceOrder === 2 && filterIndex === 3 }" class="wlIcon wlIcon-jiang" />
          </view>
        </view>
      </view>
      <view class="text-30 text-bold" @tap="handleListStyle">
        <text class="wlIcon wlIcon-listing-jf" v-if="listStyle === 'col-2-10'"></text>
        <text class="wlIcon wlIcon-liebiao" v-else></text>
      </view>
    </view>
    <scroll-view :style="{ height: (windowHeight - 40) + 'px' }" scroll-y enable-back-to-top
      @scrolltolower="handleLower">
      <mall-product v-if="dataList.length > 0" :dataList="dataList" :dataStyle="listStyle" />
      <view v-if="dataList.length === 0 && status !== 'loading'" class="empty-list">
        <text class="wanl-gray">{{ $t('mall.category.empty') }}</text>
      </view>
      <view class="load-more" v-if="dataList.length > 0">
        <text v-if="status === 'loading'">{{ $t('common.loading') }}</text>
        <text v-else-if="status === 'noMore'">{{ $t('common.noMore') }}</text>
      </view>
      <view :style="{ height: tabbarHeight + 'px' }" />
    </scroll-view>
  </view>
</template>

<script>
import { pullMallProductPage } from '@/features/mall/mall-gateway'
import MallProduct from '@/components/mall/mall-product.vue'
export default {
  components: { MallProduct },
  props: {
    tabbarHeight: { type: Number, default: 0 },
    windowHeight: { type: Number, default: 0 },
    tabId: { type: String, default: '' },
    option: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      filterIndex: 0,
      priceOrder: 0,
      listStyle: 'col-1-10',
      dataList: [],
      params: { search: '', sort: 'weigh', order: 'asc', page: 1, filter: {}, op: {}, type: 'goods' },
      last_page: 1,
      status: 'loading'
    }
  },
  mounted() {
    if (this.tabId === 'goods') {
      this.initialize(this.tabId)
    } else {
      this.initialize('page')
    }
  },
  methods: {
    initialize(type) {
      this.params.type = type === 'groups' ? 'groups' : 'goods'
      if (this.option.shop_id) {
        this.params.filter.shop_id = this.option.shop_id
        this.params.op.shop_id = 'in'
        if (type === 'news') {
          this.params.sort = 'createtime'
          this.params.order = 'desc'
        }
      }
      if (this.option.category_id) {
        this.params.filter.shop_category_id = this.option.category_id
        this.params.op.shop_category_id = '='
      }
      this.params.page = 1
      this.loadData()
    },
    async loadData() {
      try {
        this.status = 'loading'
        const res = await pullMallProductPage(this.params)
        const list = res.rows || []
        this.dataList = this.params.page === 1 ? list : this.dataList.concat(list)
        this.last_page = res.lastPage || 1
        this.status = this.params.page >= this.last_page ? 'noMore' : 'more'
      } catch (e) {
        this.status = 'noMore'
      }
    },
    handleBarTab(index) {
      this.filterIndex = index
      if (index === 0) { this.params.sort = 'weigh'; this.params.order = 'asc' }
      else if (index === 1) { this.params.sort = 'sales'; this.params.order = 'desc' }
      else if (index === 2) { this.params.sort = 'createtime'; this.params.order = 'desc' }
      else if (index === 3) {
        this.priceOrder = this.priceOrder === 1 ? 2 : 1
        this.params.sort = 'price'
        this.params.order = this.priceOrder === 1 ? 'asc' : 'desc'
      }
      this.params.page = 1
      this.loadData()
    },
    handleListStyle() {
      this.listStyle = this.listStyle === 'col-1-10' ? 'col-2-10' : 'col-1-10'
    },
    handleLower() {
      if (this.params.page < this.last_page) {
        this.params.page += 1
        this.loadData()
      }
    }
  },
  watch: {
    tabId(newVal, oldVal) {
      if (newVal === 'news' || newVal === 'groups') {
        this.dataList = []
        this.initialize(newVal)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-product-container {
  background-color: #f9f9f9;
  border-radius: 30rpx 30rpx 0 0;

  &__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    height: 40px;
    overflow: hidden;
    color: #555;

    .list {
      width: 75%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item {
        display: flex;
        align-items: center;

        &.active {
          color: #f40;
          font-weight: bold;
        }

        .box {
          color: #ccc;
          margin-top: 2rpx;
          margin-left: 8rpx;
          display: flex;
          flex-direction: column;
          line-height: 1;

          .active {
            color: #f40;
          }
        }
      }
    }
  }
}

.empty-list {
  display: flex;
  justify-content: center;
  padding: 200rpx 0;
  font-size: 28rpx;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 24rpx;
}
</style>