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

<template>
	<view class="pb-40rpx">
        <view>
            <navbar title="用户详情" custom-class="!bg-[#F6F7F9]"></navbar>
        </view>

        <view class="mt-28rpx mx-30rpx">
            <view class="bg-white rounded-16rpx px-28rpx pt-40rpx pb-26rpx">
                <view>
                    <view class="flex items-center">
                        <wd-img width="140rpx" height='140rpx' :src="user.avatar" :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">{{ user.nickname }}</view>
                                <view v-if="user.member == 1">
                                    <wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_crown.png`"></wd-img>
                                </view>
                            </view>
                            <view class="mt-18rpx font-400 text-28rpx text-[#303133] leading-40rpx">手机号：{{ user.mobile }}</view>
                        </view>
                    </view>

                    <!-- TODO VIP显示这块内容 -->
                    <view class="relative mt-22rpx" v-if="user.member == 1">
                        <wd-img width="650rpx" height='70rpx' :src="`${OSS}images/store/user/image1.png`"></wd-img>
                        <view class="absolute top-18rpx left-28rpx flex items-center">
                            <wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_vip.png`"></wd-img>
                            <view class="font-400 text-24rpx text-[#EECC99] leading-34rpx ml-18rpx">{{ user.expiration_time }}到期</view>
                        </view>
                    </view>

                    <view class="flex items-center justify-around px-90rpx mt-46rpx">
                        <view class="flex flex-col items-center justify-start">
                            <view class="font-400 text-24rpx text-[#606266] text-34rpx">平台余额</view>
                            <view class="font-bold text-32rpx text-[#303133] leading-34rpx mt-34rpx">{{ user.user_money || 0 }}</view>
                        </view>
                        <view class="h-98rpx">
                            <wd-divider vertical color="#EAEEF2" custom-class="!h-98rpx"></wd-divider>
                        </view>
                        <view class="flex flex-col items-center justify-start">
                            <view class="font-400 text-24rpx text-[#606266] text-34rpx">门店余额</view>
                            <view class="font-bold text-32rpx text-[#303133] leading-34rpx mt-34rpx">{{ user.user_store_money || 0 }}</view>
                        </view>
                    </view>

                    <view class="mt-50rpx relative">
                        <wd-img width="650rpx" height='216rpx' :src="`${OSS}images/store/user/image2.png`"></wd-img>
                        <view class="absolute top-24rpx left-40rpx">
                            <view class="">消费金额</view>
                            <view class="mt-22rpx">
                                <price-format color="#FF5951" :first-size="34" :second-size="34" :subscript-size="34" :price="user.order_amount"></price-format>
                            </view>
                            <view 
                                @click="router.navigateTo(`/bundle/user/bill-detail?userId=${user.id}`)"
                                class="bg-[#3C7FFF] w-124rpx h-48rpx rounded-24rpx text-[#fff] text-center leading-48rpx text-28rpx font-bold mt-12rpx">
                                    去查看
                            </view>
                        </view>
                    </view>

                    <view class="mt-26rpx mb-18rpx">
                        <wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
                    </view>

                    <view class="font-400 text-26rpx text-[#9CA3AF] leading-36rpx">注册日期：{{ user.create_time.split(' ')[0] }}</view>
                </view>
            </view>

            <view class="bg-white rounded-16rpx px-30rpx pt-36rpx pb-34rpx mt-20rpx">
                <view class="flex items-center">
                    <wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_qizhi.png`"></wd-img>
                    <view class="text-30rpx leading-42rpx text-[#303133] ml-10rpx">备注</view>
                </view>

                <view class="add-textarea">
                    <wd-textarea v-model="mark"
                        placeholder="有想说的可以在这里写哦！"
                        custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
                        custom-textarea-class='!bg-[#F8F9FA] !h-100rpx' :maxlength='30' show-word-limit />
                </view>

                <view class="bg-[#4C9F44] rounded-8rpx text-[#fff] w-626rpx h-90rpx text-center leading-90rpx mt-52rpx" @click="UserDetail.handleEditUserRemark(user.store_user_id)">修改备注</view>
            </view>
	    </view>
	</view>
</template>


<script lang="ts" setup>
    import { toTimes, copy } from '@/utils/tools'
	import { router } from '@/utils/tools'
    import { getStoreMemberDetails, editStoreMemberMark } from '@/api/store'
    import { useStoreStore } from '@/store'
    import { toast } from '@/utils/toast'

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

    // ID
    const id = ref<number>(0)
    const mark = ref<string>('')
    const user = ref<any>({
        avatar: '',
        nickname: '',
        mobile: '',
        member: 0,
        expiration_time: '',
        order_amount: 0,
        store_user_id: 0,
        create_time: ''
    })

	onLoad(async (args) => {
        id.value = Number(args.id) || 0
        await UserDetail.handleGetStoreMemberDetails()
	})

    const UserDetail = {
        /**
         * 获取用户详情
         */
        handleGetStoreMemberDetails: async () => {
            const res = await getStoreMemberDetails(useStore.defaultStore.id, id.value)
            user.value = res.user || {}
            mark.value = res.user?.remark || ''
        },

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

        /**
         * 修改用户备注
         */
        handleEditUserRemark: async (id) => {
            if (!mark.value.trim()) {
                toast.info('请输入备注内容')
                return
            }

            uni.showLoading({
                title: '修改中...'
            })

            try {
                await editStoreMemberMark(id, mark.value)
                uni.hideLoading()
                toast.info('修改成功')
                uni.$emit('refreshUserDetail')
            } catch (error) {
                uni.hideLoading()
            }
        }
    }
</script>
	
<style lang="scss">
    page {
	    background-color: $cz-page-background;
    }

    .add-textarea {
        :deep() {
            .wd-textarea__value,
            .wd-textarea__count {
                background: transparent !important;
            }
        }
    }
</style>
