<template>
	<view class="userInfo">
		<view class="my-message">
      <view class="dim-div"></view>
      <view class="user-info-content">
        <view class="left">
          <image :src="userInfo.img" mode=""></image>
        </view>
        <view class="right">
          <view v-if="userInfo.username">
            <view class="username">
              {{userInfo.username}}
              <uni-icons class="vip-icon" custom-prefix="iconfont" type="icon-VIP" size="18" :color="isVip === true ? vipColor : noVipColor "/>
			  <view v-if="isVip === false">画意人</view>
			  <view class="titleLogo" v-if="isVip === true">高级画意师</view>
			</view>
			
            <view class="gold-info">画意值：{{goldNum}}</view>
          </view>
          <view class="login-btn uni-primary" v-else @click="$noMultipleClicks(getUserInfoLogin)">点击登录</view>
        </view>
      </view>
		</view>
    <view class="menu-content">
      <view class="prominent-menu">
        <view class="prominent-menu-item collect-menu" @click="toLinkAuth('/pages/userInfo/myCollection/myCollection')">
          <view class="prominent-menu-title">我的收藏</view>
          <view class="prominent-menu-icon">
            <uni-icons custom-prefix="iconfont" type="icon-wodeshoucang" size="40" :color="primaryColor" />
          </view>
        </view>
		<view class="prominent-menu-item collect-menu" @click="toLinkAuth('/pages/userInfo/aiPaint/aiPaint')">
		  <view class="prominent-menu-title">我的创作</view>
		  <view class="prominent-menu-icon">
		    <uni-icons custom-prefix="iconfont" type="icon-chuangzuozhongxin" size="40" :color="primaryColor" />
		  </view>
		</view>
      </view>
      <view class="list-menu">
        <view class="list-menu-item" @click="toLink('/pages/userInfo/vip/vip')">
          <uni-icons class="list-menu-icon"  type="vip" size="20" :color="primaryColor" />
          <view class="text">会员中心</view>
          <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
        </view>
		<view class="list-menu-item" @click="toLink('/pages/userInfo/goldNum/goldNum')">
		  <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-biaoqing" size="20" :color="primaryColor" />
		  <view class="text">领取画意值</view>
		  <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
		</view>
        <view class="list-menu-item" @click="$noMultipleClicks(useCdk)">
          <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-xunhuanjiagongcishu" size="20" :color="primaryColor" />
          <view class="text">兑换画意值</view>
          <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
        </view>
		<view class="list-menu-item" @click="toLink('/pages/userInfo/goldNum/goldNumLog')">
		  <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-huabi1" size="20" :color="primaryColor" />
		  <view class="text">画意值记录</view>
		  <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
		</view>
      </view>

      <view class="list-menu">
        <view class="list-menu-item" @click="toLink(`/pages/userInfo/question/question`)">
          <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-wenti-" size="20" :color="primaryColor"></uni-icons>
          <view class="text">常见问题</view>
          <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
        </view>
        <view class="list-menu-item" @click="$noMultipleClicks(linkToUs)">
          <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-zhifeiji" size="20" :color="primaryColor" />
          <view class="text">联系我们</view>
          <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
        </view>
        <view class="list-menu-item" @click="toLink(`/pages/userInfo/setting/setting`)">
          <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-chilun" size="20" :color="primaryColor"></uni-icons>
          <view class="text">设置</view>
          <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
        </view>
      </view>

      <view class="share-box">
        <button title="分享" open-type="share">
          <view class="list-menu-item">
            <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-fenxiang1" size="20" :color="primaryColor" />
            <view class="text">分享</view>
            <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
          </view>
        </button>
      </view>

    </view>

  </view>
</template>

<script>
import {loginTiktok} from '@/api/auth.js'
import {useCdk} from '@/api/paint.js'
import {checkVip, queryGoldNum} from '@/api/paint.js'
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons";
	export default {
    components: {UniIcons},
    data() {
			return {
				userInfo: {},
				noClick:true, //防止重复提交,
				isVip: false,
				goldNum: 0,
        primaryColor: "#1a94bc",
        noVipColor: "#6a6a6a",
		vipColor: "#FFA500",
        menus: [
          {
            title: "常见问题",
            icon: "icon-wenti-",
            url: "/pages/userInfo/question/question"
          },
          {
            title: "设置",
            icon: "icon-chilun",
            url: "/pages/userInfo/setting/setting"
          }
        ]
			}
		},
	onShow(){
		this.userInfo = uni.getStorageSync('userInfo')
		this.checkIsVip();
		this.queryGoldNum();
	},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				// console.log(res)
			}
			return {
				title: '来[次元意境]成为独一无二的画意人吧!',
				path: `/pages/index/index?id=${this.userInfo.id}`
			}
		},
		methods: {
			//检查是否是vip
			async checkIsVip() {
				let that = this;
				const data = {
					userId: that.userInfo.id,
					userClientType: 10
				}
			 const res = await checkVip(data);
			 console.log('res===', res);
			 if (res.data.code === 200) {
				 if(res.data.data.isVip == '1') {
					that.isVip = true;
				 }else{
					that.isVip = false;
				 }  
			 }
			 // else {
			 // 	uni.showModal({
			 // 		content: '网络错误，请稍后再试~',
			 // 		showCancel: false
			 // 	});
			 // }
			},
			
			//获取画意值
			async queryGoldNum(){
				let that = this;
				const res = await queryGoldNum(that.userInfo.id);
				if (res.data.code === 200) {
					that.goldNum = res.data.data;
					console.log(that.goldNum);
				}
				// else {
				// 	uni.showModal({
				// 		content: '网络错误，请稍后再试~',
				// 		showCancel: false
				// 	});
				// }
			},
			
      async loginFunc(res, userInfo) {
        const params = {
          code: res.code,
          encryptedData: userInfo.encryptedData,
          iv: userInfo.iv
        }
        // 用户授权登录
        loginTiktok(params).then(res => {
          if (res.data.code === 200) {
            uni.setStorage({
              key: 'userInfo',
              data: res.data.data.userInfo,
            })
			//设置数据供页面展示头像，名称等
            this.userInfo = res.data.data.userInfo;
			console.log('this.userInfo',this.userInfo)
			//设置平台
			uni.setStorage({
			  key: 'platform',
			  data: res.data.data.platform,
			})
			//设置token
            uni.setStorage({
              key: 'token',
              data: res.data.data.access_token,
			  success() {
			  	uni.showToast({
			  	  title: '登录成功!',
			  	  icon: 'none',
			  	})
			  }
            })
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none'
            })
          }
        }).catch(res => {})
      },
      // 获取用户信息
      async getUserInfoLogin() {
        uni.getSetting({
          success: (settingObj) => {
            if (settingObj.authSetting['scope.userInfo'] === undefined || settingObj.authSetting['scope.userInfo']) {
              uni.login({
                force: true,
                success: (res) => {
                  uni.getUserInfo({
                    withCredentials: true,
                    success: (userInfo) => {
                      this.loginFunc(res, userInfo)
                    },
                  })
                },
              })
            } else {
              uni.showModal({
                title: '您已拒绝授权用户信息',
                content: '是否进入权限管理，调整授权？',
                success: function (res) {
                  if (res.confirm) {
                    uni.openSetting({
                      success: (settingRes) => {
                        if (settingRes.authSetting['scope.userInfo']) {
                          uni.login({
                            force: true,
                            success: (res) => {
                              uni.getUserInfo({
                                withCredentials: true,
                                success: (userInfo) => {
                                  this.loginFunc(res, userInfo)
                                },
                              })
                            },
                          })
                        }
                      },
                    })
                  } else if (res.cancel) {
                    console.log('用户点击取消');
                  }
                }
              });
            }
          }
        })
      },
			share() {

			},
      toLink(url) {
        uni.navigateTo({
          url: url
        });
      },
	  
	  
	  
      toLinkAuth(url) {
			  if (this.userInfo) {
          uni.navigateTo({
            url: url
          });
        } else {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
        }
      },
	  
	  //打开抖音关注页
	    linkToUs(){
	  		 tt.openAwemeUserProfile({
	  		   success: (res) => {
	  		     console.log(res);
	  		   }
	  		 });
	  	  },
	  
	  //兑换绘画次数
		useCdk(){
			let that = this;
			uni.showModal({
				title:'提示',
				editable: true,
				placeholderText:'请输入兑换cdk',
				success(response) {
					console.log('response',response);
					if(response.confirm){
						//点击确定
						//调用使用cdk方法
						const data = {
							cdk: response.content,
							userId: that.userInfo.id,
							source: '1',
							appType: '0'
						}
						useCdk(data).then(res =>{
							console.log('res',res);
							if(res.data.code != 200){
								uni.showToast({
								  title: res.data.msg,
								  icon: 'none'
								})
							}else{
								uni.showToast({
								  title: '兑换成功!',
								  icon: 'none'
								})
							}
						});
					}
				},
				fail(res) {
					uni.showToast({
					  title: '兑换失败!',
					  icon: 'none'
					})
					console.log('res',res);
				}
			})
		},
		}
	}
</script>

<style lang="scss">
	.userInfo {
		height: 100%;
    position: relative;

		.my-message {
      width: 100vw;
      height: calc(20vh + 20rpx);
      background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
      position: relative;

      .dim-div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        /* 主要内容 */
        background: rgba(26, 148, 188, .1);
        /* 模糊大小就是靠的blur这个函数中的数值大小 */
        backdrop-filter: blur(25rpx);
      }

      .user-info-content {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 20rpx;
        position: absolute;
        top: 0;
        left: 0;

        .left {
          width: 100rpx;
          height: 100rpx;
          margin-right: 20rpx;

          >image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-image: linear-gradient(-225deg, #70dcc6 0%, #1a94bc 100%);
          }
        }

        .right {
          font-size: 26rpx;
          font-weight: 600;

          .login-btn {
            height: 50rpx;
            line-height: 50rpx;
          }

          .username {
            font-size: 26rpx;
            line-height: 48rpx;
            font-weight: 600;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);

            .vip-icon {
              margin-left: 20rpx;
            }
          }

          .gold-info {
            font-size: 24rpx;
            line-height: 32rpx;
            color: $uni-base-color;
          }

        }
		.titleLogo{
		  color: #1a94bc;
		}
      }
		}

    .menu-content {
      width: 100vw;
      min-height: calc(100vh - 20vh);
      background: $uni-bg-color;
      border-radius: 20rpx 20rpx 0 0;
      position: absolute;
      top: calc(20vh);
      left: 0;
      right: 0;
      padding: 20rpx;
      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);

      .prominent-menu {
        height: 120rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .prominent-menu-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
		  //此处等右边有新模块的时候再采用下面的width
          width: calc(50% - 10rpx);
		  //width: 100%;
          height: 100%;
          border-radius: 10rpx;
          background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
          padding: 20rpx 10rpx 20rpx 30rpx;
          box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);

          .prominent-menu-title {
            font-size: 26rpx;
            font-weight: 600;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
          }

          .prominent-menu-icon {

          }

        }

      }

      .list-menu {
        margin-top: 20rpx;
        padding: 0 20rpx;
        background-color: $uni-white;
        border-radius: 10rpx;
        box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);


      }

    }

    .list-menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80rpx;
      line-height: 80rpx;
      border-bottom: 2rpx solid $uni-border-2;

      .list-menu-icon{
        color: $uni-primary;
      }

      .text {
        font-size: 26rpx;
        line-height: 80rpx;
        width: calc(100% - 100rpx);
      }

      .list-menu-genduo{

      }

    }

    .list-menu-item:first-child {
    }

    .list-menu-item:last-child {
      border-bottom: 0 !important;
    }

		.share-box {
			width: 100%;
      margin-top: 20rpx;
      border-radius: 10rpx;
      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
      overflow: hidden;

			>button {
				background: $uni-white;
				outline: none;
				font-size: 26rpx;
				text-align: left;
				line-height: 14px;
        padding: 0 10px;
			}

		}
	}
</style>
