<template>
  <van-popup
    v-model:show="showPopup"
    round
    closeable
    position="bottom"
    :style="{ height: '5rem' }"
  >
    <h3>分享至</h3>
    <ul class="list">
      <li v-if="terminalType === 'App'">
        <img
          src="@/assets/images/share/pengyouquan.png"
          alt=""
          @click="shareFn('circle')"
        />
        <p>朋友圈</p>
      </li>
      <li v-if="terminalType === 'App'">
        <img
          src="@/assets/images/share/weixin.png"
          alt=""
          @click="shareFn('wechat')"
        />
        <p>微信好友</p>
      </li>
      <li v-if="!$shieldConfig.share">
        <img
          src="@/assets/images/share/haibao.png"
          alt=""
          @click="sharePoster"
        />
        <p>海报分享</p>
      </li>
      <li>
        <img src="@/assets/images/share/link.png" alt="" class="copyLink" />
        <p>复制链接</p>
      </li>
    </ul>
  </van-popup>
  <!-- <Poster ref="posterRef" :detail="detail" /> -->
</template>

<script setup>
import { ref, defineExpose, defineProps, onMounted } from "vue";
// import Poster from "./Poster.vue";
import { showToast } from "vant";
import Clipboard from "clipboard";
import { terminalType } from "@/utils/index";
import emitter from "@/utils/emitter";

const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
});

onMounted(async () => {
  const clipboard = new Clipboard(".copyLink", {
    text: () => {
      return props.detail.resizeUrl;
    },
  });
  clipboard.on("success", function () {
    emitter.emit("onShareInform");
    showToast("复制成功");
  });
  clipboard.on("error", function () {
    showToast("复制失败");
  });
});

const showPopup = ref(false);

const shareFn = () => {
  alert("分享");
};

const posterRef = ref();

const sharePoster = () => {
  posterRef.value.showPopup = true;
};

defineExpose({
  showPopup,
});
</script>
<style scoped lang="scss">
h3 {
  color: rgb(27, 35, 48);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 120px;
}
.list {
  display: flex;
  justify-content: space-around;
  padding: 40px;
  img {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
  }
  p {
    color: rgb(51, 51, 51);
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}
</style>
