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

        <view class="content">
            <view class="contentTop">
                <view class="contentTopLeft">
                    <view class="contentTopLeftLabel">我的余额</view>
                    <view class="contentTopLeftValue">{{ user.ACCOUNT_BALANCE || "0" }}</view>
                </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" v-if="showList && showList.length > 0">
                    <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.RECODE_TYPE && fieldObj &&
                                        fieldObj[subItem.RECODE_TYPE] ?
                                        fieldObj[subItem.RECODE_TYPE] : "-" }}
                                    </view>
                                    <view class="childrenItemLeftTime">{{ subItem.RECODE_DATE }}</view>
                                </view>

                                <view class="childrenItemRight">
                                    <text class="childrenItemRightValue">{{ subItem.RECODE_AMOUNT }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>

                <view class="listBox" v-else style="display: flex;align-items: center;justify-content: center;">
                    <no-data :text="'暂无记录'" />
                </view>
            </view>
        </view>
    </view>
    <!-- <view class="main"> 
        <view class="mainTopBox">
            <view class="mainTop">
                <view class="mainTopLeft">
                    <view class="mainTopHeaderImg">
                        <image class="headerImg" :src="user.MEMBERSHIP_HEADIMAGEURL || ''" />
                    </view>
                    <view class="mainTopLeftMessage">
                        <view class="mainTopMessageUserBox">
                            <view class="mainTopMessageUserName">{{ user.MEMBERSHIP_NAME || '' }}</view>
                            <view class="mainTopMessageUserLevelBox">
                                <image class="mainTopMessageUserLevelIcon"
                                    src="https://eshangtech.com/caiyunyiImg/levelIcon.png" />
                                <view class="mainTopMessageUserLevelText">{{ user.MEMBERSHIP_LEVEL_TEXT || '' }}</view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="mianTopRight" @click="handleGoCode">
                    <image class="userCodeImg" src="https://eshangtech.com/caiyunyiImg/userCodeImg.png" />
                    <view class="userCodeText">会员码</view>
                </view>
            </view>

            <view class="mainBottom">
                <view class="mainBottomLabel">我的余额</view>
                <view class="mainBottomValueBox">
                    <view class="mainBottomValueUnit">¥</view>
                    <view class="mainBottomValue">{{ user.ACCOUNT_BALANCE || "0" }}</view>
                </view>
            </view>
        </view>


        <view class="mainBalanceList">
            <view class="mainBalanceTabBox">
                <view :class="selectTab === 1 ? 'mainBalanceTabItem selectMainBalanceTabItem' : 'mainBalanceTabItem '"
                    @click="handleChangeTab(1)">
                    充值记录
                </view>
                <view :class="selectTab === 2 ? 'mainBalanceTabItem selectMainBalanceTabItem' : 'mainBalanceTabItem '"
                    @click="handleChangeTab(2)">
                    提现记录
                </view>

            </view>
        </view>
    </view> -->
</template>

<script>
import { mapGetters } from "vuex";
import noData from "../../components/noData.vue";

export default {
    data() {
        return {
            selectTab: 1,
            tabList: [{ label: "获取明细", value: 1 }, { label: "消耗明细", value: 2 }],
            dataList: [],
            showList: [],
            fieldObj: {}
        }
    },
    components: {
        noData,
    },
    computed: {
        ...mapGetters({
            user: "user",
        })
    },
    onLoad() {
        console.log('user', JSON.parse(JSON.stringify(this.user)));
        this.handleGetData()
    },
    methods: {
        handleChangeTab(value) {
            this.selectTab = value
            this.showList = this.dataList[this.selectTab - 1]
        },
        handleGoCode() {
            uni.navigateTo({
                url: "/pages/payfor/index",
            });
        },


        async handleGetData() {
            let req = {
                // MEMBERSHIP_IDS: this.user.MEMBERSHIP_ID,
                SearchParameter: {
                    MEMBERSHIP_IDS: this.user.INDUSTRY_MEMBERSHIP_ID,
                },
                PageIndex: 1,
                PageSize: 10,
                type: "encryption",
            }
            console.log('312312', req);

            const fieldData = await this.$api.$get(
                "/EShangApiMain/FrameWork/GetFieldEnumTree",
                { FieldExplainField: "RECODE_TYPE" }
            );
            let fieldList = this.$utils.wrapTreeNode(fieldData.Result_Data.List)
            console.log('fieldListfieldListfieldListfieldList', fieldList);
            let obj = {}
            if (fieldList && fieldList.length > 0) {
                fieldList.forEach((item) => {
                    obj[item.value] = item.label
                })
            }
            this.fieldObj = obj

            const data = await this.$api.$zzyLocalPost(
                "/OnlineOrder/GetRECHARGERECORDList",
                req
            );
            console.log('dkafjkdsf', data);
            let res = this.handleListGetMonth(data.Result_Data.List)
            console.log('resresresresres', res);
            this.dataList = res
            this.showList = this.dataList[this.selectTab - 1]
            console.log('this.showListthis.showListthis.showList', this.showList);
        },
        // 将传入的数组变成 一个月份一个月份的
        handleListGetMonth(list) {
            let result = [];
            // 将数据分为 消耗的 还是获得的
            // 消耗
            let consumeList = []
            // 获得
            let obtain = []
            if (list && list.length > 0) {
                list.forEach((item) => {
                    if (item.RECODE_TYPE > 1010) {
                        consumeList.push(item)
                    } else {
                        obtain.push(item)
                    }
                })
            }

            let newList = [consumeList, obtain]

            for (let i = 0; i < newList.length; i++) {
                let res = []
                let monthTypeList = [];
                if (newList[i] && newList[i].length > 0) {
                    newList[i].forEach((item) => {
                        const date = new Date(item.RECODE_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);
                        }
                    });
                }
                result.push(res)
            }

            return result;
        },
    }
}
</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%;
                    margin-bottom: 16rpx;

                    .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;
            }
        }
    }

    // width: 100vw;
    // height: 100vh;
    // box-sizing: border-box;
    // padding: 32rpx 30rpx;
    // background-color: #F1F5F6;

    // .mainTopBox {
    //     width: 100%;
    //     height: 320rpx;
    //     background-image: url('https://eshangtech.com/caiyunyiImg/balanceBg.png');
    //     background-size: 100% 100%;
    //     background-repeat: no-repeat;
    //     box-sizing: border-box;
    //     padding: 48rpx 32rpx 32rpx;

    //     .mainTop {
    //         width: 100%;
    //         display: flex;
    //         align-items: center;
    //         justify-content: space-between;

    //         .mainTopLeft {
    //             display: flex;
    //             width: calc(100% - 120rpx);

    //             .mainTopHeaderImg {
    //                 width: 96rpx;
    //                 height: 96rpx;

    //                 .headerImg {
    //                     width: 96rpx;
    //                     height: 96rpx;
    //                     border-radius: 50%;
    //                     border: 1px solid #fff;
    //                 }
    //             }

    //             .mainTopLeftMessage {
    //                 width: calc(100% - 118rpx);
    //                 margin-left: 22rpx;

    //                 .mainTopMessageUserBox {
    //                     width: 100%;
    //                     display: flex;
    //                     align-items: center;

    //                     .mainTopMessageUserName {
    //                         font-family: PingFangSC, PingFang SC;
    //                         font-weight: 600;
    //                         font-size: 40rpx;
    //                         color: #F3E6B3;
    //                         line-height: 56rpx;
    //                         text-align: left;
    //                         font-style: normal;
    //                         display: inline-block;
    //                         max-width: calc(100% - 170rpx);
    //                         text-overflow: ellipsis;
    //                         overflow: hidden;
    //                         white-space: nowrap;
    //                     }

    //                     .mainTopMessageUserLevelBox {
    //                         max-width: 170rpx;
    //                         display: flex;
    //                         align-items: center;
    //                         background-color: #515050;
    //                         padding: 4rpx 18rpx;
    //                         border-radius: 32rpx;
    //                         margin-left: 16rpx;

    //                         .mainTopMessageUserLevelIcon {
    //                             width: 24rpx;
    //                             height: 24rpx;
    //                             margin-right: 10rpx;
    //                         }

    //                         .mainTopMessageUserLevelText {
    //                             font-family: PingFangSC, PingFang SC;
    //                             font-weight: 500;
    //                             font-size: 24rpx;
    //                             color: #F4DA7F;
    //                             line-height: 34rpx;
    //                             text-align: left;
    //                             font-style: normal;
    //                             text-transform: none;
    //                             display: inline-block;
    //                             width: calc(100% - 34rpx);
    //                             text-overflow: ellipsis;
    //                             overflow: hidden;
    //                             white-space: nowrap;
    //                         }
    //                     }
    //                 }
    //             }
    //         }

    //         .mianTopRight {
    //             width: 96rpx;
    //             display: flex;
    //             flex-direction: column;
    //             align-items: center;

    //             .userCodeImg {
    //                 width: 46rpx;
    //                 height: 46rpx;
    //                 margin-bottom: 10rpx;
    //             }

    //             .userCodeText {
    //                 font-family: PingFangSC, PingFang SC;
    //                 font-weight: 400;
    //                 font-size: 24rpx;
    //                 color: #F3E6B3;
    //                 line-height: 34rpx;
    //                 text-align: left;
    //                 font-style: normal;
    //             }
    //         }
    //     }

    //     .mainBottom {
    //         width: 100%;
    //         margin-top: 36rpx;

    //         .mainBottomLabel {
    //             font-family: PingFangSC, PingFang SC;
    //             font-weight: 400;
    //             font-size: 32rpx;
    //             color: #F3E6B3;
    //             line-height: 44rpx;
    //             text-align: left;
    //             font-style: normal;
    //         }

    //         .mainBottomValueBox {
    //             display: flex;
    //             align-items: flex-end;
    //             margin-top: 12rpx;

    //             .mainBottomValueUnit {
    //                 font-family: PingFangSC, PingFang SC;
    //                 font-weight: 600;
    //                 font-size: 28rpx;
    //                 color: #F3E6B3;
    //                 line-height: 40rpx;
    //                 text-align: left;
    //                 font-style: normal;
    //             }

    //             .mainBottomValue {
    //                 font-family: PingFangSC, PingFang SC;
    //                 font-weight: 600;
    //                 font-size: 40rpx;
    //                 color: #F3E6B3;
    //                 line-height: 48rpx;
    //                 text-align: left;
    //                 font-style: normal;
    //                 margin-left: 4rpx;
    //             }
    //         }
    //     }
    // }

    // .mainBalanceList {
    //     width: 100%;
    //     height: calc(100vh - 400rpx);
    //     margin-top: 20rpx;
    //     background: #FFFFFF;
    //     border-radius: 16rpx;

    //     .mainBalanceTabBox {
    //         width: 100%;
    //         height: 94rpx;
    //         border-bottom: 2rpx solid #CCCCCC;
    //         display: flex;
    //         align-items: center;
    //         justify-content: space-around;

    //         .mainBalanceTabItem {
    //             font-family: PingFangSC, PingFang SC;
    //             font-weight: 400;
    //             font-size: 32rpx;
    //             color: rgba(0, 0, 0, 0.85);
    //             line-height: 44rpx;
    //             text-align: left;
    //             font-style: normal;
    //         }

    //         .selectMainBalanceTabItem {
    //             font-family: PingFangSC, PingFang SC;
    //             font-weight: 600;
    //             font-size: 32rpx;
    //             color: #333333;
    //             line-height: 44rpx;
    //             text-align: left;
    //             font-style: normal;
    //             position: relative;
    //         }

    //         .selectMainBalanceTabItem ::after {
    //             content: "";
    //             width: 100%;
    //             height: 6rpx;
    //             background: #51A0FF;
    //             border-radius: 6rpx;
    //             position: absolute;
    //             left: 0;
    //             bottom: 0;
    //         }
    //     }
    // }
}
</style>