<template>
  <view
    class="main"
    :style="{
      backgroundImage:
        pageType === 'spring'
          ? `url(https://eshangtech.com/minTestImg/springPageBg.png)`
          : `url(https://eshangtech.com/minTestImg/pageBg.png)`,
    }"
  >
    <view
      class="topBox"
      :style="{
        height: menu.bottom + 14 + 'px',
        backgroundImage:
          pageType === 'spring'
            ? `url(https://eshangtech.com/minTestImg/springPageBg.png)`
            : `url(https://eshangtech.com/minTestImg/pageBg.png)`,
      }"
    >
      <view
        class="topContent"
        :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }"
      >
        <view class="topLeft">
          <image class="YDIcon" src="/static/images/home/yunnanLogo.svg" />
        </view>
        <view class="topRight" @click="goSelectServer">
          <image class="searchIcon" src="/static/images/home/searchIcon.svg" />
          <span class="searchText">请输入服务区</span>
        </view>
      </view>
    </view>

    <view
      class="content"
      :style="{
        paddingTop: menu.bottom + 18 + 'px',
        height: `calc(100vh - 50px - ${safeHeight}px )`,
      }"
    >
      <!-- 用户信息栏 -->
      <view class="userBox">
        <view class="userTop">
          <view class="topLeft">
            <view class="userImg">
              <image
                class="imgIcon"
                src="/static/images/home/defaultUser.svg"
              />
            </view>
            <view class="userDetail">
              <view class="phoneText">{{ phone }}</view>
              <view class="bindCar">
                <span v-if="!cards" class="bindCarText" @click="handleGoBindCar"
                  >未绑定爱车</span
                >
                <span
                  v-if="cards"
                  class="bindCarText"
                  @click="handleGoBindCar"
                  >{{ cards }}</span
                >
              </view>
            </view>
          </view>
          <view class="topRight" @click="handleGoUserCode">
            <view class="codeBox">
              <image class="code" src="/static/images/home/codeIcon.svg" />
            </view>
            <view class="codeText">会员码</view>
          </view>
        </view>
        <view class="userBottom">
          <view class="bottomItem">
            <view class="label">优惠券</view>
            <view class="value">{{
              $utils.handleFormatNumber(userInfo.COUPON_COUNT || 0)
            }}</view>
            <view class="rightLine"></view>
          </view>
          <view class="bottomItem">
            <view class="label">积分</view>
            <view class="value">{{
              $utils.handleFormatNumber(userInfo.MEMBERSHIP_POINT || 0)
            }}</view>
            <view class="rightLine"></view>
          </view>
          <view class="bottomItem">
            <view class="label">余额</view>
            <view class="value">{{
              $utils.handleFormatNumber(userInfo.ACCOUNT_BALANCE || 0)
            }}</view>
          </view>
          <!-- <view class="line"></view> -->
        </view>
      </view>

      <!-- 我的商城订单栏 -->
      <view class="orderFun">
        <view class="boxTitleTop" @click="handleGoOrder(0)">
          <text class="boxTitle">商城订单</text>
          <image class="rightArrow" src="/static/images/home/rightArrow.svg" />
        </view>
        <view class="orderContent">
          <view class="orderLeft">
            <view
              class="orderFunItem"
              v-for="(item, index) in orderFunList"
              :key="index"
              @click="handleGoOrder(item.value)"
            >
              <image class="orderFunIcon" :src="item.src" />
              <text class="orderFunText">{{ item.label }}</text>
            </view>
          </view>

          <view class="orderRight">
            <view
              class="orderFunItem"
              @click="handleGo(`/pages/order/buyOrder/index?type=6`)"
            >
              <image
                class="orderFunIcon"
                src="/static/images/home/afterSales.svg"
              />
              <text class="orderFunText">退换/售后</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 我的点餐订单栏 -->
      <view class="orderFun">
        <view class="boxTitleTop" @click="handleGoFoodOrder(0)">
          <text class="boxTitle">我的点餐</text>
          <image class="rightArrow" src="/static/images/home/rightArrow.svg" />
        </view>
        <view class="orderContent">
          <view class="newOrderLeft" style="width: 100%; paddingright: 0">
            <view
              class="orderFunItem"
              v-for="(item, index) in foodFunList"
              :key="index"
              @click="handleGoFoodOrder(item.value)"
            >
              <image class="orderFunIcon" :src="item.src" />
              <text class="orderFunText">{{ item.label }}</text>
            </view>
          </view>
          <!-- <view class="orderRight">
            <view
              class="orderFunItem"
              @click="handleGo(`/pages/order/foodOrder/index?type=6`)"
            >
              <image
                class="orderFunIcon"
                src="/static/images/home/afterSales.svg"
              />
              <text class="orderFunText">退换/售后</text>
            </view>
          </view> -->
        </view>
      </view>

      <!-- 常用功能 -->
      <view class="commonFunction">
        <view class="boxTitleTop">
          <text class="boxTitle">常用功能</text>
        </view>

        <view class="commonFunContent">
          <view
            class="commonFunItem"
            v-for="(item, index) in commonFunList"
            :key="index"
            @click="handleGoNormal(item)"
          >
            <image
              class="commonFunIcon"
              :src="pageType === 'spring' ? item.springSrc : item.src"
            />
            <text class="commonFunText">{{ item.label }}</text>
          </view>
        </view>
      </view>

      <!-- 客服帮助 那俩 -->
      <view class="customerService">
        <view class="customerServiceItem" @click="handleLastFun(1)">
          <view class="customerServiceLeft">
            <view class="label">客服帮助</view>
            <view class="smallLabel">伴您行程无忧</view>
          </view>
          <view class="customerServiceRight">
            <image
              class="customerIcon"
              src="/static/images/home/customerIcon.svg"
            />
          </view>
        </view>
        <view class="customerServiceItem" @click="handleLastFun(2)">
          <view class="customerServiceLeft">
            <view class="label">服务热线</view>
            <view class="smallLabel">伴您行程无忧</view>
          </view>
          <view class="customerServiceRight">
            <image
              class="customerIcon"
              src="/static/images/home/customerPhoneIcon.svg"
            />
          </view>
        </view>
      </view>
    </view>

    <tabbar :page="'/pages/user/index'" />
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import tabbar from "../../components/tabbar.vue";
export default {
  components: { tabbar },
  data() {
    return {
      pageType: "", // spring 春节模式
      menu: {},
      orderFunList: [
        {
          label: "待付款",
          value: 1,
          src: "/static/images/home/obligationIcon.svg",
        },
        {
          label: "待发货",
          value: 2,
          src: "/static/images/home/shipmentIcon.svg",
        },
        {
          label: "待收货",
          value: 3,
          src: "/static/images/home/receiptOfGoods.svg",
        },
        {
          label: "待评价",
          value: 4,
          src: "/static/images/home/evaluatedIcon.svg",
        },
      ], // 我的订单前面四个
      commonFunList: [
        {
          label: "会员权益",
          value: 1,
          src: "/static/images/home/memberBenefits.svg",
          springSrc: "/static/images/home/springMemberBenefits.svg",
        },
        {
          label: "我的爱车",
          value: 2,
          src: "/static/images/home/serviceIcon.svg",
          springSrc: "/static/images/home/springService.svg",
        },
        {
          label: "建议反馈",
          value: 3,
          src: "/static/images/home/suggestion.svg",
          springSrc: "/static/images/home/springSuggestion.svg",
        },
      ], // 常用功能
      foodFunList: [
        {
          label: "待付款",
          value: 1,
          src: "/static/images/home/obligationIcon.svg",
        },
        {
          label: "待接单",
          value: 2,
          src: "/static/images/home/shipmentIcon.svg",
        },
        {
          label: "制作中",
          value: 3,
          src: "/static/images/home/receiptOfGoods.svg",
        },
        {
          label: "待评价",
          value: 4,
          src: "/static/images/home/evaluatedIcon.svg",
        },
      ],
      cards: "",
      userInfo: {},
      safeHeight: 0,
    };
  },
  onLoad() {
    this.menu = uni.getMenuButtonBoundingClientRect();
    let height = uni.getStorageSync("safeHeight");
    this.safeHeight = Number(height);
  },
  onShow() {
    console.log("this.user", this.user);
    if (!this.user.MEMBERSHIP_ID) {
      uni.navigateTo({ url: "/pages/register/index" });
    }
    // 拿车牌号
    this.handleGetCarCode();
    // 拿用户信息
    this.handleGetUserDetail();
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
    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 "";
      }
    },
  },
  methods: {
    // 拿到用户详情
    async handleGetUserDetail() {
      const userData = await this.$api.getCoop({
        action_type: "GetMembershipInfo",
        WechatUserId: this.user.WechatUserId,
      });
      this.userInfo = userData.Data;
      this.$forceUpdate();
      console.log("this.userInfo", this.userInfo);
    },
    // 跳转去售后 即已完成的列表
    handleGo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // 跳转去点餐订单页面
    handleGoFoodOrder(value) {
      uni.navigateTo({
        url: `/pages/order/foodOrder/index?type=${value}`,
      });
    },
    // 绑定车辆
    handleGoBindCar() {
      uni.navigateTo({
        url: `/pages/bindCar/index`,
      });
    },
    // 拿到车牌号
    handleGetCarCode() {
      let _this = this;
      uni.showLoading({ title: "加载中" });
      this.$api
        .getCoop({
          action_type: "GetVehicleList",
        })
        .then((res) => {
          let list = res.Result_Data.List;
          if (list && list.length > 0) {
            _this.cards = list[0].License_Plate;
          }
          uni.hideLoading();
        });
    },
    // 常用功能的跳转
    handleGoNormal(obj) {
      console.log("obj", obj);
      if (obj.value === 1) {
        // 会员权益
        uni.navigateTo({
          url: `/pages/noDataPage/index`,
        });
        // this.handleShowPayCode();
      } else if (obj.value === 2) {
        // 我的爱车
        this.handleGoBindCar();
      } else if (obj.value === 3) {
        // 建议反馈
        uni.navigateToMiniProgram({
          shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
        });
      }
    },
    // // 调起付款码
    async handleShowPayCode() {
      let timeStamp = Math.ceil(new Date().getTime() / 1000);
      let nonceStr = Math.random().toString(36).substring(2, 8);
      let req = {
        appId: "wxee018fb96955552a",
        timeStamp: timeStamp,
        nonceStr: nonceStr,
        package: "1672298991",
        signType: "MD5",
      };
      let reqSign = {
        parameters: `appId=wxee018fb96955552a&nonceStr=${nonceStr}&package=mch_id=1672298991&signType=MD5&timeStamp=${timeStamp}`,
        // "wxee018fb96955552a\n" +
        // timeStamp +
        // "\n" +
        // nonceStr +
        // "\npackage=" +
        // req.package +
        // "\n",
      };

      const data = await this.$api.$get("/WeChat/GenerateSign", reqSign);
      console.log("data", data);
      wx.openOfflinePayView({
        appId: "wxee018fb96955552a",
        timeStamp: timeStamp,
        nonceStr: nonceStr,
        package: "1672298991",
        signType: "MD5",
        paySign: data.Result_Data,
        success(res) {
          console.log("res", res);
        },
      });
    },
    // 最底下的两个点击事件
    handleLastFun(value) {
      if (value === 1) {
        // 客服帮助
        uni.navigateTo({
          url: `/pages/noDataPage/index`,
        });
      } else if (value === 2) {
        // 服务热线
        uni.navigateTo({
          url: `/pages/noDataPage/index`,
        });
      }
    },
    // 跳转订单
    handleGoOrder(value) {
      if (value === 4) {
        uni.navigateTo({
          url: `/pages/evaluateList/index`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/order/buyOrder/index?type=${value || ""}`,
        });
      }
    },
    // 跳转到选择服务区
    goSelectServer() {
      uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=home" });
    },
    // 跳转到会员码页面
    handleGoUserCode() {
      uni.navigateTo({
        url: "/pages/payfor/index",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;

  .topBox {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;

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

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

        .YDIcon {
          width: 176rpx;
          height: 48rpx;
          margin-right: 8rpx;
        }
      }

      .topRight {
        width: 310rpx;
        height: 72rpx;
        background: #f6f8fa;
        border-radius: 36rpx;
        margin-left: 16rpx;
        box-sizing: border-box;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;

        .searchIcon {
          width: 32rpx;
          height: 32rpx;
        }

        .searchText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #9fa1aa;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-left: 8rpx;
        }
      }
    }
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx 48rpx;
    overflow-y: auto;

    .userBox {
      width: 100%;
      border-radius: 16rpx 16rpx 0 0;
      overflow: hidden;

      .userTop {
        width: 100%;
        height: 216rpx;
        background: #32ba68;
        box-sizing: border-box;
        padding: 40rpx 32rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .topLeft {
          height: 104rpx;
          display: flex;

          .userImg {
            width: 104rpx;
            height: 104rpx;
            margin-right: 20rpx;

            .imgIcon {
              width: 100%;
              height: 100%;
            }
          }

          .userDetail {
            height: 100%;
            box-sizing: border-box;
            padding: 6rpx 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

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

            .bindCar {
              .bindCarText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 22rpx;
                color: #716f69;
                line-height: 32rpx;
                text-align: left;
                display: inline;
                font-style: normal;
                padding: 2rpx 16rpx;
                background: #ffffff;
                border-radius: 18rpx;
              }
            }
          }
        }

        .topRight {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

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

            .code {
              width: 64rpx;
              height: 64rpx;
            }
          }

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

      .userBottom {
        width: 100%;
        height: 128rpx;
        background: #fff;
        border-radius: 0 0 16rpx 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bottomItem {
          width: calc((100% - 16rpx) / 3);
          height: 100%;
          box-sizing: border-box;
          padding: 24rpx 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          .label {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #716f69;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }

          .value {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 36rpx;
            color: #130f05;
            line-height: 48rpx;
            text-align: left;
            font-style: normal;
          }

          .rightLine {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 2rpx;
            height: 72rpx;
            background: #eeeeee;
          }
        }

        // .line {
        //   position: absolute;
        //   width: 2rpx;
        //   height: 72rpx;
        //   background: #eeeeee;
        //   top: 50%;
        //   transform: translate(-50%, -50%);
        //   left: 50%;
        // }
      }
    }

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

      .boxTitleTop {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

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

        .rightArrow {
          width: 24rpx;
          height: 24rpx;
        }
      }

      .orderContent {
        margin-top: 32rpx;
        width: 100%;
        display: flex;
        align-items: center;

        .orderLeft,
        .newOrderLeft {
          width: calc(100% - 108rpx);
          display: flex;
          justify-content: space-between;
          position: relative;
          box-sizing: border-box;
          padding-right: 44rpx;

          .orderFunItem {
            width: 72rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .orderFunIcon {
              width: 48rpx;
              height: 48rpx;
              margin-bottom: 16rpx;
            }

            .orderFunText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #716f69;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }

        .orderLeft::after {
          content: "";
          width: 2rpx;
          height: 76rpx;
          background: #eeeeee;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        .orderRight {
          width: 162rpx;
          box-sizing: border-box;
          padding-left: 44rpx;

          .orderFunItem {
            width: 108rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .orderFunIcon {
              width: 48rpx;
              height: 48rpx;
              margin-bottom: 16rpx;
            }

            .orderFunText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #716f69;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }
    }

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

      .boxTitleTop {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

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

        .rightArrow {
          width: 24rpx;
          height: 24rpx;
        }
      }

      .commonFunContent {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24rpx;

        .commonFunItem {
          width: calc((100% - 48rpx) / 3);
          height: 188rpx;
          background: #f5f8f6;
          border-radius: 16rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .commonFunIcon {
            width: 72rpx;
            height: 72rpx;
            margin-bottom: 8rpx;
          }

          .commonFunText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }

    .customerService {
      width: 100%;
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .customerServiceItem {
        width: calc((100% - 24rpx) / 2);
        box-sizing: border-box;
        padding: 28rpx 24rpx;
        background: #ffffff;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .customerServiceLeft {
          .label {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 28rpx;
            color: #130f05;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 4rpx;
          }

          .smallLabel {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
        }

        .customerServiceRight {
          .customerIcon {
            width: 72rpx;
            height: 72rpx;
          }
        }
      }
    }
  }
  .content::-webkit-scrollbar {
    display: none;
  }
}
</style>