<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 class="username" v-if="userInfo.username">{{userInfo.username}}</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>
      <view class="list-menu">
        <view class="list-menu-item" v-for="item in menus" @click="toLink(item.url)">
          <uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="item.icon" size="20" :color="primaryColor"></uni-icons>
          <view class="text">{{item.title}}</view>
          <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
        </view>
      </view>
      <view class="share-box">
		<button title="联系我们" @click="$noMultipleClicks(linkToUs)">
		  <view class="list-menu-item">
		    <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>
		</button>  
		  
        <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 UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons";
	export default {
    components: {UniIcons},
    data() {
			return {
				userInfo: {},
				noClick:true, //防止重复提交
        primaryColor: "#1a94bc",
        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')
	},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				// console.log(res)
			}
			return {
				title: '想要好看的图片就来[次元意境]吧!',
				path: `/pages/index/index?id=${this.userInfo.id}`
			}
		},
		methods: {
      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;
            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 => {})
      },
      // 获取用户信息
      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(){
		  uni.showToast({
		    title: '敬请期待',
		    icon: 'none'
		  })
		  //tt.openAwemeUserProfile(options);
		  //console.log('options',options)
	  }
		}
	}
</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;
            font-weight: 600;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
          }

        }
      }
		}

    .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;
			}

		}
	}
</style>
