<route lang="json5" type="home">
    {
      style: {
        navigationStyle: 'custom',
        navigationBarTitleText: '奶茶活动',
        navigationBarBackgroundColor:'#FFF',
      },
    }
</route>

<template>
    <scroll-view scroll-y class="page-wrapper">
        <view class="nav-btn" @click="toOrder">我的订单</view>
        <!-- <view style="opacity: 0;width: 100%;height:200rpx;position:absolute;top:230rpx" @click="test"></view> -->
        <view class="wrapper flex flex-col flex-items-center box-border">
            <view v-for="(item,key) in productList" :key="key">
                <brand :products="item" :brandName="key"/>
            </view>
        </view>
    </scroll-view>
</template>

<script setup>
    import brand  from './components/brand';
    import { getProductList, goPay, login } from '../../api/ycnc'
    import { onMounted, ref, provide, unref  } from 'vue';
    // import { getQueryString , isIOS, isAndroid } from '../../utils/utils';
    import useCode from './hooks/useCode';
    import usePay from './hooks/usePay';
    import config from './config';
    const productList = ref([]);
    const authCode = ref('');
   
    const handleBuy = (productData) => {
        pay(productData)
    }

    const goDetail = (productData) => {
        const {ProductId} = productData
        uni.navigateTo({
            url:`/pages/ycnc/detail?product_id=${ProductId}`
        })
    }

    const pay = (productData) => {
        const {ProductId,voucherAmount,brandFlag} = productData
        console.log('商品数据',productData);
        const params = {
            product_id:ProductId
        }
        goPay({params}).then(res => {
            const {order_no,notify_url,sign,plain_text} = res;
            const {payFunc} = usePay();
            payFunc({order_no,notify_url,TranAmt:voucherAmount,MerName:config[brandFlag].name,sign,plain_text})
        }).catch(err => {
            console.log(err);
        })
    }

    provide('custom-events',{
        handleBuy,
        goDetail
    })

    const toOrder = () => {
        uni.navigateTo({
            url:'/pages/ycnc/order'
        })
    };

    onMounted(async ()=>{
        queryProducts();
        const token = window.localStorage.getItem('token') || '';
        if(!token){
            const code = await useCode();
            authCode.value = code
            const {token} = await login({params:{code:unref(authCode)}});
            window.localStorage.setItem('token',token);
        } 
    });

    function handleData(arg,args){
        return arg.reduce((total,current) =>{
            const flag = current.brandFlag;
            const flagData = args.filter(item => item.brandFlag === flag)
            if(Array.isArray(total[flag])){
                total[flag].push(...flagData)
            }else{
                total[flag] = [...flagData]
            }
            return total
        },{})
    }

    //查询品牌，商品接口
    const queryProducts = () => {
        const params = {GID:'4894651'}
        getProductList({params}).then(res => {
            const {milkList,
                milkVoucherList} = res
                productList.value = handleData(milkList,milkVoucherList);
        }).catch(err=>{
            console.log(err);
        })
    }

</script>

<style lang='scss'>
.page-wrapper{
    // width: 100vw;
    // height: 100vh;
    width:100%;
    height: 100%;
    overflow-y: auto;
}
.nav-btn{
    position: absolute;
    right: 0;
    top:42rpx;
    width: 42rpx;
    height: 132rpx;
    background: #FFFFFF;
    border-radius: 16rpx 0rpx 0rpx 16rpx;
    font-weight: normal;
    font-size: 22rpx;
    color: #4BB8FF;
    writing-mode: vertical-lr;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrapper{
    width:100%;
    min-height:100vh;
    background: url('/static/ycnc/bg.png') no-repeat;
    background-size:cover;
    padding-top:730rpx;
}
</style>