<template>
    <view class="main">
        <view class="pageTop"></view>

        <view class="content">
            <view class="contentTop">
                <view class="contentTopLeft">
                    <view class="contentTopLeftLabel">我的积分</view>
                    <view class="contentTopLeftValue">{{ currentPoint || 0 }}</view>
                </view>
                <view class="contentTopRight" @click="handleSignIn">
                    <view class="contentTopRightLabel">{{ toDayHaveSign ? "签到积分 +1" : "立即签到" }}</view>
                    <image class="contentTopRightIcon" src="https://eshangtech.com/caiyunyiImg/signInIcon.png" />
                </view>
            </view>

            <view class="contentBottom">
                <view class="tabBox">
                    <view v-for="(item, index) in tabList" :key="index" class="tabItem"
                        @click="handleChangeTab(item.value)">
                        <text :class="item.value === selectTab ? 'tabText selectTabText' : 'tabText'">{{ item.label ||
                            '' }}</text>
                    </view>
                </view>

                <scroll-view scroll-y class="listBox">
                    <view class="listItem" v-for="(item, index) in showList" :key="index">
                        <view class="listItemSum">
                            <view class="listItemLeft">
                                {{ item.label }}
                            </view>
                            <view class="listItemRight">
                                <text class="listItemRightLabel" v-if="selectTab !== 2">获取积分</text>
                                <text class="listItemRightPoint" v-if="selectTab !== 2"
                                    :style="{ marginRight: selectTab === 0 ? '10rpx' : '' }">+{{ item.obtain }}</text>
                                <text class="listItemRightLabel" v-if="selectTab !== 1">消耗积分</text>
                                <text class="listItemRightPoint" v-if="selectTab !== 1">{{ item.consume }}</text>
                            </view>
                        </view>

                        <view class="childrenBox">
                            <view class="childrenItem" v-for="(subItem, subIndex) in item.children" :key="subIndex">
                                <view class="childrenItemLeft">
                                    <view class="childrenItemLeftLabel">{{ subItem.SERVERPART_NAME + subItem.SHOPNAME }}
                                    </view>
                                    <view class="childrenItemLeftTime">{{ subItem.OPERATE_DATE }}</view>
                                </view>

                                <view class="childrenItemRight">
                                    <text class="childrenItemRightValue">{{ subItem.POINT_TYPE * subItem.CURRENT_POINT
                                        > 0 ? '+' : subItem.POINT_TYPE * subItem.CURRENT_POINT < 0 ? '-' : '' }}{{
                                            subItem.POINT_TYPE * subItem.CURRENT_POINT }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            allList: [],// 全部的积分信息
            showList: [],// 当前显示的积分记录
            currentPoint: 0,// 当前可用积分
            currentConsumePoint: 0,// 当前消耗积分
            selectTab: 1, // 当前选择的tab
            // { label: "全部", value: 0 }, 
            tabList: [{ label: "获取明细", value: 1 }, { label: "消耗明细", value: 2 }],
            toDayHaveSign: false, // 今日是否已经签到了
        }
    },
    onLoad() {
        this.handleGetData()

        let signTime = uni.getStorageSync("signTime");
        if (signTime) {
            signTime = new Date(signTime).getTime();
        } else {
            signTime = 0;
        }
        let now = new Date().getTime();

        if (signTime < now) {
            this.toDayHaveSign = false;
        } else {
            this.toDayHaveSign = true;
        }
    },
    computed: {
        ...mapGetters({
            user: "user",
        })
    },
    methods: {
        // 签到方法
        handleSignIn() {
            let date = new Date();
            let y = date.getFullYear();
            let m = date.getMonth() + 1;
            let d = date.getDate();

            let nowDay = `${y}-${m < 10 ? "0" + m : m}-${d < 10 ? "0" + d : d
                } 23:59:59`;

            let _this = this;
            if (this.user.MEMBERSHIP_MOBILEPHONE) {
                _this.$api
                    .getCoop({
                        action_type: "signIn",
                    })
                    .then((res) => {
                        if (res.ResultCode === "100") {
                            _this.BonusPoint = res.Data.Bonus_Point;
                            _this.$api
                                .getCoop({
                                    action_type: "getConsecutiveSignIn",
                                })
                                .then((rs) => {
                                    uni.showToast({
                                        title: "签到成功！",
                                        icon: "none",
                                    });
                                    uni.setStorageSync("signTime", nowDay);
                                    _this.toDayHaveSign = true;
                                    _this.handleGetData()
                                    _this.$forceUpdate()
                                });
                        } else if (res.ResultCode === "101") {
                            uni.showToast({
                                title: "今日已签到！",
                                icon: "none",
                            });
                            _this.toDayHaveSign = true;
                            uni.setStorageSync("signTime", nowDay);
                        } else {
                            uni.showModal({
                                content: res.ResultDesc,
                                showCancel: false,
                                success: (res) => {
                                    if (res.confirm) {
                                    }
                                },
                            });
                        }
                    });
            }
        },
        // 获取数据
        async handleGetData() {
            const data = await this.$api.getCoop({
                action_type: "GetPointRecord",
                pageSize: 999999,
                pageIndex: 1,
                isSum: 1,
            })
            console.log('handleGetDatahandleGetData', data);
            // 当前可以积分
            this.currentPoint = data.Data.SumGetPoint
            // 当前消耗积分
            this.currentConsumePoint = data.Data.SumUsePoint

            // 积分消耗的列表数据
            let list = data.Data.List
            let allList = [[], [], []];
            // 处理数据
            if (list && list.length > 0) {
                list.forEach((item) => {
                    allList[0].push(item);
                    if (item.POINT_TYPE > 0) {
                        allList[1].push(item);
                    }
                    if (item.POINT_TYPE < 0) {
                        allList[2].push(item);
                    }
                });
            }
            console.log("allList", allList);
            let res = [];
            allList.forEach((item) => {
                let newItem = this.handleListGetMonth(item);
                res.push(newItem);
            });
            console.log("res", res);

            this.allList = res;
            this.showList = res[this.selectTab];
        },
        // 切换tab
        handleChangeTab(value) {
            this.selectTab = value
        },
        // 将传入的数组变成 一个月份一个月份的
        handleListGetMonth(list) {
            let res = [];
            let monthTypeList = [];
            if (list && list.length > 0) {
                list.forEach((item) => {
                    const date = new Date(item.OPERATE_DATE);
                    let y = date.getFullYear();
                    let m = date.getMonth() + 1;
                    if (m < 10) {
                        m = "0" + m;
                    }
                    let time = `${y}${m}`;
                    if (monthTypeList.indexOf(time) === -1) {
                        monthTypeList.push(time);
                        res.push({
                            label: time,
                            children: [item],
                        });
                    } else {
                        let index = monthTypeList.indexOf(time);
                        res[index].children.push(item);
                    }
                });
            }
            if (res && res.length > 0) {
                res.forEach((item) => {
                    // 获取
                    let obtain = 0;
                    // 消耗
                    let consume = 0;
                    if (item.children && item.children.length > 0) {
                        item.children.forEach((item) => {
                            if (item.POINT_TYPE > 0) {
                                obtain += item.CURRENT_POINT;
                            }
                            if (item.POINT_TYPE < 0) {
                                consume += item.CURRENT_POINT;
                            }
                        });
                    }
                    item.obtain = obtain;
                    item.consume = consume;
                });
            }
            console.log("res3213", res);
            return res;
        },
    }
}
</script>

<style lang="less" scoped>
.main {
    width: 100vw;
    height: 100vh;

    .pageTop {
        width: 100%;
        height: 476rpx;
        background-image: url('https://eshangtech.com/caiyunyiImg/pointsBg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .content {
        width: 100%;
        height: calc(100vh - 112rpx);
        transform: translateY(-364rpx);

        .contentTop {
            width: calc(100% - 96rpx);
            height: 162rpx;
            margin-left: 48rpx;
            background-image: url('https://eshangtech.com/caiyunyiImg/pointContentBg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 22rpx 26rpx;

            .contentTopLeft {
                display: flex;
                align-items: center;

                .contentTopLeftLabel {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 32rpx;
                    color: #FFFFFF;
                    line-height: 44rpx;
                    text-align: right;
                    font-style: normal;
                }

                .contentTopLeftValue {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 50rpx;
                    color: #FFFFFF;
                    line-height: 72rpx;
                    text-align: right;
                    font-style: normal;
                    margin-left: 6rpx;
                }
            }

            .contentTopRight {
                display: flex;
                align-items: center;

                .contentTopRightLabel {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 26rpx;
                    color: #FFFFFF;
                    line-height: 36rpx;
                    text-align: right;
                    font-style: normal;
                }

                .contentTopRightIcon {
                    width: 32rpx;
                    height: 32rpx;
                    margin-left: 6rpx;
                }
            }
        }

        .contentBottom {
            width: 100%;
            height: calc(100% - 162rpx + 26rpx);
            background: #FFFFFF;
            box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(166, 90, 28, 0.15);
            border-radius: 48rpx 48rpx 0rpx 0rpx;
            transform: translateY(-26rpx);

            .tabBox {
                width: 100%;
                height: 98rpx;
                box-sizing: border-box;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                border-bottom: 2rpx solid #CCCCCC;
                padding: 26rpx 48rpx 0;

                .tabItem {
                    width: calc(100% / 3);
                    height: 100%;
                    display: flex;
                    justify-content: center;

                    .tabText {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 32rpx;
                        color: rgba(0, 0, 0, 0.85);
                        line-height: 44rpx;
                        text-align: center;
                        font-style: normal;
                        display: inline-block;
                    }

                    .selectTabText {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        font-size: 32rpx;
                        color: #1380FF;
                        line-height: 44rpx;
                        text-align: center;
                        font-style: normal;
                        position: relative;
                    }

                    .selectTabText::after {
                        content: "";
                        width: 100%;
                        height: 6rpx;
                        background: #117CFF;
                        border-radius: 6rpx;
                        bottom: 0;
                        left: 0;
                        position: absolute;
                    }
                }
            }

            .listBox {
                width: 100%;
                height: calc(100% - 98rpx);
                box-sizing: border-box;
                padding: 32rpx 30rpx;

                .listItem {
                    width: 100%;

                    .listItemSum {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        box-sizing: border-box;
                        padding: 0 34rpx 30rpx 0;
                        border-bottom: 2rpx solid #F5F5F5;

                        .listItemLeft {
                            .listItemLeftMonth {
                                font-family: PingFang-SC, PingFang-SC;
                                font-weight: 600;
                                font-size: 30rpx;
                                color: #333333;
                                line-height: 40rpx;
                                text-align: left;
                                font-style: normal;
                                text-transform: none;
                            }
                        }

                        .listItemRight {
                            .listItemRightLabel {
                                font-family: PingFang-SC, PingFang-SC;
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #333333;
                                line-height: 40rpx;
                                text-align: left;
                                font-style: normal;
                                text-transform: none;
                            }

                            .listItemRightPoint {
                                display: inline-block;
                                width: 100rpx;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 600;
                                font-size: 32rpx;
                                color: #E9682B;
                                line-height: 44rpx;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }
                        }
                    }

                    .childrenBox {
                        width: 100%;

                        .childrenItem {
                            width: 100%;
                            box-sizing: border-box;
                            padding: 20rpx 58rpx 20rpx 0;
                            border-bottom: 2rpx solid #F5F5F5;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .childrenItemLeft {
                                .childrenItemLeftLabel {
                                    font-family: PingFang-SC, PingFang-SC;
                                    font-weight: 600;
                                    font-size: 28rpx;
                                    color: #333333;
                                    line-height: 40rpx;
                                    text-align: left;
                                    font-style: normal;
                                    text-transform: none;
                                }

                                .childrenItemLeftTime {
                                    font-family: PingFang-SC, PingFang-SC;
                                    font-weight: 500;
                                    font-size: 20rpx;
                                    color: #999999;
                                    line-height: 28rpx;
                                    text-align: left;
                                    font-style: normal;
                                    text-transform: none;
                                    margin-top: 4rpx;
                                }
                            }

                            .childrenItemRight {
                                .childrenItemRightValue {
                                    display: inline-block;
                                    width: 120rpx;
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 600;
                                    font-size: 28rpx;
                                    color: #E9682B;
                                    line-height: 40rpx;
                                    text-align: right;
                                    font-style: normal;
                                    text-transform: none;
                                }
                            }
                        }
                    }
                }
            }

            .listBox ::-webkit-scrollbar {
                display: none;
            }
        }
    }

}
</style>