<route lang="jsonc" type="page">
{
    // "needLogin": true,
    "layout": "default",
    "style": {
        "navigationStyle": "custom"
    }
}
</route>

<template>
    <view class="bg">
        <view>
            <navbar title="充值" custom-class='!bg-[#F6F7F8]'></navbar>
        </view>

        <view class="mt-24rpx mx-30rpx">
            <view class="ml-70rpx flex items-center">
                <view class="mr-72rpx font-400 text-30rpx leading-42rpx text-[#303133]">
                    转入方式
                </view>
                <view class="flex items-center">
                    <view class="flex items-center mr-20rpx">
                        <wd-img width="50rpx" height="50rpx" :src="`${OSS}icon/icon_weichat.png`"></wd-img>
                    </view>
                    <view class="font-bold text-32rpx leading-44rpx text-[#303133]">微信</view>
                </view>
            </view>

            <view class="bg-white rounded-16rpx px-38rpx py-28rpx mt-28rpx">
                <view class="font-400 text-28rpx leading-40rpx text-[#303133]">
                    转入方式
                </view>
                <view class="flex items-center">
                    <view class="font-400 text-36rpx leading-50rpx text-[#303133] mr-20rpx mt-40rpx">￥</view>
                    <view class="mt-44rpx">
                        <wd-input type="text" v-model="person" placeholder="请输入金额" no-border custom-input-class="!h-80rpx !text-48rpx !leading-66rpx" >
                        </wd-input>
                    </view>
                </view>
            </view>
            
            <!-- 推广方式 -->
            <view class="mt-60rpx">
                <view class="mx-30rpx text-32rpx leading-44rpx text-[#303133]">   
                    <text class="mr-12rpx">推广方式</text>               
                    <text class="text-26rpx leading-36rpx text-[#909399]">(选填)</text>
                </view>
                <view class="bg-white rounded-16rpx py-26rpx mt-28rpx pay-tabs">
                    <wd-tabs v-model="tab" swipeable slidable="always"> 
                        <wd-tab title="门店">
                            <view>
                                <wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
                            </view>
                            <view class="mx-30rpx mt-34rpx flex items-center">
                                <view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-28rpx">门店推广</view>
                                <view class="bg-[#F8F9FA] px-28rpx p-20rpx text-30rpx text-[#C9C9C9] h-80rpx rounded-8rpx flex items-center flex-1" @click="showStorePopup = true">
                                    <text class="mr-14rpx">请选择门店</text>
                                    <wd-icon name="arrow-down" size="22rpx"></wd-icon>
                                </view>
                            </view>
                        </wd-tab>
                        <wd-tab title="茶艺师">
                            <view>
                                <wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
                            </view>
                            <view class="mx-30rpx mt-34rpx flex items-center">
                                <view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-28rpx">茶艺师推广</view>
                                <view class="flex items-center flex-1">
                                    <wd-input type="text" v-model="person" no-border custom-class="!bg-[#F6F7F8] !rounded-8rpx w-full" custom-input-class="!px-32rpx !h-80rpx">
                                    </wd-input>
                                </view>
                            </view>
                        </wd-tab>
                    </wd-tabs>
                </view>
            </view>

            <view class="fixed left-0 right-0 bottom-92rpx z-2 bg-[#4C9F44] text-[#fff] flex justify-center items-center h-90rpx rounded-8rpx mx-60rpx" @click="buy.handleConfirmRecharge">
                确定转入
            </view>
        </view>

        <!-- 推广方式 -->
        <wd-popup v-model="showStorePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
            <view class="relative">
                <view class="absolute top-18rpx right-30rpx" @click="showStorePopup = false">
                    <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
                </view>
                <view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">推广方式 </view>
                <scroll-view scroll-y class="h-500rpx  pb-20rpx">
                    <view class="mx-56rpx" v-for="(item, index) in 5" :key="index">
                        <view class="flex items-center justify-between mb-66rpx" @click="buy.handleChooseStore(item)">
                            <view class="mr-32rpx">
                                <wd-img width="80rpx" height='80rpx' :src="`${OSS}icon/icon_location3.png`"></wd-img>
                            </view>
                            <view class="flex-1">
                                <view>这是茶馆名字</view>
                                <view class="text-28rpx leading-40rpx text-[#909399] flex items-center mt-10rpx">
                                    <view>距您5.3km</view>
                                    <view>
                                        <wd-divider vertical />
                                    </view>
                                    <view class="w-350rpx line-1">北京市海淀区宏福苑西区20号楼2单元30</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </wd-popup>
    </view>
</template>


<script lang="ts" setup>
	const OSS = inject('OSS')


    // 推广方式
    const tab = ref<number>(0)
    const person = ref<string>('') // 个人推广码
    const showStorePopup = ref<boolean>(false) // 显示门店列表弹窗

    onLoad(() => {

    })

    const buy = {
        // 选择门店
        handleChooseStore: (item: any) => {

        },

        // 确定转入
        handleConfirmRecharge: () => {
            uni.navigateTo({
                url: '/pages/notice/pay?type=vip'
            })
        }
    }
</script>   

<style lang="scss" scoped>
    page {
		background: $cz-page-background;
    }

    .pay-tabs {
        :deep() {
           .wd-tabs__line {
                background-color: #4C9F44;
           }
        }
    }
</style>
