<template>
  <div>
    <LayoutApp :show-back="true">
      <div class="filter">
        <div class="filter-tab">
          <div class="tab-item" :class="selectedType === 2 && 'selected-tab'" @click="pressType(2)">人气</div>
          <div class="tab-item middle" :class="selectedType === 1 && 'selected-tab'" @click="pressType(1)">
            <span>价格</span>
            <div :class="arrowImage"></div>
          </div>
          <div class="tab-item" :class="selectedType === 3 && 'selected-tab'" @click="pressType(3)">新品</div>
        </div>
        <div class="middle">
          <div class="screen middle" @click="goFilter()">
            <div class="screen-img"></div>
            筛选
          </div>
          <div class="search-img" @click="goSearch()"></div>
        </div>
      </div>
      <Scroll class="product-list"
              :options="scrollOptions"
              :data="productList.list"
              @pulling-up="onPullingUp">
        <ProductList :list="productList.list"></ProductList>
      </Scroll>
    </LayoutApp>
    <Filtrate ref="filtrate"></Filtrate>
  </div>
</template>
<script>
import ProductList from './components/productList';
import Filtrate from './filtrate';

import {Scroll} from 'cube-ui';
import {createNamespacedHelpers} from 'vuex';

const {mapState, mapActions} = createNamespacedHelpers('list');

export default {
  name: 'List',
  components: {
    ProductList,
    Scroll,
    Filtrate
  },
  data() {
    return {
      scrollOptions: {
        bounce: {
          top: false
        },
        pullUpLoad: true
      },
      fixed: false,
      selectedType: 2,
      priceDesc: true,
      arrowImage: '',
      listType: 1,
      type: 6
    };
  },
  deactivated: function() {
    this.initData();
  },
  activated: function() {
    this.changeArrow();
    let params = this.$route.query;

    if (Object.keys(params).length && params.listType) {
      this.listType = params.listType;
      delete params.listType;
    }
    if (Object.keys(params).length && params.type) {
      this.type = params.type;
    } else {
      params.type = 6;
    }
    !params.order && (params.order = 'sale_desc');
    this.fetchProductList({...params, isReset: true});
    this.fetchFilterData(params);
  },
  methods: {
    ...mapActions(['fetchProductList', 'fetchFilterData', 'initData']),

    // 上拉加载
    async onPullingUp() {
      await this.fetchProductList();
    },

    // 点击tab type, 0: 推荐, 1: 价格, 2: 人气, 3: 新品
    pressType(type) {
      if (type === this.selectedType && type !== 1) {
        return;
      }
      let params = {
        type: this.type,
        sort: this.filterParams.sort.join(','),
        brand: this.filterParams.brand.join(','), // 品牌id
        gender: this.filterParams.gender.join(','), // 性别
        size: this.filterParams.size.join(','), // 尺码id
      };

      if (this.listType === 4) {
        delete params.type;
      }

      this.selectedType = type;
      if (type === 1) {
        this.priceDesc = !this.priceDesc;
        params.order = !this.priceDesc ? 'p_desc' : 'p_asc';
      } else if (type === 2) {
        this.priceDesc = true;
        params.order = 'sale_desc';
      } else if (type === 3) {
        this.priceDesc = true;
        params.order = 'st_desc';
      }
      params.listType = this.listType;
      params.isReset = true;
      this.fetchProductList(params);
      this.changeArrow();
    },
    goSearch() {
      this.$router.push({
        name: 'Search',
      });
    },
    changeArrow() {
      this.arrowImage = (this.selectedType === 3 || this.selectedType === 2) ? 'price-arrow' :
        this.priceDesc ? 'desc-arrow' : 'asc-arrow';
    },
    goFilter() {
      this.$refs.filtrate.show();
    }
  },
  computed: {
    ...mapState(['productList', 'filterParams']),
  },
};
</script>

<style scoped>
  .filter {
    display: flex;
    height: 120px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 42px;
    padding-right: 38px;
  }

  .filter-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 32px;
    color: #999;
    text-align: center;
  }

  .selected-tab {
    color: #000;
    font-weight: bold;
  }

  .tab-item {
    margin-right: 60px;
  }

  .screen {
    font-size: 32px;
    color: #000;
    letter-spacing: 0;
    margin-right: 24px;
  }

  .middle {
    display: flex;
    align-items: center;
  }

  .asc-arrow {
    width: 40px;
    height: 40px;
    background: url(~statics/image/list/asc_arrow@3x.png) no-repeat;
    background-size: cover;
  }

  .desc-arrow {
    width: 40px;
    height: 40px;
    background: url(~statics/image/list/desc_arrow@3x.png) no-repeat;
    background-size: cover;
  }

  .price-arrow {
    width: 40px;
    height: 40px;
    background: url(~statics/image/list/price_arrow@3x.png) no-repeat;
    background-size: cover;
  }

  .screen-img {
    width: 40px;
    height: 40px;
    background: url(~statics/image/list/filter@3x.png) no-repeat;
    background-size: cover;
  }

  .product-list {
    background: #f5f5f5;
  }

  .search-img {
    width: 40px;
    height: 40px;
    margin-left: 20px;
    background: url(~statics/image/list/search_icon@3x.png) no-repeat;
    background-size: cover;
  }
</style>