<template>
  <view class="bottom-popup">
    <u-popup :show="isShow" :round="16" mode="bottom">
      <view class="content">
        <view class="title">我的菜单栏</view>
        <image class="close-icon" src="/static/images/close-icon.png" @click="closePopup"></image>
        <view class="info-wrap">
          <view class="left-info">
            <image class="avatar-icon" :src="userinfo.avatar"></image>
            <view class="">
              <view class="nickname">{{userinfo.nickname}}</view>
              <view class="userid">ID:{{userinfo.idcode}}</view>
            </view>
          </view>
          <view class="right-info" v-if="userinfo.is_vip==0">
            {{ userinfo.number==0?'您的体验次数已经用完啦，升级VIP获得全部功能使用权~':`拥有免费次数：${userinfo.number}次`}}
          </view>
          <view class="right-info vip-wrap" v-if="userinfo.is_vip==1">
            <image class="vip-icon" src="/static/images/vip-icon.png" mode=""></image> 使用次数无限制哦~
          </view>
        </view>
        <view class="invite-wrap">
          <view class="invite-left">
            <view class="">邀请新的朋友来体验</view>
            <view class="times">邀请成功可获得 <text
                style=" font-weight: 700; color: #dbc5b8;">{{projectConfig.share_num}}次</text> 次数奖励</view>
          </view>
          <view class="invite-right" @click="isShowPopup = true">邀请朋友 </view>
        </view>
        <template v-if="userinfo.is_vip==0">
          <image src="/static/images/vip-bg.png" class="vip-bg" @click="toMember"></image>
        </template>
        <view class="clearall-wrap">
          <view class="clear-all" @click="clearAll">清除聊天记录</view>
        </view>
        <!-- <image class="tips" src="/static/images/button.png" mode=""></image> -->
        <view class="tips">浮窗使用,更加便捷</view>
      </view>
    </u-popup>
    <custom-popup :isShowClose="true" :isShowPopup="isShowPopup" @closePopup="isShowPopup=false"
      :posterImg="userinfo.share_qr" height="900rpx">
    </custom-popup>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import navigateToPages from '@/utils/navigateToPages.js'

  import customPopup from '@/components/custom-popup/custom-popup.vue'
  const emits = defineEmits(['closePopup', 'clearAll'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false
    },
    userinfo: {
      type: Object,
      default: () => ({})
    },
    projectConfig: {
      type: Object,
      default: () => ({})
    }
  })
  const isShowPopup = ref(false)

  function toMember() {
    navigateToPages('/pages/member/member')
  }

  function closePopup() {
    emits('closePopup')
  }

  function clearAll() {
    emits('clearAll')
  }
</script>

<style lang="scss">
  .bottom-popup {
    color: #fff;
  }

  .content {
    position: relative;
    width: 750rpx;
    padding: 32rpx;
    box-sizing: border-box;
    height: 900rpx;
    border-radius: 32rpx 32rpx 0 0;
    background: #242228ff;
  }

  .title {
    font-size: 32rpx;
    font-weight: 700;
    text-align: center;
  }

  .close-icon {
    @include common-icon-wh(40rpx);
    position: absolute;
    top: 32rpx;
    right: 32rpx;
  }

  .info-wrap {
    @include flexCj();
    margin-top: 60rpx;

    .left-info {
      @include flex();

      .avatar-icon {
        @include common-icon-wh(92rpx);
        border-radius: 12rpx;
        margin-right: 20rpx;
      }

      .userid {
        margin-top: 4rpx;
        color: #ffffff59;
      }
    }

    .right-info {
      @include flexCj(center);
      min-width: 316rpx;
      max-width: 400rpx;
      text-align: center;
      // width: 400rpx;
      padding: 12rpx;
      box-sizing: border-box;
      border-radius: 12rpx;
      color: #f9ddbeff;
      background: #3a3539;
    }

    .vip-wrap {
      @include flexcenter();

      image {
        @include common-icon-wh(36rpx);
        margin-left: 12rpx;
      }
    }
  }

  .invite-wrap {
    @include flexCj();
    margin: 40rpx 0 60rpx 0;

    .invite-left {
      .times {
        margin-top: 8rpx;
        color: #838387;
        font-size: 26rpx;
      }
    }

    .invite-right {
      width: 160rpx;
      height: 56rpx;
      line-height: 56rpx;
      text-align: center;
      color: #242228ff;
      border-radius: 12rpx;
      background: linear-gradient(90deg, #fce4c7ff 0%, #e0a879ff 100%);
    }
  }

  .vip-bg {
    width: 686rpx;
    height: 89rpx;
  }

  .clearall-wrap {
    @include flexCj(center);
  }

  .clear-all {
    width: 216rpx;
    height: 56rpx;
    border-radius: 12rpx;
    line-height: 56rpx;
    color: #000 !important;
    background: linear-gradient(90deg, #fce4c7ff 0%, #e0a879ff 100%);
    text-align: center;
    color: #ffffff8c;
    margin-top: 60rpx;
  }

  .tips {
    width: 686rpx;
    height: 88rpx;
    margin-top: 166rpx;
    padding-bottom: 88rpx;
    text-align: center;
    color: #f2c995;
  }

  .qr-code {
    width: 500rpx;
  }
</style>