<style scoped>
    .pages{
        min-height: 100vh;
		background-color: #f6f6f6;
    }
	.dataList-header{
        font-size: 30rpx;
        position: fixed;
        left: 50rpx;
        right: 50rpx;
        top: 0;
        z-index: 2;
    }
    .dataList-header view{
        width: 100%;
        line-height: 88rpx;
        background: #FCEEEF;
        border-radius: 44rpx;
        text-align: center;
        color: #C91727;
    }
    .dataList-header text{
        margin-left: 27rpx;
    }
    .dataList-content{
        padding: 130rpx 0rpx 0 0rpx;
    }
    .title{
        font-size: 34rpx;
        font-weight: 800;
        color: #111111;
        padding: 0 50rpx;
    }
    .text{
        margin-top: 20rpx;
        margin-bottom: 40rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #BEBEBE;
        padding: 0 50rpx;
    }
    .dataList-box{
        margin-bottom: 40rpx;
    }
    .dataList-form{
        /* height: 204rpx; */
        flex-grow: 1;
        position: relative;
        /* padding: 31rpx 0rpx 0 42rpx;  */
        padding: 0rpx 0rpx 0 42rpx; 
        margin-bottom: 39rpx;
    }
    .dataList-image{
        width: 177rpx;
        height: 204rpx;
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663932626000_693.png');
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
        left: 50rpx;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .dataList-form.active .dataList-image{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663932626000_675.png');
        background-size: 100% 100%;
    }
    .dataList-image text{
        margin-top: 17rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #ffffff;
    }
    .dataList-center{
        background-color: #ffffff;
        margin-top: 40rpx;
        border-radius: 0 50rpx 50rpx 0;
        padding: 33rpx 48rpx 33rpx 157rpx;
        box-shadow: 0px 6px 29px 0px rgba(76, 76, 76, 0.09);
        margin-left: 50rpx;
        margin-right: 50rpx;
    }
    .dataList-left{
        flex-direction: column;
    }
    .left-text{
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #111111;
        margin-bottom: 32rpx;
    }
    .left-phone{
        font-size: 24rpx;
        color: #919191;
    }
    .left-phone text{
        margin-left: 10rpx;
    }
    .dataList-right{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .dataList-right text{
        font-size: 22rpx;
        font-weight: 500;
        color: #50D487;
        margin-top: 15rpx;
    }
    .dataList-right.active text{
        color: #EF5252;
    }
    .van-swipe-cell__left,
	.van-swipe-cell__right {
		position: absolute;
		right: 0rpx;
        bottom: 0;
		width: 78rpx;
        height: 166rpx;
        line-height: 166rpx;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
        text-align: center;
	}
    /deep/.van-swipe-cell__left .van-button--danger,
	/deep/.van-swipe-cell__right .van-button--danger{
        background: rgba(0,0,0,0);
        border: 0;
    }
</style>
<template>
	<view class="pages">
        <view class="dataList-header">
            <view @click="addChild">
                <van-icon name="plus" />
                <text>添加小孩信息</text>
            </view>
        </view>
        <view class="dataList-content">
            <view class="title">在读小孩列表</view>
            <view class="text">左滑可删除小孩信息</view>
            <view v-for="(item,index) in dataList" :key="index">
                <van-swipe-cell
                    id="swipe-cell"
                    :right-width="70"
                    async-close
                    :key="index"
                    @close="onClose">
                        <view class="dataList-form"
                        :class="{'active':item.StuSexStr!='女'}">
                            <view class="dataList-image flex">
                                <image :src="item.StuSexStr!='女'?imgBoy:imgGirl" 
                                mode="aspectFill" style="width:101rpx;height:101rpx;">
                                </image>
                                <text>{{item.StuName}}</text>
                            </view>
                            <view class="dataList-center active flex_between_center">
                                <view class="dataList-left flex">
                                    <text class="left-text">{{item.SchoolName}}</text>
                                    <view class="left-phone">
                                        <van-icon name="phone" color="#919191"></van-icon>
                                        <text>{{item.StuRealMobile}}</text>
                                    </view>
                                </view>
                                <view v-if="item.StateStr" class="dataList-right flex"
                                :class="{'active':item.StateStr!='学习中'}">
                                    <image :src="item.StateStr=='学习中'?imgUrlG:imgUrlR" style="width: 24rpx;height: 24rpx;"></image>
                                    <text>{{item.StateStr}}</text>
                                </view>
                            </view>
                        </view>
                        <view slot="right" class="van-swipe-cell__right">
                            <van-icon name="cross" color="#BCBCBC" size="20" @click.stop="DelData(item)" ></van-icon>
                    </view>
            </van-swipe-cell>
            </view>
            
            <van-empty description="暂无在读小孩" v-if="dataList.length === 0" />
            <view v-if="dataList.length > 0">
                <Loadmore :state="pageState" />
            </view>
        </view>
		
	</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 {
		MyChildList,RemoveMyChild
	} from "../../api/erp";
	export default {
		components: {
			bottom,
			Loadmore,
		},
		setup(props, context) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				msg: {
					pageIndex: 1,
					pageSize: 10,
				},
				pageCount: 0,
				dataList: [],
				pageState: "more",
				timer: null, //防抖
                imgUrlG:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663930765000_891.png',//学习状态
                imgUrlR:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663930765000_218.png',//休学状态
                imgBoy:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663932008000_116.png',//男生头像
                imgGirl:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663931928000_154.png',//女生头像
            });
			const methods = {
                addChild(){
                    uni.navigateTo({
						url: '/pages/MyChild/addChild',
					});
                },
                onClose(event) {
				    const { position, instance } = event.detail;
				    switch (position) {
				      case 'left':
				      case 'cell':
					  case 'right':
				        instance.close();
				        break;
				    }
				},
                // 删除接口
                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
                                })
                            }
                        }
                    });
                    
                },
				jumpPage(url) {
					uni.navigateTo({
						url: url,
					});
				},
				async getData() {
                    uni.showLoading()
					let res = await MyChildList(data.msg);
					if (res) {
                        uni.hideLoading()
						if (data.timer) data.timer = null;
						if (data.msg.pageIndex === 1) {
							data.dataList = res.Data.PageData;
						} else {
							data.dataList = [...data.dataList, ...res.Data.PageData];
						}
						data.pageCount = res.Data.PageCount
						if (data.msg.pageIndex >= res.Data.PageCount) {
							data.pageState = "none";
						} else {
							data.pageState = "more";
						}
					}
				},
			};
			let that = methods;
            onMounted(() => {
                
            });
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(options) {
			// uni.setNavigationBarTitle({
			// 	title: this.pageTitle
			// });
		},
        onShow(){
            this.dataList = []
            this.msg.pageIndex = 1
            this.getData()
        },
		onReachBottom() {
			if (this.msg.pageIndex < this.pageCount) {
				this.pageState = "loading";
				if (this.timer) clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.msg.pageIndex++;
					this.getData();
				}, 1000);
			} else {
				this.pageState = "none";
			}
		}
	};
</script>
