<template>
  <LayoutApp :show-back="true" title="二手" class="list-wrapper">
    <LayoutScroll
      ref="scrolllist"
      @scroll-end="scrollEndHandler"
      @pulling-up="fetchSkupList(isMore)"
      v-if="skupList.list.length"
      class="list-scroll-bg"
    >
      <SecondList ref="second" :list="skupList.list" :yasParams="yasParams"></SecondList>
    </LayoutScroll>

    <UfoNoItem class="empty" :tip="`暂无数据`" v-else></UfoNoItem>
  </LayoutApp>
</template>

<script>
import SecondList from "./components/second-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
  },
  data() {
    return {
      yasParams: { P_NAME: 'XY_UFOSecondList',
                  TYPE_ID: 5,
                  TAB_ID: '',
                  TAB_NAME: '',
                  P_PARAM: [].toString()
      }
    }
  },
  computed: {
    ...mapState(["skupList", "isMore"])
  },
  methods: {
    ...mapActions(["fetchSecondSkupList"]),

    async fetchSkupList(isMore) {
      if (this.isMore) {
        await this.fetchSecondSkupList({ isReset: false });
      }
    },

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

    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'
        }
      });
    },
  },
  activated: async function() {
    await this.fetchSecondSkupList({ isReset: true });

    this.$refs.second.yasShowEvent(0);
    this.yasShowPage();
  }
};
</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;
}
</style>