<template>
  <div class="content-box">
    <div
      class="row"
      @click="openRedemptionCode"
      v-if="showRedemptionCode !== 0"
    >
      <div>
        <h-img width=".5rem" src="base/icon_13.png" type="local" />
        <span>Código de reembolso</span>
      </div>
      <h-img src="menu/arrows.png" type="local" width="0.2rem" />
    </div>
    <div
      v-for="(item, index) in cells"
      :key="index"
      class="row"
      @click="openLink(item)"
    >
      <div>
        <h-img width=".5rem" :src="item.icon" :type="item.type" />
        <span>{{ item.label }}</span>
      </div>
      <h-img src="menu/arrows.png" type="local" width="0.2rem" />
    </div>
    <div class="link">
      <p>Compartilhe este link de indicação com seus amigos</p>
      <div class="flex-sad">
        <h-img
          @click="goLink(item.path, item.type)"
          :src="item.icon"
          v-for="(item, index) in shareList"
          :key="index"
        />
      </div>
      <div class="share-link">
        <span>{{ shareUrl }}</span>
        <h-img
          class="copy"
          src="infiniteProxy/icon3.png"
          width=".5rem"
          @click="clipboard(shareUrl)"
        />
      </div>
    </div>
    <h-center-popup v-model="showRedemption" contentBgcolor="#002E2C">
      <template v-slot:title>
        <div style="font-size: 0.38rem">
          Código de resgate do pacote de presente
        </div>
      </template>
      <div class="redemption-box">
        <h2>Código de troca</h2>
        <div class="redemption-box-input">
          <p>Por favor, entre. Código de troca</p>
          <h-input
            v-model="redemptionValue"
            :center="true"
            color="#FFF044"
            type="number"
            :maxlength="18"
            background="#1B2923"
            placeholder="Por favor,introduza"
          />
        </div>
        <div class="errTxt" v-show="errTxt.length > 0">{{ errTxt }}</div>
        <van-button
          :disabled="!btnRedemption"
          loading-text="loading..."
          :loading="loadingRedemption"
          color="#1A795B"
          @click="submitRedemptionCode"
          >Confirmar</van-button
        >
      </div>
    </h-center-popup>
  </div>
</template>

<script setup lang="ts">
import { computed, watch, ref } from "vue";
import { useRouter } from "vue-router";
import emitter from "@/utils/eventBus";
import useShare from "@/hooks/useShare";
import { useBaseStore } from "@/stores/modules/base";
import { clipboard } from "@/utils";
import socketApi from "@/socket/socketApi";
import { useUserStore } from "@/stores/modules/user";
import { toast } from "@/utils/toast";
import http from "@/https/index";
const { shareList, shareUrl, goLink } = useShare();
const router = useRouter();
const baseStore = useBaseStore();
const userStore = useUserStore();
const showRedemptionCode = computed(() => {
  return baseStore.globalConfig.switchConfig
    ? baseStore.globalConfig.switchConfig.giftcode_state
    : -1;
});
const cells = [
  {
    label: "Minhas Apostas de Jogo",
    path: "/apostas",
    icon: "base/icon_14.png",
    type: "local",
  },
  {
    label: "Recursos de tarefas de jogo",
    path: "/gameTask",
    icon: "base/icon_15.png",
    type: "local",
  },
  {
    label: "Registro do diário de moedas de ouro",
    path: "/banco",
    icon: "base/icon_16.png",
    type: "local",
  },
  {
    label: "Afiliado - Ganhe R$100000 por mês",
    path: "/infiniteProxy",
    icon: "menu/icon_3.png",
    type: "static",
  },
];
const showRedemption = ref(false);
const redemptionValue = ref<string>("");
const errTxt = ref("");
const loadingRedemption = ref(false);
const openLink = (item: any) => {
  router.push(item.path);
};
watch(
  () => redemptionValue.value,
  () => {
    errTxt.value = "";
  }
);
const btnRedemption = computed(() => {
  return redemptionValue.value.length > 0;
});
// 提交兑换码
const submitRedemptionCode = async () => {
  loadingRedemption.value = true;
  const res = await http.useGiftCode({
    code:redemptionValue.value
  });
  loadingRedemption.value = false;
  if (res.code !== 0) {
    errTxt.value = res.txt;
    return;
  }
  redemptionValue.value = "";
  showRedemption.value = false;
  errTxt.value = "";
  await userStore.getUserInfo();
  toast("Resgate bem sucedido");
};
// 打开兑换码 模态框
const openRedemptionCode = () => {
  redemptionValue.value = "";
  errTxt.value = "";
  if (showRedemptionCode.value === 1) {
    // 禁用 兑换码功能
    return toast("A função ainda não está aberta");
  } else if (showRedemptionCode.value === 2) {
    // 功能正常开放
    showRedemption.value = true;
  } else {
    // 0 隐藏 兑换码功能 -1 未取到 后台配置参数
    return;
  }
};
</script>

<style lang="scss" scoped>
.content-box {
  padding: 0.1rem 0.5rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background-color: #1d2328;
  border-radius: 0.2rem;
  .link {
    box-sizing: border-box;
    margin-top: 0.4rem;
    padding: 0.4rem;
    p {
      font-size: 0.3rem;
      color: #808e89;
      padding: 0.3rem 0;
      border-radius: 0.2rem;
      @extend .blod;
    }

    .flex-sad {
      margin: 0.3rem 0.4rem 0.2rem 0.4rem;
      .van-image {
        width: 1.2rem;
      }
    }

    .share-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #2d3536;
      border-radius: $border-radius;
      font-size: 0.35rem;
      margin: 0.3rem 0.4rem 0.2rem 0.4rem;

      span {
        margin-left: 0.2rem;
        flex: 1;
        text-align: left;
        font-weight: 500;
        @extend .more;
      }
      .copy {
        background: #409e89;
        padding: 0.2rem 0.35rem;
        border-top-right-radius: $border-radius;
        border-bottom-right-radius: $border-radius;
        display: flex;
        align-items: center;
      }
    }
  }
  :deep(.van-image) {
    width: 0.7rem;
  }
  span {
    margin-left: 0.2rem;
    font-size: 0.4rem;
    text-align: left;
    color: #808e89;
    font-weight: 600;
  }
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem;
    margin-top: 0.2rem;
    border-bottom: 1px solid #6d7477;
    > div {
      display: flex;
      align-items: center;
      justify-content: left;
    }
    span {
      font-size: 0.3rem;
    }
  }
}
.redemption-box {
  padding: 0.4rem;
  > h2 {
    font-size: 0.5rem;
    color: #20c59c;
  }
  .errTxt {
    font-size: 0.35rem;
    color: red;
    text-align: center;
  }
  &-input {
    padding: 0.2rem;
    background-color: #1e7064;
    margin: 0.7rem 0 0.3rem 0;
    border-radius: $border-radius;

    .h-input {
      margin: 0.3rem 0;
    }
    > p {
      color: #fff;
      font-size: 0.4rem;
    }
  }
  .van-button {
    width: 100%;
    font-size: 0.4rem;
  }
}
</style>
