<template>
  <view class="main">
    <view class="topHeader" :style="{ paddingTop: menu.bottom + 6 + 'px' }">
      <view
        class="headerTop"
        :style="{ top: menu.top + (menu.height - 24) / 2 + 'px' }"
      >
        <image
          class="backArrow"
          src="/static/images/home/backArrowWhite.svg"
          @click="handleBackHome"
        />
        <text class="pageTitle">{{
          pageType === "UnionMall" ? "工会商城我的" : "我的"
        }}</text>
        <view class="backArrow"></view>
      </view>
    </view>
    <view class="userBox">
      <view class="userLeft">
        <image class="userImg" src="/static/images/home/defaultUser.svg" />
        <view class="userDetail">
          <view class="userName">{{ user.MEMBERSHIP_NAME }}</view>
          <view class="userPhone">{{ phone || "" }}</view>
        </view>
      </view>
      <view class="userRight">
        <image class="messageImg" src="/static/images/home/msg.svg" />
      </view>
    </view>

    <view class="content">
      <view class="userOrder">
        <view class="orderTitle">我的订单</view>
        <view class="orderList">
          <view
            class="orderItem"
            v-for="(item, index) in userOrderList"
            :key="index"
            @click="handleGo(item.value)"
          >
            <image class="itemImg" :src="item.src" />
            <text class="itemText">{{ item.label }}</text>
            <text class="itemValue">{{
              item.value === 1
                ? Unpaid_Count
                : item.value === 2
                ? Deliver_Count
                : item.value === 3
                ? CheckOrder_Count
                : item.value === 4
                ? Complete_Count
                : ""
            }}</text>
          </view>
        </view>
      </view>

      <view class="userOrder" style="margin-top: 24rpx">
        <view class="orderTitle">我的评价</view>
        <view class="orderList">
          <view
            class="orderItem"
            v-for="(item, index) in evaluateList"
            :key="index"
            @click="goToEvaluate(item.value)"
          >
            <image class="itemImg" :src="item.src" />
            <text class="itemText">{{ item.label }}</text>
            <text class="itemValue">{{
              item.value === 1
                ? Comment_Count
                : item.value === 2
                ? Evaluated_Count
                : ""
            }}</text>
          </view>
        </view>
      </view>

      <view class="userOrder">
        <view class="orderTitle">常用功能</view>
        <view class="orderList">
          <view class="orderItem" @click="goAddressManager">
            <image class="itemImg" src="/static/images/home/wati_go.svg" />
            <text class="itemText" style="font-size: 24rpx; white-space: nowrap"
              >地址管理</text
            >
          </view>
        </view>
      </view>
    </view>

    <shop-tabbar
      :page="'/pages/shopMallPage/user/index'"
      :pageType="pageType"
      :shopCarLength="shopCarListCount"
    />
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import shopTabbar from "../../../components/shopTabbar.vue";
export default {
  components: { shopTabbar },
  data() {
    return {
      menu: {}, // 用户手机信息对象
      userOrderList: [
        { label: "待付款", value: 1, src: "/static/images/home/wati_go.svg" },
        { label: "待发货", value: 2, src: "/static/images/home/wati_go.svg" },
        {
          label: "待收货",
          value: 3,
          src: "/static/images/home/wait_check.svg",
        },
        { label: "已完成", value: 4, src: "/static/images/home/finish.svg" },
      ], // 我的订单tab数组
      evaluateList: [
        { src: "/static/images/home/wait_fed.svg", label: "待评价", value: 1 },
        { src: "/static/images/home/fead.svg", label: "已评价", value: 2 },
        {},
      ], // 我的评价tab数组

      Deliver_Count: 0, // 待发货
      Complete_Count: 0, // 已完成
      Evaluated_Count: 0, // 已评价
      CheckOrder_Count: 0, // 待收货
      Comment_Count: 0, // 待评价
      Unpaid_Count: 0, // 待付款

      pageType: "", // 页面类型 是不是进来查工会商城的
      shopCarListCount: 0, // 购物车商品数量
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
      serverList: "severList",
    }),
    phone() {
      if (this.user.MEMBERSHIP_MOBILEPHONE) {
        let a = this.user.MEMBERSHIP_MOBILEPHONE.substring(0, 3);
        let b = this.user.MEMBERSHIP_MOBILEPHONE.substring(7, 11);
        return a + "****" + b;
      } else {
        return "";
      }
    },
  },
  onLoad(query) {
    this.menu = uni.getMenuButtonBoundingClientRect();
    console.log("this.menu", this.menu);
    if (query.pageType) {
      this.pageType = query.pageType;
    }
    console.log("this.pageType", this.pageType);
    this.$utils.addUserBehaviorNew();
  },
  onShow() {
    if (!this.user.MEMBERSHIP_ID) {
      uni.navigateTo({ url: "/pages/register/index" });
    }
    // 请求用户的信息和订单信息
    this.getMember();
    // 判断当前的购物车里面是否有东西
    let shopCarList = [];

    if (this.pageType === "UnionMall") {
      shopCarList = this.$store.state.unionMyShopCar;
    } else {
      shopCarList = this.$store.state.myShopCar;
    }

    console.log("shopCarList", shopCarList);
    let count = 0;
    if (shopCarList && shopCarList.length > 0) {
      shopCarList.forEach((item) => {
        count += item.count;
      });
    }
    this.shopCarListCount = count;
  },
  methods: {
    getMember() {
      let _this = this;
      _this.$api
        .getCoop({
          action_type: "GetMembershipInfo",
          // memberShipId: this.user.MEMBERSHIP_ID,
          WechatUserId: this.user.WechatUserId,
          RegisterType: 0,
          saleBillType: this.pageType === "UnionMall" ? "3001" : "3000",
        })
        .then(function (data) {
          if (data.ResultCode === "100") {
            let _data = data.Data;
            _this.Deliver_Count = _data.Deliver_Count;
            _this.Complete_Count = _data.Complete_Count;
            _this.Evaluated_Count = _data.Evaluated_Count;
            _this.CheckOrder_Count = _data.CheckOrder_Count;
            _this.Comment_Count = _data.Comment_Count;
            _this.Unpaid_Count = _data.Unpaid_Count;
            _this.user.MEMBERSHIP_LEVEL_TEXT =
              _data.MEMBERSHIP_LEVEL_TEXT || "";
            _this.user.COUPON_COUNT = _data.COUPON_COUNT || "";
            _this.user.PENDORDER_COUNT = _data.PENDORDER_COUNT || "";
            _this.user.RESERVATION_COUNT = _data.RESERVATION_COUNT || "";
            _this.user.ACCOUNT_BALANCE = _data.ACCOUNT_BALANCE || "";
            _this.user.ISPLUS = _data.ISPLUS || "";
            _this.user.INDUSTRY_MEMBERSHIP_ID =
              _data.INDUSTRY_MEMBERSHIP_ID || "";
            _this.user.MEMBERSHIP_TYPE = _data.MEMBERSHIP_TYPE || "";
            _this.user.MEMBERSHIP_LEVEL = _data.MEMBERSHIP_LEVEL || "";
            _this.user.DELIVER_COUNT = _data.DELIVER_COUNT || "";
            _this.user.InviteCode = _data.InviteCode || "";
            _this.user.MEMBERSHIP_POINT = _data.MEMBERSHIP_POINT || "";
            _this.user.MEMBERSHIP_MOBILEPHONE =
              _data.MEMBERSHIP_MOBILEPHONE || "";

            _this.$store.commit("setUser", _this.user);
            console.log("data.Data", data.Data);
          }
        });
    },
    // 去订单页面
    handleGo(url) {
      // 待付款 1 待发货 2  已发货 3  已验收 4
      console.log("url", url);
      uni.navigateTo({
        url: `/pages/order/buyOrder/index?type=${url}&pageType=${this.pageType}`,
      });
    },
    // 去评价页面
    goToEvaluate(type) {
      // 待评价 2  已评价 3
      let obj = {
        1: 2,
        2: 3,
      };
      uni.navigateTo({
        url: `/pages/evaluateList/index?type=${obj[type]}&pageType=${this.pageType}`,
      });
    },
    // 跳转地址管理页面
    goAddressManager() {
      uni.navigateTo({ url: `/pages/myAddress/address/index` });
    },
    handleBackHome() {
      if (this.pageType === "UnionMall") {
        uni.redirectTo({
          url: `/pages/shopMallPage/index/index?pageType=${this.pageType}`,
        });
      } else {
        uni.redirectTo({
          url: "/pages/shopMallPage/index/index",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background-color: #f5f6f6;

  .topHeader {
    width: 100%;
    background: linear-gradient(270deg, #2fa4ff 0%, #197aff 100%);
    display: flex;
    justify-content: center;
    position: relative;

    .headerTop {
      width: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 32rpx;

      .backArrow {
        width: 48rpx;
        height: 48rpx;
      }

      .pageTitle {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 34rpx;
        color: #ffffff;
        line-height: 48rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }

  .userBox {
    width: 100%;
    height: 216rpx;
    background: linear-gradient(270deg, #2fa4ff 0%, #197aff 100%);
    box-sizing: border-box;
    padding: 48rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .userLeft {
      display: flex;
      align-items: center;

      .userImg {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }

      .userDetail {
        .userName {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 36rpx;
          color: #ffffff;
          line-height: 52rpx;
          text-align: left;
          font-style: normal;
          margin-bottom: 8rpx;
        }

        .userPhone {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }

    .userRight {
      width: 80rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.19);
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .messageImg {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 24rpx 32rpx 0;

    .userOrder {
      width: 100%;
      background: #fff;
      box-sizing: border-box;
      padding: 24rpx;
      border-radius: 16rpx;
      margin-top: 24rpx;

      .orderTitle {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #020e1a;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .orderList {
        width: 100%;
        display: flex;
        align-items: center;

        .orderItem {
          width: calc(100% / 4);
          box-sizing: border-box;
          padding: 24rpx 32rpx 0;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .itemImg {
            width: 64rpx;
            height: 64rpx;
            margin-bottom: 4rpx;
          }

          .itemText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #6c737a;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 16rpx;
          }

          .itemValue {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #020e1a;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
  }
}
</style>
