import { Component } from "react";
import { View, Text } from "@tarojs/components";
import { AtTabs, AtTabsPane } from "taro-ui";
import "./index.less";
import Taro from "@tarojs/taro";
import ProductList from '../../components/index/ProductList'

export default class Index extends Component {
  state = {
    current: 0, // 当前选中的标签页索引
    tabList: [
      { title: "全部商品" },
      { title: "选项2" },
      { title: "选项3" },
      { title: "选项4" },
    ], // 标签页列表
  };
  handleClick(value) {
    this.setState({
      current: value,
    });
  }
  render() {
    return (
      <View className="index">
        <AtTabs
          current={this.state.current}
          tabList={this.state.tabList}
          onClick={this.handleClick.bind(this)}
        >
          {this.state.tabList.map((tab, index) => (
            <AtTabsPane current={this.state.current} index={index} key={index}>
              <View className="tab-content">
                <ProductList />
              </View>
            </AtTabsPane>
          ))}
        </AtTabs>
        {/* 底部按钮 */}
        <View onClick={() => Taro.navigateBack()} className="bottom-button">
          返回店铺首页
        </View>
      </View>
    );
  }
}
