import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import { getVipInfo } from "../../service";
import Taro from "@tarojs/taro";
import "./index.less";
import vip from "../../images/member/vip.png";
import home from "../../images/nav/home.png";
import toDetail from "../../images/member/toDetail.png";
import warning from "../../images/member/warning.png";
import withdrawable from "../../images/member/withdrawable.png";
import order from "../../images/member/order.png";
import avatar from "../../images/mine/avatar.png";
export default class Index extends Component {
  state = {
    vipInfo: {
      users: { name: "去登录", icon: avatar },
      earnings: { store_earnings_now: 0, store_earnings_all: 0 },
      draw_money: { store_earnings_now: 0 },
      order: { order_all: 0, order_promotion: 0, order_pay: 0 },
    }, //会员信息
  };
  // 获取会员首页数据
  getVipInfo = async () => {
    const res = await getVipInfo();
    this.setState({
      vipInfo: res,
    });
  };
  // 去登录
  Login = () => {
    if (!Taro.getStorageSync("session_key")) {
      Taro.reLaunch({
        url: "/pages/login/index",
      });
    }
  };
  componentDidShow() {
    if (Taro.getStorageSync("session_key")) {
      this.getVipInfo(); //获取会员首页数据
    }
  }

  render() {
    const { vipInfo } = this.state;
    return (
      <View className="member">
        <View className="member-bg"></View>
        <View className="member-content">
          {/* 会员信息卡 */}
          <View className="member-info-card">
            <View className="member-info-card-header">
              <Image
                className="avatar"
                src={vipInfo.users.icon}
                mode="aspectFill"
              />

              <View className="member-info-card-header-text">
                <Text onClick={this.Login} className="user-name">{vipInfo.users.name}</Text>

                <View className="member-info-card-header-text-level">
                  <Text className="level-text">店长</Text>
                  <Image className="level-icon" src={vip} />
                </View>
              </View>
            </View>
            {/* 我的小店 */}
            <View
              onClick={() =>
                Taro.navigateTo({
                  url: `/pages/memberSub/storeManagement/index?isManager=${true}`,
                })
              }
              className="my-shop"
            >
              <Image className="my-shop-icon" src={home} />
              <View className="my-shop-text">我的小店</View>
            </View>
          </View>
          {/* 预估收益 */}

          <View className="estimated-income">
            <Text className="estimated-income-title">预估收益</Text>
            <View className="estimated-income-content">
              <View className="income-item">
                <Text className="amount">
                  {vipInfo.earnings.store_earnings_now}
                </Text>
                <Text className="label">今日预估收益</Text>
              </View>
              <View className="divider"></View>
              <View className="income-item">
                <Text className="amount">
                  {vipInfo.earnings.store_earnings_all}
                </Text>
                <Text className="label">累计收益</Text>
              </View>
            </View>
            {/* <view onClick={() => Taro.navigateTo({ url: `/pages/memberSub/earningsDetail/index` })} className="estimated-income-detail">
              收益详情
              <Image className="to-detail" src={toDetail} />
            </view> */}
          </View>

          {/* 可提现金额 */}
          <View className="withdrawable-amount">
            <View className="withdrawable-amount-header">
              <Image className="withdrawable-amount-icon" src={withdrawable} />
              <Text className="withdrawable-amount-title">可提现金额</Text>
            </View>
            <View className="withdrawable-amount-content">
              <View className="left">
                <Text className="amount">
                  ¥{vipInfo.draw_money.store_earnings_now}
                </Text>

                {/* <View className="warning-icon-box">
                  <Image className="warning-icon" src={warning} />
                  <Text className="warning-text">未完成提现认证</Text>
                </View> */}
              </View>
              {/* <View onClick={() => Taro.navigateTo({ url: `/pages/memberSub/cashOut/index` })} className="right">点击提现</View> */}
            </View>
          </View>
          {/* 今日订单 */}
          <View className="today-order">
            <View className="today-order-header">
              <View className="today-order-header-left">
                <Image className="today-order-icon" src={order} />
                <Text className="today-order-title">今日订单</Text>
              </View>
              {/* <View onClick={() => Taro.navigateTo({ url: `/pages/memberSub/earningsOrder/index` })} className="today-order-header-right">
                历史订单
                <AtIcon value='chevron-right' size='10' color='#A1A1A1'></AtIcon>
              </View> */}
            </View>

            <View className="today-order-content">
              <View className="order-item">
                <Text className="label">订单总量</Text>
                <Text className="amount">{vipInfo.order.order_all}</Text>
              </View>
              <View className="order-item">
                <Text className="label">推广订单</Text>
                <Text className="amount">{vipInfo.order.order_promotion}</Text>
              </View>
              <View className="order-item">
                <Text className="label">购买历史</Text>
                <Text className="amount">{vipInfo.order.order_pay}</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
}
