<template>
    <view class="container">

        <view class="header-block">
            <view class="tab-h flex">
                <view :class="['item',type == 1?'active':'']" @click="onChooseType(1)">全部</view>
                <view :class="['item',type == 2?'active':'']" @click="onChooseType(2)">今日</view>
                <view :class="['item',type == 3?'active':'']" @click="onChooseType(3)">筛选</view>
            </view>
            <view class="time-picker flex" v-if="type == 3">
                <view class="picker-box">
                    <picker mode="date" @change="onChangeDate" data-type="start">
                        <input class="date-box" :value="start" placeholder="开始日期" disabled></input>
                    </picker>
                </view>
                <view class="and-box">至</view>
                <view class="picker-box">
                    <picker mode="date" @change="onChangeDate" data-type="end">
                        <input class="date-box" :value="end" placeholder="结束日期" disabled></input>
                    </picker>
                </view>
                <view class="sub-btn" @click="onSearch">提交</view>
            </view>

        </view>
        <view class="data-block">
            <view class="title">分享获得积分</view>
            <view class="count">{{count}}</view>
            <view class="name" v-if="type != 3">{{type== 1?'全部积分':'今日积分'}}</view>
            <block v-else>
                <view class="name" v-if="!params.start&& !params.end ">全部积分</view>
                <view class="name" v-if="params.start  && !params.end">{{params.start}}之后积分</view>
                <view class="name" v-if="!params.start  && params.end">截至{{params.end}}积分</view>
                <view class="name" v-if="params.start && params.end">{{params.start}}至{{params.end}}积分</view>
            </block>


        </view>
        <view class="list">
            <view class="item" v-for="(item,index) in list">
                <view class="title-block flex flex-y-center">
                    <image src="/static/wmtime.png" mode="aspectFit" class="icon-time"></image>
                    <view class="time">{{item.create_time}}</view>

                </view>
                <view class="user flex flex-y-center">
                    <image :src="item.user_avatar || '/static/avatar_def.png'" mode="aspectFill" class="avatar"></image>
                    <view class="name">{{getUserName(item.user_name)}}</view>
                    <!-- <view class="mobile">{{item.user_mobile}}</view> -->
                    <view class="num">+{{item.share_score}}</view>
                </view>
            </view>

        </view>
        <block v-if="list.length <= 0 && !has_more">
            <view class="flex-x-center"><text style="margin-top:50rpx;color: #999;">暂无记录</text></view>
        </block>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex';
    import {
        validTime
    } from "../../utils/util.js"

    export default {
        data() {
            return {
                type: 3,
                count: '--',
                list: [],
                page: 1,
                has_more: true,
                start: '',
                end: '',
                params: {

                }
            }
        },
        onLoad() {

            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: this.$store.state.color,
            })
            this.setColor = this.$store.state.color;
            this.getList()
        },
        onReachBottom() {
            if (this.has_more) {
                this.getList(this.page + 1)
            }
        },
        onPullDownRefresh() {
            this.getList()
        },
        computed: {
            ...mapState(['systemInfo', 'setColor', 'store_id', 'userInfo']),
        },
        methods: {
            getUserName(name) {
                if (name) {
                    return name.substr(0, 1) + '**'
                } else {
                    return '未知用户'
                }
            },
            onChooseType(e) {
                if (e == this.type) {
                    return false
                }
                this.type = e
                if (e == 2) {
                    let date = this.$utils.formatTime(new Date(), 'YYYY-mm-dd')

                    this.params = {
                        start: date,
                        end: date
                    }
                } else if (e == 3) {
                    this.params = {}
                    this.start = ''
                    this.end = ''
                } else {
                    this.params = {}
                }
                this.getList()
            },
            onChangeDate(e) {

                let type = e.currentTarget.dataset.type
                let val = e.detail.value
                if (type == 'start') {
                    if (validTime(val, this.end) || this.end == '' || val == this.end) {
                        this[type] = val
                    } else {
                        uni.showToast({
                            title: "开始日期不能晚于结束日期",
                            icon: 'none'
                        })
                        return false
                    }

                } else if (type == 'end') {
                    if (validTime(this.start, val) || this.start == '' || val == this.start) {
                        this[type] = val
                    } else {
                        uni.showToast({
                            title: "结束日期不能早于开始日期",
                            icon: 'none'
                        })
                        return false
                    }

                }

            },
            onSearch() {
                this.params = {
                    start: this.start,
                    end: this.end
                }
                this.getList()
            },
            getList(page = 1) {
                let params = Object.assign({
                    store_id: this.store_id,
                    user_id: this.userInfo.id,
                    page,
                    limit: 20,
                }, this.params)
                this.$http.request("yy/share_integral_data", params).then(res => {
                    uni.stopPullDownRefresh()
                    this.count = res.data.count
                    this.has_more = res.data.list.length == 20
                    if (page == 1) {
                        uni.pageScrollTo({
                            scrollTop:0,
                            duration:0
                        })
                       this.list = res.data.list
                    } else {
                        this.list = this.list.concat(res.data.list)
                    }
                }).catch(err => {
                    uni.stopPullDownRefresh()
                })
            }
        }
    }
</script>

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

    .container {}

    .data-block {
        margin: 30rpx 24rpx 0rpx;
        background-color: #fff;
        border-radius: 12rpx;
        text-align: center;

        .title {
            height: 80rpx;
            border-bottom: 1rpx solid #f0f0f0;
            line-height: 80rpx;
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
        }

        .count {
            font-size: 46rpx;
            font-weight: bold;
            color: #f00;
            padding: 20rpx 0 10rpx;
        }

        .name {
            font-size: 24rpx;
            color: #666;
            padding-bottom: 20rpx;
        }
    }

    .header-block {
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: #fff;
        box-shadow: 0 10rpx 10rpx #f0f0f0;


        .tab-h {
            height: 80rpx;
            border-bottom: 2rpx solid #f0f0f0;

            .item {
                width: 33.333%;
                text-align: center;
                line-height: 80rpx;
                position: relative;
                font-size: 32rpx;
            }

            .item.active {
                color: $theme-color;
                font-weight: 500;

                &::after {
                    display: block;
                    content: "";
                    width: 50%;
                    height: 4rpx;
                    border-radius: 2rpx;
                    background-color: $theme-color;
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);
                }
            }

        }

        .time-picker {
            padding: 24rpx;

            .picker-box {
                width: 240rpx;
                flex: none;

                .date-box {
                    height: 60rpx;
                    border-radius: 10rpx;
                    background-color: #f0f0f0;
                    box-sizing: border-box;
                    padding: 0 20rpx;
                    line-height: 60rpx;
                    font-size: 26rpx;
                    color: #666;
                }
            }

            .and-box {
                margin: auto;
                font-size: 26rpx;
                color: #000;
            }

            .sub-btn {
                margin-left: auto;
                height: 60rpx;
                color: #fff;
                background-color: $theme-color;
                padding: 0 30rpx;
                border-radius: 10rpx;
                font-size: 26rpx;
                line-height: 60rpx;
                font-weight: 500;
            }
        }
    }



    .list {
        padding: 30rpx 24rpx;

        .item {
            margin-bottom: 30rpx;
            border-radius: 12rpx;
            background-color: #fff;
            padding: 0 24rpx;

            .title-block {
                font-size: 24rpx;
                color: #666;
                line-height: 40rpx;
                border-bottom: 1rpx solid #f0f0f0;
                padding: 20rpx 0;

                .icon-time {
                    display: block;
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 10rpx;
                }
            }

            .user {
                padding: 24rpx 0;
            }



            .avatar {
                flex: none;
                display: block;
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                overflow: hidden;
            }

            .name {
                font-size: 26rpx;
                color: #333;
                width: 140rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-left: 20rpx;

            }

            .mobile {
                font-size: 26rpx;
                color: #666;
                margin-left: 20rpx;
            }

            .num {
                font-size: 42rpx;
                color: #f00;
                font-weight: bold;
                margin-left: auto;
            }
        }

        // .item:not(:last-child){
        //     border-bottom:2rpx solid #f0f0f0;
        // }
    }
</style>
