<template>
  <!-- 分享 -->
  <div class="share" @click="emit('update:modelValue', true)">
    <h-img class="icon" width=".6rem" src="turntable/fenxiang.png" />
    <span class="flex-ct">Convide amigos para ajudar com saques</span>
  </div>

  <!-- 分享弹框 -->
  <h-center-popup
    :modelValue="modelValue"
    :z-index="99"
    title="Share"
    contentBgcolor="#004f43"
    @on-close="emit('update:modelValue', false)"
  >
    <div class="share-box">
      <div class="label">1. Convide ammigos para ajudar com saques</div>
      <div class="box-top">
        <div class="icons">
          <h-img
            class="icon"
            v-for="(item, index) in shareList"
            :index="index"
            :src="item.icon"
            :key="index"
            @click="goLink(item.path, item.type)"
          />
        </div>
        <div class="share-link">
          <span>{{ shareUrl }}</span>
          <h-img
            src="turntable/icon_08.png"
            width="1.1rem"
            height=".9rem"
            @click="clipboard(shareUrl)"
          />
        </div>
      </div>
      <div class="label">2. Enviar convite para jogador aleatório ajudar</div>
      <div class="box-bottom">
        <div class="mobile">
          <span v-for="(item, index) in mobileList" :key="index">
            {{ item }}
          </span>
        </div>
      </div>
      <div class="send">
        <div
          class="block"
          @click="goLink(shareList[2].path, shareList[2].type)"
        >
          <span>
            Enviar Mensagem no
            <span style="color: #f3e615">WhatsAPP</span>
          </span>
          <h-img width="1.6rem" src="turntable/icon_03.png" />
        </div>
        <div class="block" @click="onSend">
          <h-img width="1rem" src="turntable/icon_07.png" />
          <span>Enviar Mensagem <span style="color: #f3e615">SMS</span></span>
        </div>
      </div>
    </div>
  </h-center-popup>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { clipboard } from "@/utils";
import useShare from "@/hooks/useShare";
import socketApi from "@/socket/socketApi";
import emitter from "@/utils/eventBus";
import http from "@/https/index";

const { shareMessage, shareList, shareUrl, goLink, onSendSms } = useShare();

const props = defineProps({
  modelValue: { type: Boolean, default: false, required: true },
});

watchEffect(() => {
  if (props.modelValue) {
    http.getPopularizePhones().then((res: any) => {
      mobileList.value = res.data.phones;
    });
  }
});

const emit = defineEmits(["update:modelValue"]);

const mobileList = ref<Array<any>>([]);

const onSend = () => {
  let mobile = mobileList.value.map((i: any) => {
    return i;
  });
  onSendSms(mobile.join(","), shareMessage.value);
};

const open = () => {
  emit("update:modelValue", true);
};

emitter.on("openShare", open);
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
