<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 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, getQueryParams } from "../../utils/utils";
import config from "./config";
const productList = 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;
  const params = {
    product_id: ProductId,
    backUrl: uni.getStorageSync('backUrl'),
  };
  goPay({ params })
    .then((res) => {
      const { order_no, notify_url, sign, plain_text, pay_url } = res;
      window.location.replace(pay_url);
    })
    .catch((err) => {
      console.log(err);
    });
};

provide("custom-events", {
  handleBuy,
  goDetail,
});

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

// function utf8ToBase64(str) {
//   return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
//     return String.fromCharCode('0x' + p1);
//   }));
// }

onMounted(async () => {
  queryProducts();
  console.log(
    "url中所有查询参数---》》》",
    getQueryParams(window.location.href)
  );
  const token = getQueryString("token");
  const backUrl = getQueryString("backUrl");
  token && uni.setStorageSync("token", token);
  backUrl && uni.setStorageSync("backUrl", encodeURIComponent(backUrl));
});

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;
      const sortMilkList = milkList.sort((a, b) => {
        const orderA = config[a.brandFlag]
          ? config[a.brandFlag].order
          : Infinity;
        const orderB = config[b.brandFlag]
          ? config[b.brandFlag].order
          : Infinity;
        return orderA - orderB;
      });
      productList.value = handleData(sortMilkList, milkVoucherList);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="scss">
.page-wrapper {
  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>
