import { Component } from "react";
import { View, Text, Image, Button } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import "./index.less";
import { getMyShopList, getMyShopDetail, getShareShopDetail, getShareShopProductList, getShareJump,bindShareJump } from "../../../service";
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: [], //商品列表
    shopDetail: {}, //店铺详情
    page: 1, //页数
    loading: false, //加载状态
    totalPages: 1, // 添加总页数
    isShare: false, // 是否是分享进入
    shopId: '', // 店铺id
  };
  // 获取店铺详情
  getMyShopDetail = async () => {
    const res = this.state.isShare ? await getShareShopDetail({
      store_id: this.state.shopId
    }) :  await getMyShopDetail();
    this.setState({
      shopDetail: res,
    });
  };
  // 获取商品列表
  getMyShopList = async (isBack) => {
    const { page } = this.state;
    this.setState({ loading: true });

    const res = this.state.isShare ? await getShareShopProductList({
      store_id: this.state.shopId,
      page,
      page_size: 10,
    }) : await getMyShopList({
      page,
      page_size: 10,
    });

    this.setState((prevState) => ({
      productList: isBack ? res.goods_list : [...prevState.productList, ...res.goods_list],
      totalPages: res.total_pages,
      loading: false,
    }));
  };

  componentDidShow() {
    const { router } = Taro.getCurrentInstance();
    const params = router.params;
    console.log(params,1111);
    
    this.setState({
      isManager: JSON.parse(params.isManager), //是否是店长
      isShare: params.isShare||false, // 是否是分享进入
      shopId: params.shopId||'', // 店铺id
    },()=>{
      this.getMyShopDetail(); //获取店铺详情
      this.getMyShopList(true); //获取店铺数据
    });
  }
  // 页面上拉触底
  onReachBottom = () => {
    const { page, totalPages, loading } = this.state;
    if (page < totalPages && !loading) {
      this.setState(
        (prevState) => ({ page: prevState.page + 1 }),
        () => this.getMyShopList()
      );
    }
  };
  // 更换头像
  handleChangeAvatar = () => {
    Taro.navigateTo({
      url: "/pages/mineSub/infoEdit/index",
    });
  };
  // 配置分享内容
  onShareAppMessage() {
    return {
      title: "店铺",
      path: `/pages/memberSub/storeManagement/index?shopId=${this.state.shopDetail.id}&isShare=true&isManager=false&&shareJump=${res.share_unique_value}`,
      imageUrl: ''
    }
    return getShareJump({
      share_type:2,
      share_id: this.state.shopDetail.id
    }).then(res=>{
      return {
        title: "店铺",
        path: `/pages/memberSub/storeManagement/index?shopId=${this.state.shopDetail.id}&isShare=true&isManager=false&&shareJump=${res.share_unique_value}`,
        imageUrl: ''
      }
    })
  }
  render() {
    const { shopDetail, productList } = this.state;
    return (
      <View className="index">
        {/* 头部卡片 */}
        <View className="header-card">
          <Image className="bg-image" src={storeManagement} mode="widthFix" />
          {/* 分享店铺 */}
          {!this.state.isShare && (
          <View className="share-shop">
            <Button onClick={this.handleShare} openType="share">
            <Text>分享店铺</Text>
            <AtIcon value="chevron-right" size="10" color="#fff"></AtIcon>
            </Button>
          </View>
          )}
          {/* 个人信息 */}
          <View className="user-info">
            <View onClick={this.handleChangeAvatar} className="avatar-wrapper">
              <Image
                className="avatar"
                mode="aspectFill"
                src={shopDetail.img_icon}
              />
              <View className="change-avatar-btn">更换头像</View>
            </View>
            <View className="info-content">
              <Text className="name">{shopDetail.store_name}</Text>
              <Text className="desc">{shopDetail.store_intro}</Text>
            </View>
          </View>
        </View>
        {/* 商品列表 */}
        <View className="product-list">
          <View className="product-list-title">
            <Text className="title">店长推荐</Text>
            <Text className="icon"></Text>
          </View>
          {productList && (
            <View className="product-card-list">
              {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/memberSub/productManagement/index",
                    })
                  }
                  className="bottom-buy-right-share"
                >
                  <Text className="bottom-buy-text">商品管理</Text>
                </View>
              </View>
            </View>
          )}
        </View>
      </View>
    );
  }
}