<template>
  <view class="reward-home minscreen">
    <view class="fill-title-wrap">
      <view :class="['fill-title', 'home-titlebar', 'home-titlebar-fix']">
        <view
          v-for="item in listsArr"
          :key="item.key"
          :class="['fill-item', { white: currentList.key === item.key }]"
          @click="handleTabClick(item.key)"
        >
          <text>{{ item.title }}</text
          ><template v-if="item.order">
            <image
              v-if="currentList.key !== item.key"
              class="icon-sort"
              src="@/assets/icon/icon-sort.png"
            ></image>
            <image
              v-else-if="item.query.order === 'asc'"
              class="icon-sort"
              src="@/assets/icon/icon-sort-asc.png"
            ></image>
            <image
              v-else-if="item.query.order === 'desc'"
              class="icon-sort"
              src="@/assets/icon/icon-sort-desc.png"
            ></image>
          </template>
        </view>
      </view>
    </view>
    <view
      v-if="currentList.list.length === 0 && currentList.loading"
      class="base-list"
    >
      <list-item v-for="item in 10" :key="item" class="base-list-item">
      </list-item>
    </view>
    <view v-else class="base-list">
      <list-item
        v-for="item in currentList.list"
        :key="item.id"
        :item="item"
        class="base-list-item"
        @click="handleDetail(item.id)"
      >
      </list-item>
    </view>
    <view v-if="!currentList.loading && !currentList.hasMore" class="footer">
      <view class="info">到底啦~ (￣▽￣)”</view>
    </view>
  </view>
</template>

<script>
import api from "@/lib/api/api";
import listItem from "@/components/list-item/list-item.vue";

function resetLists() {
  return {
    sort: {
      title: "默认",
      key: "sort",
      hasMore: true,
      loading: false,
      order: false,
      query: {
        page: 1,
        size: 20,
        sort: "sort", // 排序字段:默认：sort倒序；热销：销量倒序sell_count；新品：创建时间倒序create_time；价格：price升降序
        order: "desc",
      },
      list: [],
    },
    sellCount: {
      title: "热销",
      key: "sellCount",
      hasMore: true,
      loading: false,
      order: false,
      query: {
        page: 1,
        size: 20,
        sort: "sell_count", // 排序字段:默认：sort倒序；热销：销量倒序sell_count；新品：创建时间倒序create_time；价格：price升降序
        order: "desc",
      },
      list: [],
    },
    createTime: {
      title: "新品",
      key: "createTime",
      hasMore: true,
      loading: false,
      order: false,
      query: {
        page: 1,
        size: 20,
        sort: "create_time", // 排序字段:默认：sort倒序；热销：销量倒序sell_count；新品：创建时间倒序create_time；价格：price升降序
        order: "desc",
      },
      list: [],
    },
    price: {
      title: "价格",
      key: "price",
      hasMore: true,
      loading: false,
      order: true,
      query: {
        page: 1,
        size: 20,
        sort: "price", // 排序字段:默认：sort倒序；热销：销量倒序sell_count；新品：创建时间倒序create_time；价格：price升降序
        order: "desc",
      },
      list: [],
    },
  };
}

export default {
  name: "PageReward",
  components: {
    listItem,
  },
  data() {
    return {
      lists: resetLists(),
      currentTab: "sort",
      loading: false,
    };
  },
  computed: {
    currentList() {
      return this.lists[this.currentTab];
    },
    listsArr() {
      return Object.keys(this.lists).map((key) => this.lists[key]);
    },
  },
  watch: {},
  onLoad() {
    uni.showLoading({
      title: "加载中",
    });
    this.loadList(this.currentList).then(() => {
      uni.hideLoading();
    });
  },
  onShareAppMessage() {
    return {
      title: "各种爆款手办/盲盒，还能0元抽热款～快来试试你的欧气！",
      imageUrl:
        "https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/45bfb688e6e9dba557f64fd052e850cc.png",
      path: "/pages/reward/index",
    };
  },
  onShareTimeline() {
    return {
      title: "各种爆款手办/盲盒，还能0元抽热款～快来试试你的欧气！",
      imageUrl:
        "https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/45bfb688e6e9dba557f64fd052e850cc.png",
      path: "/pages/reward/index",
    };
  },
  async onPullDownRefresh() {
    this.lists = resetLists();
    await this.loadList(this.currentList);
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    if (!this.currentList.loading && this.currentList.hasMore) {
      this.loadList(this.currentList);
    }
  },
  methods: {
    handleTabClick(key) {
      const item = this.lists[key];
      if (!item) return;
      if (this.currentTab === key) {
        if (!item.order) {
          return;
        }
        item.hasMore = true;
        item.query.page = 1;
        item.query.order = item.query.order === "desc" ? "asc" : "desc";
        return this.loadList(item);
      }
      this.currentTab = key;
      if (item.list.length === 0 && item.hasMore) {
        this.loadList(item);
      }
    },
    async loadList(item) {
      item.loading = true;
      try {
        const params = item.query;
        if (item.query.page > 1 && item.list && item.list.length) {
          params.lastId = item.list[item.list.length - 1].id;
        } else {
          params.lastId = 0;
        }
        // const data = await api.homeList(item.query);
        const data = await api.getYfsList(item.query);
        if (item.query.page === 1) {
          item.list = data.data;
        } else {
          item.list = item.list.concat(data.data);
        }

        item.hasMore = item.query.page * item.query.size < data.total;
        item.query.page++;
      } catch (e) {
        console.log(e);
      }
      item.loading = false;
    },
    handleDetail(id) {
      uni.navigateTo({
        url: `./detail?id=${id}`,
      });
    },
  },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
