<route lang="json5" type="home">
{
  style: {
    navigationStyle: "custom",
    navigationBarTitleText: "音视频专区",
    navigationBarBackgroundColor: "#FFF",
  },
}
</route>

<template>
  <scroll-view class="page-wrapper" scroll-y>
    <view class="w-full box-border banner-container">
      <image
        src="@/static/ycysp/banner.webp"
        mode="scaleToFill"
        class="w-full h-full"
      />
    </view>
    <!-- //优惠券 -->
    <!-- <view class="ticket-container">
      <view class="title">
        <view class="title-line"></view>
        <view class="title-text">领券更划算</view>
        <view class="title-more">我的优惠券</view>
      </view>
      <view class="flex flex-wrap flex-justify-between">
        <ticketRecieve />
        <ticketRecieve />
        <ticketRecieve type="large"/>
      </view>
    </view> -->
    <!-- //选择充值类型的会员 -->
    <view class="member-container">
      <view class="title">
        <view class="title-text">选择影音会员</view>
      </view>
      <scroll-view scroll-x class="scroll" :scroll-left="scrollLeft" scroll-with-animation>
        <view class="swiper">
          <view v-for="(item, index) in brandArr" class="member-item">
            <member :key="item.id" :detail="item" @checked="handleChecked" />
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- //充值选项 -->
    <view class="recharge-container">
      <view class="title">
        <view class="title-text">充值选项</view>
      </view>
      <scroll-view scroll-x class="recharge-scroll">
        <view v-for="(item, index) in productArr" class="recharge-item">
          <rechargeItem
            :key="item.id"
            :detail="item"
            @selected="handleSelected"
          />
        </view>
      </scroll-view>
    </view>
    <!-- //手机号 -->
    <view class="input-container">
      <input
        type="text"
        placeholder="请输入手机号充值"
        placeholder-class="pcs"
        v-model="account"
      />
    </view>
    <!-- 下一步 -->
    <view
      class="flex flex-items-center flex-justify-center next-btn"
      @click="nextEvent"
    >
      下一步
    </view>
    <!-- 描述 -->
    <view class="description">
      <view class="small-title">产品介绍</view>
      <view class="small-text"
        >1、充值后可登录官方APP<text class="small-red"
          >查看会员状态及有效期，</text
        >过期不可使用。</view
      >
      <view class="small-text"
        >2、<text class="small-red"
          >充值前请您确认充值信息是否正确，一旦提交无法取消或更改。</text
        >如因账号信息输入错误导致充值至他人账户，仍视为充值成功，无法补券。</view
      >
      <view class="small-text"
        >3、此权益中包含的优酷黄金会员、芒果视频会员可在手机、电脑、平板上使用，不支持电视端，不支持投屏。<text
          class="small-red"
          >QQ音乐支持QQ号或手机号，</text
        >其余会员账号均为手机号。</view
      >
      <view class="small-text"
        >4、本产品仅适用于中国大陆地区用户，暂不支持开通中国港澳台、海外地区服务。</view
      >
      <view class="small-text"
        >5、如有疑问请联系成都蓝色兄弟网络科技有限公司，<text class="small-red"
          >客服电话400-118-1216</text
        >（服务时间09:00-18:00）。
      </view>
    </view>
    <view style="height: 40rpx"></view>
    <!-- 我的订单 -->
    <view
      class="flex flex-justify-center flex-items-center order-btn"
      @click="toOrder"
      >我的<br />订单</view
    >
  </scroll-view>
</template>

<script setup>
import { ref, reactive, unref, onMounted } from "vue";
import {onLoad} from "@dcloudio/uni-app";
// import ticketRecieve from './components/ticket-recieve.vue';
import member from "./components/member.vue";
import rechargeItem from "./components/recharge-item.vue";
import { getBrandList, getProductList, login } from "@/api/ycysp";
import { generateUUID,getQueryString } from "@/utils/utils";
import { createOrder } from "@/api/ycysp";
import useCode from "./hooks/useCode";
// const reg =
//   /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
// const _reg = /^[1-9][0-9]{4,}$/;
const brandArr = ref([]);
const productArr = ref([]);
const account = ref("");
const authCode = ref("");
const scrollLeft = ref(0);

//获取品牌
const getBrand = () => {
  return getBrandList()
    .then((res) => {
      const { list } = res;
      const is_anchor_brand_id = getQueryString('brand_id')
      brandArr.value = list.map((item, index) => ({
        ...item,
        isChecked: is_anchor_brand_id ? item.id === Number(is_anchor_brand_id) : index === 0,
      }));
      setTimeout(()=>{
        scrollLeft.value = 60
      },500)
     
    })
    .catch((err) => {
      console.error(err);
    });
};

//获取商品
const getProduct = () => {
  const checkedBrand = brandArr.value.find((item) => item.isChecked);
  const params = { brand_id: checkedBrand.id };
  getProductList({ params })
    .then((res) => {
      const { list } = res;
      const is_anchor_product_id = getQueryString('product_id')
      productArr.value = list.map((item, index) => ({
        ...item,
        isSelected: is_anchor_product_id ? item.id === Number(is_anchor_product_id) : index === 0,
      }));
    })
    .catch((err) => {
      console.error(err);
    });
};

//选中品牌
const handleChecked = (checkedId) => {
  brandArr.value = brandArr.value.map((item, index) => {
    const { id, isChecked } = item;
    if (checkedId === id) {
      return { ...item, isChecked: !isChecked };
    }
    return { ...item, isChecked: false };
  });
  getProduct();
};

//选中商品
const handleSelected = (selectedId) => {
  productArr.value = productArr.value.map((item, index) => {
    const { id, isSelected } = item;
    if (selectedId === id) {
      return { ...item, isSelected: !isSelected };
    }
    return { ...item, isSelected: false };
  });
};

//下一步事件
const nextEvent = () => {
  const selectProduct = productArr.value.find((item) => item.isSelected);
  if (!selectProduct) {
    uni.showToast({
      title: "请选择充值选项",
      icon: "none",
    });
    return;
  }
  if (!account.value) {
    uni.showToast({
      title: "请填写充值手机号",
      icon: "none",
    });
    return;
  }
  // if (!reg.test(account.value)) {
  //   uni.showToast({
  //     title: "充值账号格式不正确,应为手机号",
  //     icon: "none",
  //   });
  //   return;
  // }
  addOrder(selectProduct.id);
};

const addOrder = (id) => {
  const params = {
    account: unref(account),
    product_id: id,
  };
  createOrder({ params })
    .then((res) => {
      const { order_no, notify_url, sign, plain_text } = res;
      uni.navigateTo({
        url: `/pages/ycysp/pay?order_no=${order_no}`,
      });
    })
    .catch((err) => {
      console.error(err);
    });
};

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

onLoad((options) => {
    const {brand_id,product_id} = options;
    console.log(options)
})

onMounted(async () => {
  await getBrand();
  getProduct();
  const token = window.localStorage.getItem("token") || "";
  if (!token) {
    const code = await useCode();
    authCode.value = code
    // authCode.value = generateUUID();
    const { token } = await login({ params: { code: unref(authCode) } });
    window.localStorage.setItem("token", token);
  }
});
</script>

<style scoped lang="scss">
.page-wrapper {
  width: 100vw;
  height: 100vh;
  opacity: 1;
  // background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
  background: #ffffff;
  overflow-y: auto;
}

.banner-container {
  height: 338rpx;
  padding: 32rpx 20rpx 0;
  background: url("@/static/ycysp/banner-bg.webp") no-repeat;
  background-size: 100% auto;
}

.ticket-container {
  width: 710rpx;
  height: 416rpx;
  border-radius: 28rpx;
  opacity: 1;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
  margin: 40rpx auto 0;
  box-sizing: border-box;
  padding: 24rpx;
}

.title {
  width: 100%;
  height: 50rpx;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 2rpx;

  .title-line {
    width: 10rpx;
    height: 34rpx;
    border-radius: 0rpx 6rpx 6rpx 0rpx;
    opacity: 1;
    background: linear-gradient(180deg, #95ceff 0%, #439fff 100%);
  }

  .title-text {
    font-size: 36rpx;
    font-weight: 400;
    color: #212f3b;
    margin-left: 14rpx;
    font-family: PingFang SC-Bold;
  }

  .title-more {
    position: absolute;
    right: 0;
    font-size: 26rpx;
    font-weight: normal;
    color: #666e7e;
  }
}

.member-container {
  width: 100%;
  padding-left: 20rpx;
  box-sizing: border-box;
  margin: 40rpx auto 0;
}

.scroll {
  width: 100%;
  // height:250rpx;
  overflow-x: auto;
  transition: all 1s linear;
}

.swiper {
  display: flex;
  flex-wrap: wrap;
  width: calc((100vw - 68rpx) / 3 * 4 + 64rpx);
}

.member-item {
  margin: 16rpx 16rpx 0 0;
  width: calc((100vw - 68rpx) / 3);
}

.recharge-container {
  width: 100%;
  margin: 40rpx auto 0;
  padding-left: 20rpx;
  box-sizing: border-box;
}

.recharge-scroll {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.recharge-item {
  display: inline-flex;
  margin: 20rpx 16rpx 0 0;
  // width: calc((100vw - 68rpx) / 3.5);
  width: 204rpx;
}

.input-container {
  width: 710rpx;
  height: 88rpx;
  border-radius: 84rpx;
  opacity: 1;
  background: #eef7ff;
  margin: 36rpx auto 0;
  display: flex;
  align-items: center;
  padding: 0 40rpx;
  box-sizing: border-box;
  input {
    width: 100%;
    font-size: 32rpx;
    font-weight: normal;
    color: #8dbff6;
  }
}

.pcs {
  font-size: 32rpx;
  font-weight: normal;
  color: #8dbff6;
}

.next-btn {
  width: 710rpx;
  height: 88rpx;
  padding: 12rpx 28rpx;
  margin: 20rpx auto 0;
  font-size: 32rpx;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;
  color: #ffffff;
  background: linear-gradient(270deg, #3194ff 0%, #96cfff 100%);
  box-sizing: border-box;
  border-radius: 392rpx;
}

.description {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  margin-top: 40rpx;
}

.small-title {
  /* 标题二 */
  font-size: 28rpx;
  font-weight: normal;
  line-height: 32rpx;
  letter-spacing: 0px;
  color: #0f0f0f;
  margin-bottom: 20rpx;
}

.small-text {
  font-size: 24rpx;
  font-weight: normal;
  line-height: 44rpx;
  color: #383838;
}

.small-red {
  color: #ff0000;
}

.order-btn {
  position: fixed;
  right: 20rpx;
  bottom: 100rpx;
  width: 96rpx;
  height: 96rpx;
  font-size: 24rpx;
  font-weight: normal;
  line-height: 32rpx;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
  background: rgba(45, 145, 255, 0.6);
  border-radius: 96rpx;
}
</style>
