<style scoped>
    .pages{
        min-height: 100vh;
		background-color: #f6f6f6;
    }
	.FriendsAndRelatives-header{
        height: 491rpx;
        text-align: center;
        position: relative;
    }
    .FriendsAndRelatives-header image{
        margin: auto;
    }
    .header-list{
        position: absolute;
        left: 50rpx;
        right: 50rpx;
        bottom: 15rpx;
        padding: 46rpx 0 39rpx 0;
        background: #FFFFFF;
        opacity: 0.95;
        border-radius: 40rpx;
    }
    .header-left{
        width: 130rpx;
        position: relative;
        left: 49rpx;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        margin-right: 20rpx;
    }
    .header-left .left-text{
        width: 99rpx;
        line-height: 99rpx;
        justify-content: center;
        position: relative;
        top: 15rpx;
    }
    .header-left .left-text text{
        font-size: 46rpx;
        font-weight: 800;
        font-style: italic;
        color: #111111;
        line-height: 70rpx;
    }
    .header-left .left-text view{
        font-size: 28rpx;
        font-weight: 500;
        margin-top: -10rpx;
        margin-left: 10rpx;
    }
    .header-right .left-title,.header-left .left-title{
        font-size: 20rpx;
        font-weight: 500;
        color: #2F2F2F;
    }
    .header-right{
        height: 76rpx;
        flex-grow: 1;
        justify-content: space-between;
        margin-left: 82rpx;
        margin-right: 49rpx;
        border-left: 2rpx solid #ECECEC;
        padding: 0 0 0 72rpx;
    }
    .header-right .right-image{
        position: relative;
        top: -35rpx;
    }
    .header-right .right-image image{
        display: block;
    }
    .right-button{
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0);
        z-index: 2;
    }
    .right-button::after{
        border: 1rpx solid rgba(0,0,0,0);
    }
    .FriendsAndRelatives-content{
        padding: 0 50rpx;
    }
    .FriendsAndRelatives-list{
        margin-bottom: 40rpx;
    }
    .title{
        font-size: 34rpx;
        font-weight: 800;
        color: #111111;
        margin-top: 60rpx;
    }
    .text{
        margin-top: 20rpx;
        margin-bottom: 51rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #BEBEBE;
    }
    .FriendsAndRelatives-list{
        background: #ffffff;
        border-radius: 40rpx;
        padding: 54rpx 39rpx;
    }
    .list-left{
        flex-direction: column;
    }
    .list-left .left-text{
        color: #111111;
        font-weight: bold;
        font-size: 30rpx;
    }
    .list-left .left-text view{
        margin-left: 20rpx;
    }
    .list-left .left-time{
        font-size: 24rpx;
        font-weight: 500;
        color: #919191;
        margin-top: 20rpx;
    }
    .list-right{
        flex-shrink: 0;
        margin-left: 20rpx;
    }
    .cross-box{
        text-align: center;
        margin-bottom: 20rpx;
    }
    /deep/.van-empty{
        padding: 0;
    }
</style>
<template>
	<view class="FriendsAndRelatives pages" :style="{ 'padding-bottom': `${statusBarHeight}px` }">
        <view class="FriendsAndRelatives-header">
            <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1664163809000_838.png" 
            style="width: 559rpx;height: 405rpx;"></image>
            <view class="header-list flex_between_center">
                <view class="header-left flex">
                    <view class="left-text flex" style="width: 99rpx;height: 99rpx;">
                        <text>{{FriendCount||0}}</text>
                        <view>人</view>
                    </view>
                    <text class="left-title">亲友团</text>
                </view>
                <view class="header-right flex">
                    <view class="right-image">
                        <button class="right-button" data-name="shareBtn" open-type="share"></button>
                        <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1664164163000_619.png"
                        style="width: 99rpx;height: 99rpx;"></image>
                        <text class="left-title">微信邀请</text>
                    </view>
                    <view class="right-image" style="margin-right: 33rpx;" @click="QRcode()">
                        <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1664164159000_60.png"
                        style="width: 99rpx;height: 99rpx;"></image>
                        <text class="left-title">面对面邀请</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="FriendsAndRelatives-content">
            <view class="title">已邀请的亲友</view>
            <view class="text">随时联系哟</view>
            <view class="FriendsAndRelatives-list flex_between_center" v-for="(item,index) in dataList" :key="index">
                <view class="list-left flex">
                    <view class="left-text flex">
                        <text>{{item.WeChatName}}</text>
                        <!-- <view>(18225556648)</view> -->
                    </view>
                    <text class="left-time">加入时间：{{item.CreateTime}}</text>
                </view>
                <view class="list-right">
                    <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1664164166000_196.png"
                    @click.stop="DelData(item)"
                    style="width: 36rpx;height: 35rpx;"></image>
                </view>
            </view>
            <van-empty description="暂无亲友" v-if="dataList.length === 0" />
            
        </view>
        <van-popup
		  :show="showPopup"
		  round
		>
            <view style="padding: 63rpx;">
                <image :src="QRcodeImg"
                style="width: 378rpx;height: 377rpx;"></image>
            </view>        
            <view class="cross-box">
                <van-icon name="close" color="#111111" size="48rpx" @click="showPopup=false"/>
            </view>
        </van-popup>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		inject,
	} from "vue";
	import Loadmore from "../../components/loadmore.vue";
	import bottom from "../../components/bottom";
	import {
		GetFriend,CreateFriendQrCode,RemoveMyChild
	} from "../../api/erp";
	export default {
		components: {
			bottom,
			Loadmore,
		},
		setup(props, context) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
                userWxInfo:null,
                wxUserAuthInfo:null,
                erpUserInfo:null,
                erpUrl:'',
                QRcodeImg:'',
                FriendCount: null,
                loading:true,
                Account:'',
                showPopup: false,
				msg: {
					pageIndex: 1,
					pageSize: 10
				},
				dataList: [],
                statusBarHeight: 0,
                
            });
			const methods = {
                // 删除接口
                DelData(item){
                    uni.showModal({
                        title: '提示',
                        content: '将要删除数据,是否继续',
                        success: function (res) {
                            if (res.confirm) {
                                uni.showLoading()
                                let msg = {
                                    Id: item.Id
                                }
                                let res = RemoveMyChild(msg);
                                if (res) {
                                    uni.hideLoading()
                                    that.getData()
                                }
                                
                            } else if (res.cancel) {
                                uni.showToast({
                                    title:'已取消',
                                    icon:'none',
                                    duration: 500
                                })
                            }
                        }
                    });
                },
                usernameInput(val) {
					data.Account = val.detail;
				},
                async QRcode(){
                    uni.showLoading()
                    let msg = {
                        url: `/pages/FriendsAndRelatives/addFriendsAndRelatives?unionid=${data.wxUserAuthInfo.unionid}&AccountName=${data.erpUserInfo.AccountName}&nickName=${data.userWxInfo.nickName}`,//"www.baidu.com",
                        width: 200
                    }
					let res = await CreateFriendQrCode(msg);
					if (res) {
						uni.hideLoading()
                        data.QRcodeImg = data.erpUrl+res.Data
                        console.log(data.QRcodeImg,'----')
                        data.showPopup = true
					}
				},
                async getData() {
					uni.showLoading()
					let res = await GetFriend(data.msg);
					if (res) {
						uni.hideLoading()
						if (data.timer) data.timer = null;
						if (data.msg.pageIndex === 1) {
							data.dataList = res.Data&&res.Data.PageData;
						} else {
							data.dataList = [...data.dataList, ...res.Data.PageData];
						}
						data.pageCount = res.Data&&res.Data.PageCount
						if (data.msg.pageIndex >= res.Data&&res.Data.PageCount) {
							data.pageState = "none";
						} else {
							data.pageState = "more";
						}
					}
				},
			};
            let that = methods;
			onMounted(() => {
                data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
            })
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(options) {
            this.FriendCount = options.FriendCount
		},
        onShow(){
            this.erpUrl = this.$erpImgUrl
            this.userWxInfo = uni.getStorageSync('userWxInfo').userInfo
            this.wxUserAuthInfo = uni.getStorageSync('wxUserAuthInfo')
            this.erpUserInfo = uni.getStorageSync('erpUserInfo')
            this.getData()
        },
		onReachBottom() {
			
		},
        onShareAppMessage() {
			return {
                title: "邀请好友",
                query: `/pages/FriendsAndRelatives/addFriendsAndRelatives?unionid=${this.wxUserAuthInfo.unionid}&AccountName=${this.erpUserInfo.AccountName}&nickName=${this.userWxInfo.nickName}`,
                imageUrl: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1664163809000_838.png",
            };
		},
	};
</script>
