<route lang="jsonc" type="page">{
	"layout": "default",
	"style": {
        "navigationStyle": "custom",
		"navigationBarBackgroundColor": "#fff"
	}
}</route>

<template>
	<view class="user-list-bg">
        <view class="user-list-bg w-[100%] sticky top-0 left-0 z-50">
			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
				<template #left>
                    <view class="flex items-center" @click="router.navigateBack()">
                        <view class=" mt-4rpx">
                            <wd-icon name="thin-arrow-left" size="30rpx"></wd-icon>
                        </view>
                        <view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">客户列表</view>
                    </view>
				</template>
			</wd-navbar>
		</view>

        <view class="mt-12rpx">
            <view class="relative flex justify-center">
                <wd-img :src="`${OSS}images/store/user/image4.png`" width="690rpx" height="280rpx"></wd-img>
                <view class="absolute left-50% top-50% -translate-x-1/2 -translate-y-1/2 w-full">
                    <view>
                        <view class="flex items-center justify-between px-30rpx">
                            <view class="ml-48rpx">
                                <view class="font-500 text-30rpx leading-42rpx text-[#121212]">门店预充值(未消费）</view>
                                <view class="mt-6rpx text-24rpx leading-34rpx text-[#7B8290]">{{ useStore.defaultStore.name }}</view>
                            </view>
                            <view class="relative mt-20rpx" @click="router.navigateTo('/bundle/user/recharge-list')">
                                <wd-img :src="`${OSS}images/store/user/image5.png`" width="178rpx" height="50rpx"></wd-img>
                                <view class="absolute left-50% top-50% -translate-x-1/2 -translate-y-1/2 flex justify-center items-center w-full">
                                    <view class="font-400 text-26rpx text-[#333] mt-[-8rpx]">充值明细</view>
                                    <view class="mt-[-12rpx]">
                                        <wd-icon name="arrow-right" size="32rpx" color="#666"></wd-icon>
                                    </view>
                                </view>
                            </view>
                        </view>

                        <view class="text-[#7B4FE1] flex items-center ml-78rpx mt-30rpx">
                            <view class="flex flex-col items-center justify-center mr-100rpx">
                                <view class="font-bold text-32rpx leading-44rpx">150,000.00</view>
                                <view class="mt-12rpx font-400 text-28rpx leading-40rpx">实际充值(元)</view>
                            </view>
                            <view class="flex flex-col items-center justify-center">
                                <view class="font-bold text-32rpx leading-44rpx">10,000.00</view>
                                <view class="mt-12rpx font-400 text-28rpx leading-40rpx">赠金(元)</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="mt-40rpx">
            <view class="font-bold text-32rpx leading-44rpx mx-30rpx">客户信息</view>
            <view class="search-box relative">
				<wd-search placeholder="搜索客户信息" cancel-txt="搜索" placeholder-left hide-cancel	custom-input-class="!h-72rpx !pr-160rpx" v-model="keywords" light >
				</wd-search>
				<view 
					class="absolute top-1/2 -translate-y-1/2 right-34rpx w-142rpx h-64rpx leading-64rpx text-center rounded-32rpx bg-#4C9F44 text-#fff font-400 text-32rpx" 
					@click="UserList.handleSearch">
					搜索
				</view>
			</view>
        </view>

        <view class="flex items-center mx-30rpx">
            <view 
                class="mr-12rpx bg-white rounded-12rpx w-132rpx h-56rpx text-center leading-50rpx font-400 text-28rpx leading-40rpx text-[#303133] border-2rpx border-solid border-[#fff]" 
                :class="{active: item.type === currentTab }" 
                v-for="item in menuTab" :key="item.type"
                @click="UserList.handleChangeTab(item.type)">
                {{ item.name }}
            </view>
        </view>

        <view>
            <mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="UserList.upCallback" :down="downOption" :up="upOption">
                <view class="mb-22rpx" v-for="item in list" :key="item.id">
                    <view class="mx-64rpx flex justify-between items-center mb-10rpx">
                        <view class="flex items-center" @click="UserList.handleToDetail(item?.user?.id)">
                            <wd-img width="100rpx" height='100rpx' src="https://shchazhi.oss-cn-hangzhou.aliyuncs.com/fronted/icon/icon_avatar.png" :round="true"></wd-img>
                            <view class="ml-20rpx">
                                <view class="flex items-center">
                                    <view class="font-bold text-28rpx text-[#303133] leading-40rpx mr-12rpx">{{ item?.user?.nickname }}</view>
                                    <!-- TODO 如果是vip的话才显示这个皇冠 -->
                                    <view v-if="item?.user?.member == 1">
                                        <wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_crown.png`"></wd-img>
                                    </view>
                                </view>
                                <view class="mt-14rpx font-400 text-26rpx text-[#303133] leading-36rpx">{{ item?.user?.mobile }}</view>
                                <view class="mt-10rpx text-24rpx text-[#F29747] leading-34rpx w-400rpx line-1">{{ item?.remark }}</view>
                            </view>
                        </view>
                        <view @click="UserList.handleCall(item?.user?.mobile)" class="p-10rpx">
                            <wd-img width="64rpx" height='64rpx' :src="`${OSS}icon/icon_phone3.png`"></wd-img>
                        </view>
                    </view>

                    <view class="mx-30rpx">
                        <wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>                
                    </view>
                </view>
            </mescroll-body>
	    </view>
	</view>
</template>


<script lang="ts" setup>
	import { router } from '@/utils/tools'
    import { toTimes, copy } from '@/utils/tools'
    import { getStoreMemberList } from '@/api/store'
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
    import { useStoreStore } from '@/store'

	const OSS = inject('OSS')
    const useStore = useStoreStore()

    // mescroll
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
    const downOption = {
		auto: true
	}
	const upOption = {
		auto: true,
		textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
	}
	const list = ref<Array<any>>([]) // 茶室列表
    const keywords = ref<string>('') // 搜索关键词
    const menuTab = ref([
        {type: 'all', name: '全部'},
        {type: 'recharge', name: '充值卡'},
        {type: 'vip', name: '会员卡'},
    ])
    const currentTab = ref<string>('all')

	onLoad((args) => {
	})

    const UserList = {
        /**
         * 分页加载
         * @param mescroll 
         */
		upCallback: (mescroll) => {
			// 需要留一下数据为空的时候显示的空数据图标内容
            // const filter = {
			// 	page: mescroll.num, 
			// 	size: mescroll.size,
            //     store_id: useStore.defaultStore.id,
			// }

            // getStoreMemberList(filter).then((res) => {
			// 	const curPageData = res.list || [] // 当前页数据
			// 	if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
			// 	list.value = list.value.concat(curPageData) //追加新数据
			// 	mescroll.endSuccess(curPageData.length, Boolean(res.more))
			// }).catch(() => {
				mescroll.endErr() // 请求失败, 结束加载
			// })
		},

        /**
         * 跳转用户详情
         * @param id 
         */
        handleToDetail: (id) => {
            uni.$on('refreshUserDetail', () => {
                uni.$off('refreshUserDetail')
                list.value = []
                getMescroll().resetUpScroll()
            })
            router.navigateTo(`/bundle/user/user-detail?id=${id}`)
        },

        /**
         * 电话
         * @param phone 
         */
        handleCall: (phone) =>  {
            uni.makePhoneCall({
                phoneNumber: phone
            })
        },

        /**
         * 切换tab
         */
        handleChangeTab: (type: string) => {
            currentTab.value = type
            list.value = []
            getMescroll().resetUpScroll()
        },

        /**
         * 搜索
         */
        handleSearch: () => {
            list.value = []
            getMescroll().resetUpScroll()
        }
    }
</script>
	
<style lang="scss">
    page {
        background-color: #fff;
    }

    .user-list-bg {
        background-color: $cz-page-background;
        background-image: url(#{$OSS}images/store/user/image3.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .search-box {
		:deep() {
			.wd-search {
				background: transparent !important;
			}
		}
	}

    .active {
        border-radius: 12rpx;
        border: 2rpx solid #4C9F44;
        background-color: #F0F6EF;
        color: #4C9F44;
    }
</style>
