import { Component } from "react";
import { View, Input } from "@tarojs/components";
import { AtTabs, AtIcon } from "taro-ui";
import "./index.less";
import Taro from "@tarojs/taro";
import ProductList from "../../../components/index/ProductList";
import {
  getBrowseShopProductList,
  addShopProduct,
  getAllTags,
} from "../../../service";
import { getShareContent } from "../../../common/share";
export default class Index extends Component {
  state = {
    current: 0, // 当前选中的标签页索引
    tabList: [], // 标签页列表
    productList: [], // 商品列表
    page: 1, //页数
    loading: false, //加载状态
    totalPages: 1, // 添加总页数
    tabList: [], // 所有闲鱼tags
    value: "", // 搜索
  };
  handleClick(value) {
    this.setState(
      {
        current: value,
        page: 1,
        value: "",
      },
      () => {
        Taro.pageScrollTo({
          scrollTop: 0,
          duration: 300,
        });
        this.getBrowseShopProductList(true);
      }
    );
  }
  componentDidMount() {
    this.getAllTags();
  }
  // 获取商品列表
  getBrowseShopProductList = async (isAdd = false) => {
    const { page } = this.state;
    this.setState({ loading: true });

    const res = await getBrowseShopProductList({
      tag_name: this.state.tabList[this.state.current].title,
      page,
      page_size: 10,
      search_name: this.state.value,
    });

    this.setState((prevState) => ({
      productList: isAdd
        ? res.goods_list
        : [...prevState.productList, ...res.goods_list],
      totalPages: res.total_pages,
      loading: false,
    }));
  };
  // 获取所有闲鱼tags
  getAllTags = async () => {
    let res = await getAllTags();
    res = res.map((item, index) => ({
      title: item.name,
    }));
    this.setState(
      {
        tabList: res,
      },
      () => {
        this.getBrowseShopProductList(true);
      }
    );
  };
  // 输入
  handleChange = (e) => {
    this.setState({ value: e.target.value });
  };
  // 搜索
  handleSearch = () => {
    this.getBrowseShopProductList(true);
  };
  // 添加商品
  onAddProduct = (productId, index) => {
    addShopProduct({
      goods_ids: [productId],
    }).then((res) => {
      if (res.success === true) {
        this.setState((prevState) => {
          const newList = [...prevState.productList];
          newList[index] = { ...newList[index], is_collected: true };
          return { productList: newList };
        });
        Taro.showToast({
          title: "添加成功",
          icon: "none",
        });
      }
    });
  };
  // 配置分享内容
  onShareAppMessage() {
    return getShareContent();
  }
  // 页面上拉触底
  onReachBottom = () => {
    const { page, totalPages, loading } = this.state;
    if (page < totalPages && !loading) {
      this.setState(
        (prevState) => ({ page: prevState.page + 1 }),
        () => this.getBrowseShopProductList()
      );
    }
  };
  render() {
    return (
      <View className="index">
        {/* 顶部固定 */}
        <View className="top-fixed">
          <AtTabs
            scroll
            current={this.state.current}
            tabList={this.state.tabList}
            onClick={this.handleClick.bind(this)}
          ></AtTabs>
          {/* 搜索 */}
          <View className="search-container">
            <View className="search-bar">
              <AtIcon
                className="search-icon"
                value="search"
                size="20"
                color="#ACACAC"
              ></AtIcon>
              <Input
                type="text"
                className="search-input"
                placeholder=""
                value={this.state.value}
                onInput={this.handleChange}
              />
              <View onClick={this.handleSearch} className="search-button">
                搜索
              </View>
            </View>
          </View>
        </View>
        {/* 商品列表 */}
        <ProductList
          loading={this.state.loading}
          productList={this.state.productList}
          isProductClassify={true}
          onAddProduct={(productId, index) =>
            this.onAddProduct(productId, index)
          }
        />
        {/* 底部按钮 */}
        <View onClick={() => Taro.navigateBack()} className="bottom-button">
          返回店铺首页
        </View>
      </View>
    );
  }
}