<template>
  <view
    class="flex-1"
    style="position: relative;"
  >
    <GLoading />
    <view class="body-bg" />
    <view
      class="flex-1"
      style="position: absolute;z-index: 9999;"
    >
      <view
        class="px-28 flex-row pt-48 "
        @click="getUserInfo"
      >
        <image
          class="avatar"
          :src="userInfo.avatar || '/static/images/avatar.png'"
          mode="aspectFit"
        />
        <view
          class=""
          style="justify-content: center;"
        >
          <view
            class="flex-row"
            style="align-items: center;"
          >
            <text class="nikeName">
              {{ userInfo.nickname || '未登录' }}
            </text>
            <u-icon
              v-if="userInfo.is_vip === 0"
              class="ml-10"
              name="/static/images/member-off.png"
              size="48rpx"
            />
            <u-icon
              v-else
              class="ml-10"
              name="/static/images/member.png"
              size="48rpx"
            />
          </view>
          <text
            v-if="uid"
            class="remake mt-10"
          >
            ID:{{ uid }}
          </text>
        </view>
      </view>
      <view class="userInfo mt-48 px-30 flex-row mb-20">
        <view
          class="flex-row flex-1 "
          style="align-items: center;"
        >
          <view class="flex-row flex-1 flex-center	">
            <view
              class="flex-center mr-120"
              @click="navPay"
            >
              <text class="userInfo-textOne">
                {{ userInfo.egold || 0 }}
              </text>
              <text class="userInfo-textTo mt-14">
                账户K币
              </text>
            </view>
            <view
              class="flex-center"
              @click="navPay"
            >
              <text class="userInfo-textOne">
                {{ userInfo.vip_enddate || 0 }}
              </text>
              <text class="userInfo-textTo mt-14">
                会员天数
              </text>
            </view>
          </view>
        </view>

        <view
          class=" flex-center ml-90"
          style="width: 212rpx;"
        >
          <view
            v-if="platform !== 'ios' && userInfo.ispay === 1"
            class="consumption  flex-center"
            @click="navPay"
          >
            <text class="consumption-text">
              立即充值
            </text>
          </view>
          <view
            v-else
            class="immediately flex-center"
            @click="keep"
          >
            <text class="immediately-text">
              立即追剧
            </text>
          </view>
        </view>
      </view>
      <view
        class="flex-1 option"
        style="width: 750rpx;"
      >
        <view
          class="flex-row"
          style="align-items: center;justify-content: space-between; "
          @click="seeLs"
        >
          <view class="flex-row">
            <u-icon
              class="mr-34"
              name="/static/icon/history.png"
              size="48rpx"
            />
            <text class="option-text">
              历史观看
            </text>
          </view>
          <image
            src="@/static/icon/arrowLeft.png"
            mode="aspectFill"
            style="width:18rpx;height: 32rpx ;"
          />
        </view>
        <view
          v-if="historyList.length !== 0"
          class="mt-28 "
        >
          <u-scroll-list :indicator="false">
            <view
              v-for="(item, index) in historyList"
              :key="index"
              @click="historyItem(item)"
            >
              <image
                class="dataItem-img"
                :src="item.cover"
                mode="aspectFill"
              />
            </view>
          </u-scroll-list>
        </view>
        <view
          class="flex-row mt-62"
          style="align-items: center;justify-content: space-between; "
          @click="navGetRouter('/pages/my/recharge/index')"
        >
          <view class="flex-row">
            <u-icon
              class="mr-34"
              name="/static/icon/wallet.png"
              size="48rpx"
            />
            <text class="option-text">
              充值明细
            </text>
          </view>
          <image
            src="@/static/icon/arrowLeft.png"
            mode="aspectFill"
            style="width:18rpx;height: 32rpx ;"
          />
        </view>
        <view
          class="flex-row mt-62"
          style="align-items: center;justify-content: space-between; "
          @click="getServiceVx"
        >
          <view class="flex-row">
            <u-icon
              class="mr-34"
              name="/static/icon/service.png"
              size="48rpx"
            />
            <text class="option-text">
              联系客服
            </text>
          </view>
          <image
            src="@/static/icon/arrowLeft.png"
            mode="aspectFill"
            style="width:18rpx;height: 32rpx ;"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { history, getUserInfo, getkefu, renew } from '@/api/index.js';

export default {
	data() {
		const uid = uni.getStorageSync('uid') || '';
		return {
			userInfo: {},
			historyList: [],
			uid,
			platform: ''
		};
	},
	onShow() {
		const isPopup = uni.getStorageSync('isPopup');
		if(isPopup){
			uni.navigateTo({
				url:'/pages/pay/pay'
			});
		}
		if(!this.userInfo.avatar){
			this.$showLoading(true);
		}
		
		this.platform = uni.getSystemInfoSync().platform;
		this.getData();
	},
	methods: {
		getUserInfo() {
			if (!this.userInfo.nickname && !this.userInfo.avatar) {
				// #ifdef MP-TOUTIAO
				tt.getUserProfile({
					success: res => {
						console.log(res);
						const userInfo = res.userInfo;
						renew({
							nickname: userInfo.nickName,
							avatar: userInfo.avatarUrl
						}).then(res => {
							this.userInfo.avatar = userInfo.avatarUrl;
							this.userInfo.nickname = userInfo.nickName;
						});
					}
				});
				// #endif
			}
		},
		historyItem(e) {
			uni.navigateTo({
				url: `/pages/video/index?sid=${e.sid}`
			});
		},
		navPay() {
			if (this.userInfo.ispay) {
				uni.navigateTo({
					url: '/pages/pay/pay'
				});
			}
		},
		seeLs(){
			uni.navigateTo({
				url:'/pages/my/history/index'
			});
		},
		navGetRouter(url) {
			uni.navigateTo({
				url: url
			});
		},
		getData() {
			history().then(res => {
				this.historyList = res;
			});
			getUserInfo().then(res => {
				this.userInfo = res.info || {};
				this.$showLoading(false);
			});
		},
		getServiceVx() {
			getkefu().then(res => {
				uni.setClipboardData({
					data: res.wxkf,
					showToast: false,
					success: function() {
						uni.showToast({
							title: '客服微信已复制',
							duration: 2000
						});
					}
				});
			});
		},
		keep() {
			uni.switchTab({
				url: '/pages/playlet/index'
			});
		}
	}
};
</script>

<style lang="scss">
.avatar {
	width: 162rpx;
	height: 162rpx;
	margin-right: 20rpx;
	border-radius: 50%;
}
.nikeName {
	font-size: 44rpx;
	font-weight: bold;
	color: #1a1a1a;
}
.remake {
	font-size: 28rpx;
	font-weight: 400;
	color: #999999;
}
.userInfo {
	height: 184rpx;
	width: 750rpx;
	border-radius: 40rpx 40rpx 0 0;
	background-color: #ffffff;
}
.userInfo-textOne {
	font-size: 40rpx;
	font-weight: bold;
	color: #1a1a1a;
}
.userInfo-textTo {
	font-size: 30rpx;
	font-weight: 400;
	color: #666666;
}
.consumption {
	width: 212rpx;
	height: 76rpx;
	background: linear-gradient(89deg, #ff6c90 0%, #ff002e 100%);
	border-radius: 18rpx;
	.consumption-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
	}
}
.option {
	background-color: #ffffff;
	padding: 48rpx 30rpx;
	.option-text {
		font-size: 34rpx;
		font-weight: 500;
		color: #1a1a1a;
	}
	.dataItem-img {
		width: 192rpx;
		height: 260rpx;
		border-radius: 16rpx;
		margin-right: 26rpx;
	}
}
.body-bg {
	position: absolute;
	top: 2rpx;
	width: 750rpx;
	z-index: 0;
	height: 434rpx;
	background: url('https://diyyhdapi.qinjiu8.com/backImg.png');
	background-size: 100% 100%;
}
.immediately {
	width: 212rpx;
	height: 76rpx;
	background: linear-gradient(92deg, #ff6636 0%, #ffa236 100%);
	border-radius: 50rpx;
	.immediately-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
	}
}
</style>
