import { Component } from "react";
import { View, Image, Text } from "@tarojs/components";
import "./index.less";
import Taro from "@tarojs/taro";
import { getCalculatorList } from "../../../service/activity";
export default class Index extends Component {
  state = {
    inventoryList: [],
    page: 1, // 添加页码
    totalPages: 1, // 添加总页数
    loading: false, // 添加加载状态
  };
  componentDidMount() {
    this.getCalculatorList(true); // 获取捡漏清单
  }
  // 获取捡漏清单
  getCalculatorList = async (isRefresh) => {
    this.setState({ loading: true });
    const res = await getCalculatorList({
      page: this.state.page,
      page_size: 10,
    });
    this.setState({
      inventoryList: isRefresh
        ? res.jianlou_list
        : [...this.state.inventoryList, ...res.jianlou_list],
      totalPages: res.total_pages,
      loading: false,
    });
  }
  // 查看心愿列表
  toWishList = (id) => {
    Taro.navigateTo({
      url: `/pages/calculatorSub/calculatorWishList/index?id=${id}`,
    });
  };
  // 页面上拉触底
  onReachBottom = () => {
    const { page, totalPages, loading } = this.state;
    if (page < totalPages && !loading) {
      this.setState(
        (prevState) => ({ page: prevState.page + 1 }),
        () => this.getCalculatorList(false)
      );
    }
  };
  render() {
    return (
      <View className="index">
        {/* 列表 */}
        <View className="list-box">
          {this.state.inventoryList.length > 0 &&
            this.state.inventoryList.map((item, index) => (
              <View key={index} className="list-item">
                <View className="list-item-left">
                  <Image className="avatar" src={item.icon} />
                  <View className="list-item-left-text">
                    <Text className="name">{item.name}</Text>
                    <Text className="wishNum">
                      {item.activity_jianlou_cnt}次捡漏许愿
                    </Text>
                  </View>
                </View>
                <View
                  onClick={() => this.toWishList(item.id)}
                  className="list-item-right"
                >
                  查看
                </View>
              </View>
            ))}
        </View>
      </View>
    );
  }
}