<template>
  <div>
    <LayoutApp :show-back="true" :title="title" class="list-wrapper">
      <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" @click="pressType(1)">
            <span :class="selectedType === 1 && 'selected-tab'">价格</span>
            <div :class="arrowClass"></div>
          </div>
        </div>
        <div class="middle">
          <div class="screen middle" @click="goFilter()">
            <div class="screen-img"></div>
            筛选
          </div>
        </div>
      </div>

      <div class="filter-sub">
        <div class="filter-sub-tab">
          <div class="tab-sub-group-item" :class="activeClass('size')" @click="pressFilterType('size')">
            <span>{{this.selectedFilterNameParams.size.toString().length ? this.selectedFilterNameParams.size.toString(): '尺码'}}</span>
            <div :class="foldClass('size')"></div>
          </div>

          <div class="tab-sub-group-item" :class="activeClass('brand')" @click="pressFilterType('brand')">
            <span>{{this.selectedFilterNameParams.brand.toString().length ? this.selectedFilterNameParams.brand.toString(): '品牌'}}</span>
            <div :class="foldClass('brand')"></div>
          </div>

          <div class="tab-sub-group-item" :class="activeClass('gender')" @click="pressFilterType('gender')">
            <span>{{this.selectedFilterNameParams.gender.toString().length ? this.selectedFilterNameParams.gender.toString(): '性别'}}</span>
            <div :class="foldClass('gender')"></div>
          </div>
        </div>
      </div>

      <LayoutScroll ref="scroll" class="list-scroll-bg" v-if="skupList.list.length"
        @scroll="onScroll"
        @scroll-end="scrollEndHandler"
        @pulling-up="onPullingUp"
      >
        <SecondList ref="second" :list="skupList.list" :yasParams="yasParams"></SecondList>
      </LayoutScroll>

      <UfoNoItem v-if="isShowEmpty" class="empty" :tip="`暂无数据`"></UfoNoItem>
    </LayoutApp>
    <Filtrate ref="filtrate" :yasParams="yasParams"></Filtrate>
    <FiltrateList ref="filtrateList" :list="seletedFilterList"></FiltrateList>
  </div>
</template>

<script>
import SecondList from './components/second-list';
import Filtrate from './components/filtrate';
import FiltrateList from './components/filtrate-list';
import UfoNoItem from '../../components/ufo-no-item';

import { createNamespacedHelpers } from 'vuex';

const { mapState, mapActions } = createNamespacedHelpers('second/skupList');

export default {
  name: 'UfoSecondListPage',
  components: {
    SecondList,
    UfoNoItem,
    Filtrate,
    FiltrateList
  },
  data() {
    return {
      title: '',
      isFetch: true,
      scrollY: 0,
      isShowEmpty: false,
      yasParams: { P_NAME: 'XY_UFOSecondList', TYPE_ID: 5, P_PARAM: [].toString() },
      selectedType: 2, // tab类型高亮，1价格，2推荐
      priceDesc: false,

      filterSelectArr: [], // 'size'尺码，'brand'品牌，'gender'性别
      foldStatus: false,
      lastFilterFlag: '',

      skupList: {
        showErrorPage: false,
        isFetching: false,
        error: null,
        page: 0, // 当前页
        page_size: 10, // 每页数量
        page_total: 0, // 总共多少页
        total: 0, // 总共多少条
        endReached: false, // 到达底部
        list: [], // 商品列表
        isEmpty: false,
      },
      searchParams: {
        order: '', // 指定排序
        productPool: null, // 商品池id
        maxSort: null, // 品类id
        brand: null, // 品牌id
        gender: null, // 性别
        size: null, // 尺码id
        price: null, // 价格
        preSale_flag: null, // 新旧程度
        limit: null, // 每页记录数
        page: null, // 当前页号
      },

      filterParams: { // 接口返回的数据
        maxSort: [], // 品类列表
        preSale_flag: [], // 新旧程度
        brand: [], // 品牌列表
        gender: [], // 性别列表
        size: [], // 尺码列表
        price: [], // 价格列表
      },
      seletedFilterParams: { // 选中的数据
        maxSort: [],
        preSale_flag: [],
        brand: [],
        gender: [],
        size: [],
        price: [],
      },
      selectedFilterNameParams: {
        maxSort: [],
        preSale_flag: [],
        brand: [],
        gender: [],
        size: [],
        price: [],
      },

      seletedFilterList: [], // 下拉框显示列表
    };
  },
  computed: {
    ...mapState(['filterData']),
    arrowClass() {
      return [
        this.selectedType === 1 ? this.priceDesc ? 'asc-arrow' : 'desc-arrow' : 'price-arrow'
      ];
    },
    activeClass: (vm) => (name) => {
      return [
        vm.filterSelectArr.includes(name) && 'selected-sub-tab'
      ];
    },
    foldClass: (vm) => (name) => {
      let isCurrent = vm.lastFilterFlag === name ? true : false;

      return [
        vm.filterSelectArr.includes(name) ? isCurrent ? vm.foldStatus ? 'white-up-arrow' : 'white-down-arrow' : 'white-down-arrow' : 'black-down-arrow'
      ];
    },
  },
  methods: {
    ...mapActions(['fetchSecondSkupList', 'fetchSecondFilterData']),

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

    // 查询商品列表
    async fetchList(params) {
      let searchParams = this.searchParams;

      let list = this.skupList;
      let limit = list.page_size;
      let isReset = false;

      if (params && params.isReset) {
        isReset = true;
        delete params.isReset;
      }

      if (!isReset && (list.endReached || (!list.endReached && list.page_total === 1))) {
        return;
      }
      if (typeof params === 'object' && Object.keys(params)) {
        searchParams = Object.assign({...searchParams}, params);
        this.searchParams = searchParams;
      }

      let page = isReset ? 1 : (list.page + 1);

      for (let key in searchParams) {
        if (!searchParams[key]) {
          delete searchParams[key];
        }
      }

      searchParams.preSale_flag = 5; // 只获取全新瑕疵商品

      let result = await this.fetchSecondSkupList({
        ...searchParams,
        page,
        limit
      });
      let {data} = result;

      if (result.code === 200) {
        data.endReached = (data.page === data.page_total) && (data.page_size !== 1) || !data.page_total;

        if (data && !data.total) {
          this.isShowEmpty = true;
        } else {
          this.isShowEmpty = false;
        }

      } else {
        this.isShowEmpty = true;
      }

      if (typeof data === 'object' && Object.keys(data).length) {
        for (let key in data) {
          if (key === 'skup_list') {
            list.list = data.page > 1 ? list.list.concat(data.skup_list) : data.skup_list;
          } else {
            list[key] = data[key];
          }
        }

        list.list && list.list.length ? list.isEmpty = false : list.isEmpty = true;

        this.skupList = list;
      }
    },

    // 更新数据
    async updateList() {
      let params = {
        maxSort: this.seletedFilterParams.maxSort.join(','),
        brand: this.seletedFilterParams.brand.join(','),
        gender: this.seletedFilterParams.gender.join(','),
        size: this.seletedFilterParams.size.join(','),
        preSale_flag: this.seletedFilterParams.preSale_flag.join(','),
        price: this.seletedFilterParams.price.join(','),
      };

      params.isReset = true;
      await this.fetchList(params);

      this.$refs.scroll.scrollTo(0, 0, 300);
    },

    // 点击Tab, 1:价格，2:推荐
    async pressType(flag) {
      if (flag === this.selectedType && flag !== 1) {
        return;
      }

      let filterParams = this.seletedFilterParams;

      let params = {
        maxSort: filterParams.maxSort.join(','), // 品类id
        brand: filterParams.brand.join(','), // 品牌id
        gender: filterParams.gender.join(','), // 性别
        size: filterParams.size.join(','), // 尺码id
        preSale_flag: filterParams.preSale_flag.join(','), // 新旧程度
        price: filterParams.price.join(','), // 价格
      };

      for (let i in params) {
        if (!params[i]) {
          delete params[i];
        }
      }

      if (flag === 1) {
        this.setYasParam({tab: {index: 2, name: '价格'}});
        this.priceDesc = !this.priceDesc;
        params.order = this.priceDesc ? 'price:asc' : 'price:desc';
      } else if (flag === 2) {
        this.setYasParam({tab: {index: 5, name: '推荐'}});
        this.priceDesc = true;
        params.order = 'id:desc';
      }

      this.selectedType = flag;

      params.isReset = true;
      await this.fetchList(params);

      this.yasTab();

      this.$refs.scroll.scrollTo(0, 0, 300);
      this.yasShowPage();
    },

    // 点击, 'size'尺码，'brand'品牌，'gender'性别
    async pressFilterType(flag) {
      let filterArray = this.filterSelectArr;

      if (flag === 'size') {
        this.seletedFilterList = this.filterParams.size;
      } else if (flag === 'brand') {
        this.seletedFilterList = this.filterParams.brand;
      } else if (flag === 'gender') {
        this.seletedFilterList = this.filterParams.gender;
      }

      this.foldStatus = this.lastFilterFlag === flag ? !this.foldStatus : true;

      let temp = this.seletedFilterParams[flag];

      if (temp.length === 0) {
        filterArray.push(flag);
      }

      this.filterSelectArr = filterArray;

      // 后面三个tab点击但是未选择清除一下状态
      if (this.lastFilterFlag !== flag) {
        this.clearStatus(flag);
      }

      this.lastFilterFlag = flag;

      let tempIdArr = this.seletedFilterParams[flag];
      let tempNameArr = this.selectedFilterNameParams[flag];

      if (this.foldStatus) {
        this.$refs.filtrateList.show();
        this.$refs.filtrateList.setFilterList({id: tempIdArr, name: tempNameArr});
      } else {
        this.$refs.filtrateList.hide();
      }
    },

    clearStatus(flag) {
      let params = this.seletedFilterParams;
      let filterArray = this.filterSelectArr;

      for (let key in params) {
        if (key !== flag) {
          if (filterArray.includes(key) && params[key].length === 0) {
            filterArray = filterArray.filter(item => item !== key);
          }
        }
      }
      this.filterSelectArr = filterArray;
    },

    updateFilterParams(params) {
      // 更新一下fold状态
      this.foldStatus = false;

      if (Object.keys(params).length === 0) { // 点击蒙层背景什么都没做，传个{}判断
        return;
      }

      this.seletedFilterParams[this.lastFilterFlag] = params.id;
      this.selectedFilterNameParams[this.lastFilterFlag] = params.name;

      let idArray = params.id || [];

      if (idArray.length === 0) {
        // 下拉框未选中，清除选中状态
        let flag = this.lastFilterFlag;
        let filterArray = this.filterSelectArr;

        if (filterArray.includes(flag)) {
          filterArray = filterArray.filter(item => item !== flag);
        }
        this.filterSelectArr = filterArray;

      } else {
        let flag = this.lastFilterFlag;
        let filterArray = this.filterSelectArr;

        if (!filterArray.includes(flag)) {
          filterArray.push(flag);
        }
        this.filterSelectArr = filterArray;
      }

      // 重新获取数据
      this.updateList();
    },

    setFilterParams(params) {
      this.seletedFilterParams = params.id;
      this.selectedFilterNameParams = params.name;

      let idFilterParams = params.id;

      let filterArray = [];

      for (let key in idFilterParams) {
        if (key !== 'maxSort' || key !== 'preSale_flag') {
          if (idFilterParams[key].length > 0) {
            filterArray.push(key);
          }
        }
      }
      this.filterSelectArr = filterArray;

      // 重新获取数据
      this.updateList();
    },

    onScroll({ y }) {
      this.scrollY = -y;
    },
    scrollEndHandler({ y }) {
      this.scrollY = -y;
      this.$refs.second.yasShowEvent(-y);
    },

    goFilter() {
      this.yasTab(true);
      this.$refs.filtrate.show();
      this.$refs.filtrate.setFilterParam(this.seletedFilterParams);
      this.$refs.filtrate.setTempParam(this.selectedFilterNameParams);

      this.foldStatus = false;
      this.$refs.filtrateList.hide();
    },

    yasShowPage() {
      let { total, list } = this.skupList;
      let PRD_LIST = [];

      for (let item of list) {
        PRD_LIST.push(item.product_id);
      }
      PRD_LIST = PRD_LIST.toString();
      this.$store.dispatch('reportYas', {
        params: {
          param: { ...this.yasParams, TOTAL: total, PRD_LIST },
          appop: 'XY_UFO_PRD_LIST_L'
        }
      });
    },
    setYasParam: function({tab}) {
      if (tab && typeof tab === 'object' && Object.keys(tab).length) {
        this.yasParams.TAB_ID = tab.index;
        this.yasParams.TAB_NAME = tab.name;
      }
    },
    yasTab(isFilter = false) {
      let param = {...this.yasParams};

      if (isFilter) {
        param.TAB_ID = 4;
        param.TAB_NAME = '筛选';
      }

      this.$store.dispatch('reportYas', {
        params: {
          param,
          appop: 'XY_UFO_PRD_LIST_TAB_C'
        }
      });
    }
  },
  beforeRouteLeave(to, from, next) {
    this.isFetch = to.name !== 'SecondProductDetail';
    next();
  },
  async activated() {
    let productPool = this.$route.query.productPool ? this.$route.query.productPool : '';

    if (this.isFetch) {
      this.$refs.filtrate.hide();
      Object.assign(this.$data, this.$options.data());

      let params = {
        productPool: productPool,
        order: 'id:desc'
      };

      await this.fetchList({...params, isReset: true});

      // 获取筛选项
      let filterData = this.filterData;

      let filterParams = this.filterParams;
      let selectIdParams = this.seletedFilterParams;
      let selectNameParams = this.selectedFilterNameParams;

      for (let item of filterData) {
        if (item.itemList) {
          filterParams[item.filterId] = item.itemList;
        }
      }

      // 若筛选只有一个结果，默认选中，先把值存储起来
      for (let item of filterData) {
        if (item.itemList && item.itemList.length === 1) {
          selectIdParams[item.filterId].push(item.itemList[0].itemId);
          selectNameParams[item.filterId].push(item.itemList[0].itemName);
        }
      }

      this.filterParams = filterParams;
      this.seletedFilterParams = selectIdParams;
      this.selectedFilterNameParams = selectNameParams;

      this.setYasParam({tab: {index: 5, name: '推荐'}});
    } else {
      this.scrollY && this.$refs.scroll.scrollTo(this.scrollY);
    }

    this.$refs.second.yasShowEvent(this.scrollY);
    this.yasShowPage();

    this.title = this.$route.query.title ? this.$route.query.title : '';
  },
  deactivated() {
    this.$refs.filtrate.hide();
    this.$refs.filtrateList.hide();
  },
};
</script>

<style lang="scss" scoped>
.list-wrapper {
  /deep/ .layout-context {
    display: flex;
    flex-direction: column;
  }

  .empty {
    flex: 1;
  }
}

.list-scroll-bg {
  background-color: #f5f5f5;
  flex: 1;
}

.filter {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 50px;
  padding-right: 24px;
  background: #fff;
}

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

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

.filter-sub {
  width: 100%;
  height: 86px;
  display: flex;
  padding-left: 24px;
  padding-right: 24px;
  background: #fff;
}

.filter-sub-tab {
  display: flex;
  flex-direction: row;
}

.tab-sub-group-item {
  background: #f5f5f5;
  font-size: 24px;
  color: #000;
  border-radius: 8px;
  margin-right: 15px;
  height: 56px;
  width: 128px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  span {
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    max-width: 80px;
  }
}

.selected-sub-tab {
  color: #fff;
  background: #08304B;
}

.black-down-arrow {
  width: 40px;
  height: 40px;
  background: url(~statics/image/list/black_down@3x.png) no-repeat;
  background-size: contain;
}

.white-down-arrow {
  width: 40px;
  height: 40px;
  background: url(~statics/image/list/white_down@3x.png) no-repeat;
  background-size: contain;
}

.white-up-arrow {
  width: 40px;
  height: 40px;
  background: url(~statics/image/list/white_up@3x.png) no-repeat;
  background-size: contain;
}

</style>