<template>
    <view class="content">
        <no-none v-if='list.length<=0'></no-none>
        <block v-else>
            <view style="margin-top: 30rpx;" class="item" v-for="(item,index) of list" :key='index'>
                <view class="border-b item-title flex-y-center">
                    <image :src="item.avatar" mode="aspectFill" class="avatar" @click="previewImg(item.avatar)"></image>
                    <text>{{item.nickname || '未知用户'}} {{item.mobile || ''}}</text>
                    <switch :checked="item.checked" type="checkbox" @change="onChooseUser($event,index)"
                        style="margin-left: auto;" />
                </view>

                <view class="item-bottom flex-y-center">
                    <view class="flex-grow-1">
                        <view class="box-pack-between item-bottom-right flex-y-center">
                            <text><text class="item-bottom-number">所属门店</text>：{{item.store_name}} </text>
                        </view>
                        <view class="box-pack-between item-bottom-right">
                            <text><text class="item-bottom-number">会员等级</text>：{{item.level_name}}</text>
                        </view>
                        <view class="box-pack-between item-bottom-right flex-y-center">
                            <text><text class="item-bottom-number">当前积分</text>：{{item.integral}} </text>
                        </view>
                        <view class="box-pack-between item-bottom-right flex-y-center">
                            <text><text class="item-bottom-number">当前余额</text>：{{item.balance}} </text>
                        </view>

                        <view class="box-pack-between item-bottom-right flex-y-center">
                            <text><text class="item-bottom-number">领卡时间</text>：{{item.addtime}} </text>
                        </view>
                    </view>
                </view>
            </view>

        </block>

        <view style="height: 90px;"></view>

        <navigator style="margin-bottom:0" url='./addCoupon' hover-class="none" class="bottom-bar">
            <view class="btn" style="background: #fff;border:1px solid #ddd;color:#888" @click="showScreen">筛选</view>
            <view class="btn" @click="showAddPop">+新增推送</view>
        </navigator>
        <uni-popup ref="popup" type="bottom" background-color="#fff" style="z-index:100" :is-mask-click="false"
            :mask-click="false">
            <view class="screen-pop">
                <view class="cell">
                    <view class="label">手机号码</view>
                    <view class="desc"><input type="text" v-model="screen.tel" class="input-box" placeholder="请输入" />
                    </view>
                </view>
                <view class="cell">
                    <view class="label">身份</view>
                    <view class="desc">
                        <picker :range="levels" range-key="name" @change="onChangeLevel">
                            <input type="text" :value="screen.level_name" class="input-box" placeholder="请输入" />
                        </picker>
                    </view>
                </view>
                <view class="cell">
                    <view class="label">时间</view>
                    <view class="desc flex flex-between flex-y-center">
                        <picker mode="date" @change="onChangeTime($event,'start_time')">
                            <input type="text" :value="screen.start_time" placeholder="开始时间" class="input-box"
                                style="text-align: center;" disabled>
                        </picker>
                        <view>—</view>
                        <picker mode="date" @change="onChangeTime($event,'end_time')">
                            <input type="text" :value="screen.end_time" placeholder="结束时间" class="input-box"
                                style="text-align: center;" disabled>
                        </picker>
                    </view>
                </view>
                <view class="btns">
                    <view class="btn reset-btn" @click="onResetScreen">重置</view>
                    <view class="btn submit-btn" @click="onSubmitScreen">确定</view>
                </view>
                <view class="is-iphone-x"></view>
            </view>
        </uni-popup>
        <uni-popup ref="addPopup" type="bottom" background-color="#fff" style="z-index:100" :is-mask-click="false"
            :mask-click="false">
            <view class="screen-pop">
                <view class="cell">
                    <view class="label">推送文案</view>
                    <view class="desc"><input type="text" v-model="sendInfo.textarea" class="input-box"
                            placeholder="请输入" />
                    </view>
                    <view class="tips">注意：文案加起来不能超过19个字符。如果有赠送积分，推送文案内要写推送积分数。举例：您好，本次积分活动赠送34积分</view>
                </view>
                <view class="cell">
                    <view class="label">赠送积分</view>
                    <view class="desc"><input type="text" v-model="sendInfo.integral" class="input-box"
                            placeholder="请输入" />
                    </view>
                    <view class="tips">注意注意：假设不赠送积分，则填0</view>
                </view>
                <view class="btns">
                    <view class="btn reset-btn" @click="onResetAdd">取消</view>
                    <view class="btn submit-btn" @click="onSubmitAdd">推送</view>
                </view>
                <view class="is-iphone-x"></view>
            </view>
        </uni-popup>
    </view>

</template>

<script>
    export default {
        data() {
            return {

                list: [],
                page: 1,
                is_load: false,
                levels: [{
                    id: 55,
                    name: "普通会员"
                }],
                screen: {
                    level: "",
                    tel: "",
                    start_time: "",
                    end_time: ""
                },
                sendUserIds: "",
                sendInfo: {
                    textarea: "",
                    integral: ""
                }
            }
        },

        onLoad() {
            this.getLevels()
        },

        onShow() {
            this.page = 1;
            this.list = [];
            this.http();
        },

        onReachBottom(e) {
            if (!this.is_load) {
                this.page = this.page + 1;
                this.http();
            }
        },

        methods: {
            onChooseUser(e, index) {
                console.log(e, index)
                this.list[index].checked = e.detail.value
            },
            showScreen() {
                this.$refs.popup.open('bottom')
            },
            getLevels() {
                this.request({
                    url: "alipaycoupon/level_index",
                    data: {
                        admin_id: uni.getStorageSync("admin_id"),
                    },
                    showLoading: true,
                }).then(res => {
                    console.log(res, "res")
                    if (res.code === "200") {
                        this.levels = this.levels.concat(res.data)
                    }
                });
            },
            onChangeLevel(e) {
                this.screen.level_name = this.levels[e.detail.value].name
                this.screen.level = this.levels[e.detail.value].id
            },
            onChangeTime(e, name) {
                // console.log(e)
                this.screen[name] = e.detail.value
            },
            onResetScreen() {
                this.screen = {
                    level: "",
                    tel: "",
                    start_time: "",
                    end_time: ""
                }
                this.$refs.popup.close()
                this.http()
            },
            onSubmitScreen() {
                this.page = 1
                this.list = []
                if (this.screen.start_time && this.screen.end_time) {
                    let start = this.screen.start_time
                    let end = this.screen.end_time
                    if (Date.parse(start.replace(/-/g, '/')) > Date.parse(end.replace(/-/g, '/'))) {
                        this.screen.start_time = end
                        this.screen.end_time = start
                    }
                }
                this.$refs.popup.close()
                this.http()
            },
            showAddPop() {
                let arr = this.list.filter(item => {
                    return item.checked
                })
                console.log(arr)
                if (arr.length > 0) {
                    this.sendUserIds = arr.map(item => {
                        return item.id
                    })
                    this.$refs.addPopup.open("bottom")
                } else {
                    uni.showToast({
                        title: "请选择推送对象",
                        icon: "none"
                    })
                }
            },
            onResetAdd() {
                this.list.map(item => {
                    item.checked = false
                })
                this.sendInfo = {
                    textarea: "",
                    integral: ""
                }
                this.$refs.addPopup.close()
            },
            onSubmitAdd() {
                if (this.sendInfo.textarea == '' || this.sendInfo.integral == '') {
                    uni.showToast({
                        title: "请完善表单后提交",
                        icon: "none"
                    })
                    return false
                }
                this.request({
                    url: 'alipaycoupon/tuisoinglist',
                    data: {
                        admin_id: uni.getStorageSync("admin_id"),
                        textarea: this.sendInfo.textarea,
                        integral: this.sendInfo.integral,
                        ids: this.sendUserIds.join(',')
                    },
                }).then(res => {
                    if (res.code == 200) {
                        uni.showModal({
                            content: res.message,
                            showCancel: false,
                            success: (r) => {
                                this.sendInfo = {
                                    textarea: "",
                                    integral: ""
                                }
                                this.$refs.addPopup.close()
                                this.list = []
                                this.page = 1
                                this.http()
                            }
                        })
                    } else {
                        uni.showToast({
                            title: res.message,
                            icon: 'none'
                        })
                    }
                }).catch(res => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                })

            },
            previewImg(src) {
                if (src) {
                    uni.previewImage({
                        urls: [src]
                    });
                }

            },


            http() {
                let url = "alipaycoupon/gzh_list";
                this.request({
                    url,
                    data: {
                        admin_id: uni.getStorageSync("admin_id"),
                        page: this.page,
                        limit: 10,
                        level: this.screen.level,
                        tel: this.screen.tel,
                        start_time: this.screen.start_time,
                        end_time: this.screen.end_time,
                    },
                    showLoading: true,
                }).then(res => {
                    console.log(res, "res")
                    if (res.code == 200) {
                        let arr = res.data
                        if (arr.length > 0) {
                            arr.map(item => {
                                item.checked = false
                            })
                            this.list = this.list.concat(arr);
                            this.is_load = false

                        } else {
                            this.is_load = true
                        }

                    }
                });
            },




        },
    }
</script>

<style lang="scss">
    page {
        background: #F5F7FA;
    }

    .page-top {
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 99;
        padding: 10rpx 0;
        box-shadow: 0 5rpx 10rpx #f0f0f0;
    }

    .item {
        width: 690rpx;
        background: #ffffff;
        margin: 0 auto;
        padding: 0rpx 24rpx;
        opacity: 1;
        border-radius: 8rpx;
        box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);

        .item-title {
            opacity: 1;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            color: #333333;
            padding: 24rpx 0;

            .avatar {
                display: block;
                width: 48rpx;
                height: 48rpx;
                border-radius: 50%;
                margin-right: 16rpx;
            }

        }

        .item-bottom {
            font-size: 26rpx;
            padding: 20rpx 0 24rpx 0;
            color: #666666;

            .item-bottom-left {
                width: 90rpx;
                height: 90rpx;
                margin-right: 24rpx;
                min-width: 90rpx;
                margin-bottom: 16rpx;
            }

            .item-bottom-right {
                margin-bottom: 16rpx;

                .item-bottom-number {
                    color: #99A0AD;
                }
            }

        }

    }

    .color-ffa {
        color: #3387FF;
    }

    .icongengduo {
        color: #999;
        font-size: 24rpx;
    }

    .bottom-bar {
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 50;
        background: #FFFFFF;
        padding: 30rpx 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
    }

    .bottom-bar .btn {

        width: 300rpx;
        height: 98rpx;
        opacity: 1;
        background: #04BE02;
        border-radius: 49rpx;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
        opacity: 1;
        font-size: 36rpx;
        text-align: center;
        line-height: 98rpx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        color: #ffffff;

    }

    .screen-pop {
        background: #fff;
        padding: 40rpx 0 0;
        border-radius: 20rpx 20rpx 0 0;

        .cell {
            padding: 0 24rpx;
            margin-bottom: 40rpx;

            .label {
                font-size: 30rpx;
                color: #555;
                width: 160rpx;
            }

            .desc {
                margin-top: 30rpx;
                background: #f4f5f6;
                border-radius: 8rpx;
                height: 88rpx;

                .input-box {
                    padding: 0 16rpx;
                    height: 88rpx;
                    font-size: 28rpx;
                    color: #555;
                }
            }
        }

        .btns {
            display: flex;
            flex-flow: row nowrap;


            .btn {
                width: 50%;
                height: 88rpx;
                text-align: center;
                line-height: 88rpx;
                font-size: 32rpx;
                font-weight: 500;
            }

            .reset-btn {
                background-color: #F4F5F7;
                color: #04BE02;
            }

            .submit-btn {
                background-color: #04BE02;
                color: #fff;
            }
        }

        .tips {
            margin-top: 16rpx;
            font-size: 24rpx;
            color: #f00;
        }
    }
</style>
