<template>
  <view class="userStyle" style="height: 100%">
    <view
      class="headStatus"
      v-if="scrollTop > 50"
      :style="[
        headStyle,
        {
          zIndex: scrollTop < 10 ? 'unset' : 2,
          opacity: scrollTop < 10 ? '100' : scrollTop,
        },
      ]"
    >
      <view class="title" style="color: #000" v-if="scrollTop > 50">{{
        pageTitle
      }}</view>
    </view>
    <view class="userBox" :style="{ 'padding-bottom': bottommargin }">
      <view
        class="imgbg"
        style="background: linear-gradient(#9ee3e1, 5%, #f3f4f6); height: auto"
      >
        <view class="titlenav" :style="{ paddingTop: nav, color: '#000' }">{{
          pageTitle
        }}</view>
        <view
          class="topheard"
          style="margin-top: 30px; justify-content: space-between"
          v-if="meueData.user_center.top_style == 1"
          @click="goperson()"
        >
          <view style="display: flex; flex-direction: row; align-items: center">
            <view
              style="
                width: 140rpx;
                height: 140rpx;
                position: relative;
                margin-left: 50rpx;
              "
            >
              <u-avatar :src="user_info.avatar" size="140"></u-avatar>
              <image
                v-if="user_info.Sex == 1"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan2.png"
                style="
                  width: 32rpx;
                  height: 32rpx;
                  position: absolute;
                  right: 0px;
                  bottom: 0;
                "
              ></image>
              <image
                v-if="user_info.Sex == 2"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv2.png"
                style="
                  width: 32rpx;
                  height: 32rpx;
                  position: absolute;
                  right: 0px;
                  bottom: 0;
                "
              ></image>
            </view>

            <view
              style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                max-height: 70px;
                margin-left: 20rpx;
              "
            >
              <Text
                style="
                  color: #000000;
                  font-size: 40rpx;
                  max-width: 200px;
                  overflow: hidden;
                  display: inline-block;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                @click="login(user_info)"
                >{{
                  user_info.nickname ? user_info.nickname : "立即登录"
                }}</Text
              >
              <view style="display: flex; align-items: center">
                <view
                  class="member"
                  v-if="is_icon_members_grade == 1 && user_info.nickname"
                  style="margin-right: 5px"
                >
                  <!-- <image
                    :src="user_info.identity.level_icon"
                    mode="aspectFill"
                    style="width: 22px; height: 22px; border-radius: 11px"
                  ></image> -->
                  <!-- <Text style="margin-right: 10px;">{{ user_info.identity.level_name != null ? user_info.identity.level_name : '普通用户' }}</Text> -->
                </view>
                <!-- <view class="renzhen" v-if="user_info.isAttestation==0 " >
							 	未认证
							 </view>
							 <view class="renzhen" v-if="user_info.isAttestation>0"  :style="{'border':'1px solid '+mainColor,'color':mainColor}">
							 	已认证
							 </view> -->
              </view>
            </view>
          </view>
          <view style="display: flex">
            <u-tag
              text="个人资料"
              mode="dark"
              :bg-color="mainColor"
              size="mini"
              style="margin-right: 2px"
            />

            <u-icon
              name="arrow"
              color="#A5A4AC"
              size="40"
              style="margin-right: 10px"
            ></u-icon>
          </view>
        </view>
        <view
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 23px;
            margin-bottom: 5px;
          "
          v-if="meueData.user_center.top_style == 2"
        >
          <u-avatar :src="user_info.avatar" size="120"></u-avatar>
          <Text
            style="color: #000000; font-size: 40rpx"
            @click="login(user_info)"
            >{{ user_info.nickname ? user_info.nickname : "立即登录" }}</Text
          >
          <view
            class="member"
            v-if="is_icon_members_grade == 1 && user_info.nickname"
          >
            <image
              :src="user_info.identity.level_icon"
              mode="aspectFill"
              style="width: 22px; height: 22px; border-radius: 11px"
            ></image>
            <Text style="margin-right: 10px">{{
              user_info.identity.level_name != null
                ? user_info.identity.level_name
                : "普通用户"
            }}</Text>
          </view>
        </view>
        <view class="top_b">
          <view
            class="top_b_item2"
            @click="goUrl('/pages/blindDate/personal/followlist')"
          >
            <text style="font-size: 20px; font-weight: bold">{{
              user_info.followNum ? user_info.followNum : 0
            }}</text>
            <text style="color: #666666">关注</text>
          </view>
          <view
            class="top_b_item2"
            @click="goUrl('/pages/blindDate/personal/fanlist')"
          >
            <text style="font-size: 20px; font-weight: bold">{{
              user_info.myFollowNum ? user_info.myFollowNum : 0
            }}</text>
            <text style="color: #666666">粉丝</text>
          </view>
        </view>
      </view>
      <view
        class="buyvip"
        v-if="
          user_info.identity.is_member_vipbuy == true &&
          user_info.identity.member_vipgrade_Id > 0 &&
          user_info.identity.member_level == 0
        "
        @click="gobuyvip(user_info.identity.member_vipgrade_Id)"
      >
        <image
          :src="meueData.user_center.member_buy_vip_url"
          style="width: 100%; height: auto"
          mode="widthFix"
        ></image>
      </view>
      <!-- <view class="order_bar paike"  style="" @click="gopointBalance">
				<view style="display: flex;align-items: center;">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/base-xx.png" style="width: 22px;height: auto" mode='widthFix'></image>
					<span style='font-size: 14px;color: #555555;margin-left: 15px'>我的星星值：</span>
				</view>
				<view style="display: flex;align-items: center;">
					<span style='font-size: 12px;color: #A5A4AC;font-family: aa;margin-right: 6px;'>{{PointNum}}</span>
					<u-icon name="arrow" color="#A5A4AC" size="20"></u-icon>
				</view>
			</view> -->
      <template
        v-if="meueData.user_center && meueData.user_center.nar_menus.length > 0"
      >
        <view
          v-if="
            meueData.user_center && meueData.user_center.is_menu_status == 1
          "
          v-for="(mItem, mIndex) in meueData.user_center.nar_menus"
          :key="mIndex"
          :style="{
            marginTop:
              mIndex == 0 &&
              (meueData.user_center.is_foot_bar_status == 1 ||
                meueData.user_center.is_account_status == 1)
                ? '15px'
                : '10px',
          }"
          class="headCommon"
        >
          <view style="margin: 10px" v-if="mItem.MenuNavTitle != ''">{{
            mItem.MenuNavTitle
          }}</view>
          <view
            :class="mItem.MenuNavStyle == 1 ? 'xq-menus' : 'xq-menus2'"
            style="width: 100%"
          >
            <view
              :class="
                mItem.MenuNavStyle == 1 ? 'xq-menus_item' : 'xq-menus_item2'
              "
              v-for="(item, index) in mItem.MeunList"
              :key="index"
              :name="item.name"
              @click="goUrl(item.link_url)"
            >
              <image
                :src="item.icon_url"
                style="width: 18px; height: auto"
                mode="widthFix"
              ></image>
              <Text
                :style="{
                  'margin-top': mItem.MenuNavStyle == 1 ? '10rpx' : '0rpx',
                  'margin-left': mItem.MenuNavStyle == 1 ? '0rpx' : '40rpx',
                }"
              >
                {{ item.name }}
              </Text>
              <view v-if="mItem.MenuNavStyle != 1" class="wangr">
                <view
                  class="MenuNav-t"
                  :style="{ background: mainColor }"
                  v-if="
                    mItem.MenuNavStyle != 1 &&
                    item.link_url == '/pages/blindDate/message' &&
                    user_info.messageNum > 0
                  "
                >
                  <tetx>{{ user_info.messageNum }}</tetx>
                </view>
                <u-icon name="arrow" color="#A5A4AC" size="20"></u-icon>
              </view>
              <button
                open-type="contact"
                class="contButton"
                v-if="item.link_url == 'contact' && item.name == '客服'"
              ></button>
              <!-- 消息的条数 -->
              <view
                class="MenuNav-o"
                :style="{ background: mainColor }"
                v-if="
                  mItem.MenuNavStyle == 1 &&
                  item.link_url == '/pages/blindDate/message' &&
                  user_info.messageNum > 0
                "
              >
                <tetx>{{ user_info.messageNum }}</tetx>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  props: [
    "meueData",
    "user_info",
    "scrollTop",
    "modelstype",
    "bottommargin",
    "PointNum",
  ],
  data() {
    return {
      pageTitle: "用户中心",
      headStyle: {},
      nav: 0,
      mainColor: "",
      is_icon_members_grade: 0,
    };
  },
  created() {
    this.nav = uni.getMenuButtonBoundingClientRect().top + "px";
    this.headStyle.background = `linear-gradient(#9EE3E1 5%, #f3f4f6)`;
    this.headStyle.paddingTop = this.nav;
    this.mainColor = this.$uiConfig.mainColor;
    let currentPages = getCurrentPages();
    let u = "/" + currentPages[currentPages.length - 1].route;
    let pages = wx.getStorageSync("basedata")
      ? wx.getStorageSync("basedata").bar_title
      : [];
    pages.forEach((x) => {
      if (x.value == u) {
        this.pageTitle = x.new_name ? x.new_name : x.name;
      }
    });
    this.is_icon_members_grade = uni.getStorageSync("basedata")
      ? uni.getStorageSync("basedata").mall.setting.is_icon_members_grade
      : 0;
  },
  methods: {
    goUrl(url) {
      if (url == "/pages/balance/balance") {
        uni.navigateTo({
          url: "/pages/balance/balance?balance=" + this.user_info.balance,
        });
      } else {
        uni.navigateTo({
          url: url,
        });
      }
    },
    goperson() {
      let mall_UserInfo = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo")
        : null;
      if (this.user_info.isAttestation == 0) {
        if (mall_UserInfo != null) {
          uni.navigateTo({
            url:
              "/pages/blindDate/editData?UserId=" +
              mall_UserInfo.UserId +
              "&Jumptype=1&type=1",
          });
        }
      } else {
        if (mall_UserInfo != null) {
          uni.navigateTo({
            url:
              "/pages/blindDate/persondetails?UserId=" + mall_UserInfo.UserId,
          });
        }
      }
    },
    gopointBalance() {
      //跳转点数余额
      uni.navigateTo({
        url: "/pages/appointment/personal/pointBalance",
      });
    },
    gobuyvip(id) {
      uni.navigateTo({
        url: "/pages/blindDate/personal/buyvip?Id=" + id,
      });
    },
    login(name) {
      this.$emit("fatherMethod", name);
    },
  },
};
</script>

<style>
.top_b_item2 {
  width: 50%;
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #111;
  font-size: 12px;
  font-family: aa;
}
.userStyle .xq-menus {
  width: 94%;
  border-radius: 10rpx;
  background: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.userStyle .xq-menus2 {
  width: 94%;
  border-radius: 10rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.userStyle .xq-menus .xq-menus_item {
  width: 25%;
  height: 110rpx;
  margin: 20rpx 0 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
}
.xq-menus_item2 .contButton,
.xq-menus_item .contButton {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.userStyle .xq-menus2 .xq-menus_item2 {
  width: 100%;
  height: 90rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* margin-left: 30rpx; */
  padding: 0 26rpx;
  position: relative;
}
.wangr {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  height: 25px;
  line-height: 25px;
  right: 26rpx;
  top: 10px;
}
.renzhen {
  width: 40px;
  height: 15px;
  font-size: 10px;
  margin-top: 10px;
  color: #555555;
  border-radius: 7px;
  border: 1px solid #999999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.MenuNav-o {
  position: absolute;
  top: 0;
  right: 20rpx;
  height: 30rpx;
  font-size: 20rpx;
  color: #ffffff;
  border-radius: 15rpx;
  padding: 0 12rpx;
  line-height: 30rpx;
}
.MenuNav-t {
  height: 30rpx;
  font-size: 20rpx;
  color: #ffffff;
  border-radius: 15rpx;
  padding: 0 12rpx;
  line-height: 30rpx;
  margin-right: 10px;
}
.buyvip {
  width: 100%;
  padding: 0 15px;
}
</style>
