<template>
    <view class="wrapper">
        <view @click="handleToggle">
            <u-notice-bar
                mode="horizontal"
                :list="noticeList"
                :duration="1500"
                v-bind="setNoticeBarBgColor"
            ></u-notice-bar>
        </view>
        <view class="card__money">
            <view class="total__money">
                <text>已提现收益</text>
                <text class="total">{{ parseMoney('alreadyWithdraw') }}</text>
            </view>
            <view class="btn" @click="handleNavigateWithDraw">去提现</view>
            <view class="part__money">
                <view class="freeze">
                    <text>待结算收益</text>
                    <text class="price">{{ parseMoney('toBeSettledMoney') }}</text>
                </view>
                <view class="withdraw">
                    <text>可提现收益</text>
                    <text class="price">{{ parseMoney('canWithdrawCommission') }}</text>
                </view>
            </view>
        </view>
        <!-- <view class="card__usercount">
            <view>
                <text class="title">总分销用户</text>
                <text>{{ distributorInfo.totalDistributorUser }}人</text>
            </view>
            <view>
                <text class="title">今日分销用户</text>
                <text>{{ distributorInfo.toDayDistributorUser }}人</text>
            </view>
        </view> -->
        <view class="card__cell">
            <u-cell-group>
                <u-cell-item
                    class="cell-item"
                    v-for="cell in cellGroup"
                    :key="cell.title"
                    :title="cell.title"
                    @click="cell.event(cell.field)"
                ></u-cell-item>
            </u-cell-group>
        </view>
        <view class="share-btn">
            <button class="share" open-type="share">分享链接</button>
        </view>
    </view>
    <u-modal v-model="show">
        <view class="slot-content">
            <view>
                在有效期内，新用户或公池中的用户扫店铺码或通过店铺链接进入小程序可以和店铺信息相互绑定。
            </view>
            <view>
                有效期截止之后，新用户或公池中的用户扫店铺码或通过店铺链接进入小程序不再和店铺信息绑定。
            </view>
        </view>
    </u-modal>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, unref, onActivated } from 'vue'
import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'
import { useLockFn, useToggle } from '@/hooks/useLockFn'
import { getDistributorCenter } from '@/api/distributor_center'
import { formatMoney, navigateTo, router } from '@/utils/util'
import { Recordable } from '@/config/interface'

interface DistributorProps {
    [key: string]: number | string | undefined
    alreadyWithdraw: number
    canWithdrawCommission: number
    toBeSettledMoney: number
    toDayDistributorUser: number
    totalDistributorUser: number
    distributorEndTime: string
}
const cellGroup = [
    { title: '店铺订单', field: 'order', event: handleNavigate },
    { title: '店铺客户', field: 'user', event: handleNavigate },
    { title: '收益记录', field: 'record', event: handleNavigate },
    { title: '店铺码', field: 'share', event: handleNavigate }
]
const navigateUrls: Recordable<string> = {
    order: '/bundle/pages/distributor_order/index',
    user: '/bundle/pages/distributor_binding_user/index',
    withdraw: '/bundle/pages/withdraw_money/index',
    record: '/bundle/pages/withdraw_distributor_record/index',
    share: '/bundle/pages/share_qrcode/index'
}
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const { show, handleToggle } = useToggle()

const distributorInfo = reactive<Partial<DistributorProps>>({})

const compareDistributorTime = computed(
    () =>
        Date.now() / 1000 >=
        new Date(`${distributorInfo.distributorEndTime?.replace(/\-/g, '/')}`).getTime() / 1000
)
const noticeList = computed(() =>
    unref(compareDistributorTime)
        ? ['店铺码已过期，如需再次成为店长，请联系客服！！！']
        : [`店铺码有效期截至时间：${distributorInfo.distributorEndTime}`]
)
const setNoticeBarBgColor = computed(() => ({
    bgColor: unref(compareDistributorTime) ? '#F56C6C' : '#fdf6ec',
    color: unref(compareDistributorTime) ? '#fff' : '#f9ae3d'
}))

const parseMoney = computed(() => {
    return (field: string) => {
        return '￥' + formatMoney(distributorInfo[field])
    }
})
/**去提现 */
const handleNavigateWithDraw = () => {
    router(`/bundle/pages/withdraw_money/index`)
}

/**跳转地址 */
function handleNavigate(type: string) {
    router(navigateUrls[type])
}
/**分享给好友 */
onShareAppMessage(() => {
    return {
        path: `/pages/index/index?scene=${unref(userInfo).distributorId}`,
        imageUrl: '../../../static/images/index.jpg'
    }
})

onShow(() => {
    lockFn()
})

const { lockFn } = useLockFn(async () => {
    const data = await getDistributorCenter({ distributorId: unref(userInfo).distributorId })
    initDistributorInfo(data)
})

/**设置数据 */
function initDistributorInfo(data: DistributorProps) {
    for (const key in data) {
        distributorInfo[key] = data[key]
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    position: relative;
}

.card__money {
    padding: 40rpx;
    background-image: linear-gradient(to right, $blue3 0%, $blue4 100%);
    color: $white;
    line-height: 1.6;
    border-radius: 20rpx;
    margin: 20rpx;
    position: relative;

    .total__money {
        @include flex-column;
        position: relative;

        .total {
            font-size: 46rpx;
            font-weight: 600;
        }

        .withdraw {
            display: none;
            position: absolute;
            right: -40rpx;
            top: 0;
            background-color: pink;
            color: #2f63fe;
            padding: 12rpx 30rpx;
            border-top-left-radius: 999px;
            border-bottom-left-radius: 999px;
            font-size: 26rpx;
        }
    }

    .part__money {
        @include flex;
        margin-top: 40rpx;

        > view {
            flex: 1;
            @include flex-column;

            .price {
                font-size: 40rpx;
            }
        }
    }
}

.card__usercount {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    margin: 20rpx;

    > view {
        @include flex-center;
        padding: 30rpx;
        background-color: $white;
        border-radius: 12rpx;
        line-height: 1.8;

        .title {
            font-weight: 600;
        }
    }
}

.card__cell {
    margin: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;

    :deep(.cell-item) {
        .u-border-bottom {
            padding: 40rpx 32rpx !important;

            .u-cell_title {
                font-size: 32rpx !important;
            }
        }
    }
}

.share-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(60rpx + env(safe-area-inset-bottom));
    padding: 0 30rpx;

    .share {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        background-color: $blue1;
        color: $white;
        border-radius: 999px;
    }
}

.share {
    // position: absolute;
    // right: 0;
    // bottom: -140rpx;
    // background-color: $blue1;
    // color: $white;
    // border-top-left-radius: 999px;
    // border-bottom-left-radius: 999px;
    // font-size: 32rpx;
}

.slot-content {
    padding: 0 40rpx;
    line-height: 1.8;

    > view {
        margin: 30rpx 0;
        color: $red;
        font-size: 28rpx;
    }
}

.btn {
    position: absolute;
    top: 40rpx;
    right: 0;
    padding: 12rpx 40rpx;
    background-color: #457ded;
    border-radius: 999px 0 0 999px;
    border: 1px solid #fff;
    border-right: none;
    box-sizing: border-box;
    font-size: 32rpx;
}
</style>
