import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import "./index.less";
import storeManagement from "../../images/storeManagement/storeManagement.png";
import storeManagementIcon from "../../images/storeManagement/storeManagementIcon.png";
import ProductCard from "../../components/ProductCard"; //卡片模块
import Taro from "@tarojs/taro";

export default class Index extends Component {
  state = {
    isManager: true,
    productList: [
      {
        id: 1,
        name: "青岛大虾",
        price: 99.9,
        originalPrice: 159.9,
        image: "https://example.com/img1.jpg",
        sales: 1234,
        tag: "热销",
      },
      {
        id: 2,
        name: "三文鱼刺身",
        price: 158,
        originalPrice: 198,
        image: "https://example.com/img2.jpg",
        sales: 856,
        tag: "新品",
      },
      {
        id: 3,
        name: "帝王蟹",
        price: 299,
        originalPrice: 399,
        image: "https://example.com/img3.jpg",
        sales: 566,
        tag: "限时",
      },
    ],
  };

  componentWillMount() {}

  componentDidMount() {
    const { router } = Taro.getCurrentInstance();
    const params = router.params;
    this.setState({
      isManager: params.isManager,
    });
  }

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    return (
      <View className="index">
        {/* 头部卡片 */}
        <View className="header-card">
          <Image className="bg-image" src={storeManagement} mode="widthFix" />
          {/* 分享店铺 */}
          <View className="share-shop">
            <Text>分享店铺</Text>
            <AtIcon value="chevron-right" size="10" color="#fff"></AtIcon>
          </View>
          {/* 个人信息 */}
          <View className="user-info">
            <View className="avatar-wrapper">
              <Image className="avatar" src="" />
              <View className="change-avatar-btn">更换头像</View>
            </View>
            <View className="info-content">
              <Text className="name">张三</Text>
              <Text className="desc">这里是店铺介绍文字内容</Text>
            </View>
          </View>
        </View>
        {/* 商品列表 */}
        <View className="product-list">
          <View className="product-list-title">
            <Text className="title">店长推荐</Text>
            <Text className="icon"></Text>
          </View>
          <View className="product-card-list">
            {this.state.productList.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </View>
          {/* 底部购买模块 */}
          {this.state.isManager && (
            <View className="bottom-buy">
              <View className="bottom-buy-left">
                <Image src={storeManagementIcon} mode="aspectFit" />
                <Text className="bottom-buy-text">浏览店铺</Text>
              </View>
              <View className="bottom-buy-right">
                <View className="bottom-buy-right-self">
                  <Text className="bottom-buy-text">店铺模版</Text>
                </View>
                <View onClick={() => Taro.navigateTo({ url:'/pages/productManagement/index' })} className="bottom-buy-right-share">
                  <Text  className="bottom-buy-text">商品管理</Text>
                </View>
              </View>
            </View>
          )}
        </View>
      </View>
    );
  }
}
