<!--
 * @description: 同尺寸二手列表页
 * @fileName: filter-list.vue
 * @author: huzhiming
 * @date: 2019-11-22 15:01:07
 * @后台人员:
 * @version: v1.0.0
 * @path: 页面访问路径及参数说明 http://xianyu.yohobuy.com/xianyu/second/product/123/selllist.html
!-->
<template>
<section>
  <LayoutApp :show-back="true" :title="computePageTitle" class="second-filter-list-wrap">
    <!-- {{ queryOptions }} -->
    <div class="filter">
      <div class="filter-tab">
        <div class="tab-item" :class="{'selected-tab': queryOptions.sort==null}"
             @click.stop="handleSortChange({ type: 'tuijian', sort: null})"
        >推荐</div>
        <div class="tab-item middle"
             @click.stop="handleSortChange({ type: 'price', sort: null })"
        >
          <span :class="{'selected-tab': queryOptions.sort!=null}">价格</span>
          <div class="price-arrow"
               :class="{
              'asc-arrow': queryOptions.sort==='p_asc',
              'desc-arrow': queryOptions.sort==='p_desc'
            }"
          ></div>
        </div>
      </div>
      <div class="middle">
        <div class="screen middle" @click="handleSortChange({ type: 'shaixuan', sort: null});filterModalVisible=true">
          <div class="screen-img"></div>
          筛选
        </div>
        <!-- <div class="search-img" @click="goSearch()"></div> -->
      </div>
    </div>
    <LayoutScroll
      ref="scroll"
      @pulling-up="fetchList(isMore)"
      @scroll-end="scrollEndHandler"
      :loading="{noMore: !isMore}"
      v-if="productList.length"
      class="product-list"
    >
      <SecondList ref="second" :list="productList" :yasParams="listPasParams"></SecondList>
    </LayoutScroll>
    <!-- <EmptyList class="empty-wrapper product-list" :tip="`暂无数据`" v-show="productList.isEmpty" /> -->
  </LayoutApp>
  <FilterList
    :visible.sync="filterModalVisible"
    :storage_id="storage_id"
    @submit="handleFilterSubmit"
  ></FilterList>
</section>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import SecondList from './components/sell-second-list';
import FilterList from './components/filter-list';
import EmptyList from '@/components/ufo-no-item';

export default {
  name: 'UfoSecondSellListPage',
  mixins: [],
  props: {
    productId: Number,
    storage_id: Number,
  },

  // 服务端渲染函数
  async asyncData() {
    return {};
  },
  data() {
    return {
      filterModalVisible: false, // 筛选modal控件 显示/隐藏

      queryOptions: {
        second_type: null, // 种类排序：5:全新瑕疵 6:二手
        sort: null // 价格升降序：p_asc or p_desc
      }
    };
  },
  created() {
  },
  mounted() {
  },
  async activated() {
    await this.fetchSameSizeSecondList({ isReset: true, storage_id: this.storage_id });

    /*
     * @ description: 设置pageTitle，因为接口未返回产品名称，从已有商品详情页state获取
     * @ author: huzhiming
     * @ date: 2019-11-25 17:48:41
     * @ version: v1.0.0
    */
    this.getSelectedTradeProduct({
      productId: this.$route.query.pid,
      storageId: this.storage_id
    });

    this.$refs.second.yasShowEvent(0);
    this.yasShowPage();
  },
  deactivated() {
  },
  destroyed() {
  },
  methods: {
    ...mapActions('second', ['fetchSameSizeSecondList']),
    ...mapActions('product', ['getSelectedTradeProduct']),

    /*
     * @ description: 拉取分页数据
     * @ author: huzhiming
     * @ date: 2019-11-25 14:31:33
     * @ version: v1.0.0
    */
    async fetchList(isMore) {
      if (this.isMore) {
        await this.fetchSameSizeSecondList({ isReset: false, storage_id: this.storage_id });
      }
    },

    /*
     * @ description: 点击推荐/价格/筛选，改变查询参数，处理页面交互 & 拉取最新列表数据
     * @ author: huzhiming
     * @ date: 2019-11-25 14:29:09
     * @ version: v1.0.0
    */
    handleSortChange({ type = null, sort = null }) {
      if (type === null) {
        return false;
      }

      let queryOptions = this.queryOptions;

      if (type === 'tuijian') {
        queryOptions.sort = null;
      }
      if (type === 'price') {
        queryOptions.sort = (queryOptions.sort === null || queryOptions.sort === 'p_asc') ? 'p_desc' : 'p_asc';
      }
      if (type === 'shaixuanConfirm') {
        queryOptions.second_type = sort;
      }

      this.$set(this.queryOptions, 'sort', queryOptions.sort);
      this.fetchSameSizeSecondList({
        isReset: true,
        storage_id: this.storage_id,
        second_type: queryOptions.second_type,
        sort: queryOptions.sort
      });

      /*
        二手商品列表页-顶部TAB切换按钮点击
        新增二手、全新瑕疵商品列表页TAB点击：
        1.P_NAME：页面名称，XY_UFO...
        2.TYPE_ID：列表页入口类型，1-搜索结果页，2-系列，3-品牌，4-商品池 5-商品详情；
        3.P_PARAM：条件值，搜索关键词，系列ID，品牌ID，商品池ID；
        4.TAB_ID：tab切id，1-人气，2-价格，3-新品，4-筛选；5-推荐
        5.TAB_NAME：tab切名称，人气，价格，新品，筛选；推荐
       */
      let yasParam = {
        TAB_ID: null,
        TAB_NAME: null,
      };

      switch (type) {
        case 'price':
          yasParam.TAB_ID = 2;
          yasParam.TAB_NAME = '价格';
          break;
        case 'shaixuan':
          yasParam.TAB_ID = 4;
          yasParam.TAB_NAME = '筛选';
          break;
        default:
          yasParam.TAB_ID = 5;
          yasParam.TAB_NAME = '推荐';
          break;
      }

      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_PRD_LIST_TAB_C',
          param: {
            P_NAME: `XY_UFO${this.$route.name}`,
            TYPE_ID: 5,
            P_PARAM: this.$route.query.pid,
            ...yasParam
          },
        }
      });
    },
    handleFilterSubmit(selected) {
      const { second_type } = selected;

      /*
        新增二手、全新瑕疵商品列表页筛选点击：
        1.TYPE_ID：列表类型，1-搜索结果页，2-系列，3-品牌，4-商品池；5-商品详情；
        2.P_PARAM：条件值，搜索关键词，系列ID，品牌ID，商品池ID；
        3.TAB_ID：tab切id，1-人气，2-价格，3-新品 4-筛选；5-推荐；
        4.TAB_NAME：tab切名称，人气，价格，新品；
        5.ENT_PARAMS：选中条件的集合，包含ENT_KEY，ENT_ID两个参数；
        6.ENT_NAME：筛选条件的名称
        7.ENT_ID：筛选条件的值；
      */

      let yasParam = {
        P_NAME: `XY_UFO${this.$route.name}`,
        TYPE_ID: 5,
        P_PARAM: this.$route.query.pid,
        TAB_ID: null,
        TAB_NAME: null,
        ENT_PARAMS: { second_type: second_type },
        ENT_NAME: 'second_type',
        ENT_ID: second_type,
      };

      if (this.queryOptions.sort === null) {
        yasParam.TAB_ID = 5;
        yasParam.TAB_NAME = '推荐';
      } else {
        yasParam.TAB_ID = 2;
        yasParam.TAB_NAME = '价格';
      }

      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_PRD_LIST_SCREEN_C',
          param: { ...yasParam },
        }
      });
      this.handleSortChange({ type: 'shaixuanConfirm', sort: second_type });
      this.$refs.scroll.scrollTo(0, 0, 300);
    },

    scrollEndHandler({ y }) {
      let height = -y;

      this.$refs.second.yasShowEvent(height);
    },

    yasShowPage() {
      /*
        新增二手、全新瑕疵商品列表事件：
        P_NAME: 页面名称，XY_UFO...
        1.TYPE_ID：列表页入口类型，1-搜索结果页，2-系列，3-品牌，4-商品池；5-二手；
        2.P_PARAM：条件值，搜索关键词，系列ID，品牌ID，商品池ID；
        3.TOTAL：列表页返回的全部商品个数，无结果返回0；
        4.PRD_LIST：默认加载的商品id，以英文··逗号分隔；
        5.TAB_ID：tab切id，2-价格，4-推荐；
        6.TAB_NAME：tab切名称，价格、推荐；
      */
      let skupList = this.productList.map(item => item.skup);

      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_PRD_LIST_L',
          param: {
            P_NAME: `XY_UFO${this.$route.name}`,
            TYPE_ID: 5,
            P_PARAM: this.$route.query.pid,
            TOTAL: this.total,
            PRD_LIST: skupList.join(),
            TAB_ID: this.queryOptions.sort === null ? 5 : 2,
            TAB_NAME: this.queryOptions.sort === null ? '推荐' : '价格'
          },
        }
      });
    },
  },
  computed: {
    ...mapState('second', ['productList', 'isMore', 'total']),

    // 因为接口未返回pageTitle产品名称，从已有商品详情页state获取
    ...mapState('product', ['selectedProductInfo']),
    computePageTitle() {
      return this.selectedProductInfo.product.product_name;
    },
    listPasParams() {
      /*
        1.P_NAME：页面名称，XY_UFO...
        2.TYPE_ID：列表页入口类型，1-搜索结果页，2-系列，3-品牌，4-商品池；5-二手；
        3.P_PARAM：列表入口页面参数，搜索关键词，系列ID，品牌ID，商品池ID；
        4.TAB_ID：tab切id，2-价格，4-推荐；
        5.TAB_NAME：tab切名称，价格，推荐；
        6.I_INDEX：曝光顺序；
        7.PRD_ID：商品id；
        8.PRD_TYPE：1-二手，2-全新瑕疵；
      */
      let _yasParams = {
        P_NAME: `XY_UFO${this.$route.name}`,
        TYPE_ID: 5,
        P_PARAM: this.$route.query.pid,
        TAB_ID: null,
        TAB_NAME: null,
        I_INDEX: null,
        PRD_ID: this.$route.query.pid,
        PRD_TYPE: this.queryOptions.second_type === 5 ? 2 : 1
      };

      if (this.queryOptions.sort === null) {
        _yasParams.TAB_ID = 5;
        _yasParams.TAB_NAME = '推荐';
      } else {
        _yasParams.TAB_ID = 2;
        _yasParams.TAB_NAME = '价格';
      }

      return _yasParams;
    }
  },
  watch: {},
  components: {
    SecondList,
    FilterList,
    EmptyList
  }
};
</script>

/* 定义局部样式,添加外围容器，scss嵌套尽量不要超过三层，会影响查找器性能 */
<style rel='stylesheet/scss' lang='scss' scoped>
.filter {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 42px;
  padding-right: 38px;
  z-index: 999;
  background: #fff;
  position: absolute;
}

.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;
}

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

.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;
}

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

.product-list {
  width: 100%;
  background: #f5f5f5;
  padding-top: 120px;
  box-sizing: border-box;
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
}

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

.empty-wrapper {
  margin: auto 0;
  position: absolute;
  top: 0;
  bottom: 0;
}
</style>