<script setup lang="ts">
import { ActionSheet as VanActionSheet } from "vant";
import { computed } from "vue";
import { getImageUrl, shareToWechat } from "@/utils";
import { useRoute } from "vue-router";

const list: {
  id: 0 | 1;
  title: string;
  imgUrl: string;
}[] = [
  {
    id: 0,
    title: "微信好友",
    imgUrl: getImageUrl("weixin_friend"),
  },
  {
    id: 1,
    title: "朋友圈",
    imgUrl: getImageUrl("circle_friend"),
  },
];

const { title } = useRoute().meta;

const emit = defineEmits(["close"]);

const props = withDefaults(
  defineProps<{
    show: boolean;
  }>(),
  {
    show: false,
  },
);

const show = computed(() => props.show);

function jump(id: 0 | 1) {
  const image = getImageUrl("single_logo");
  const description = "";
  const url = window.location.href;

  if (typeof title === "string") shareToWechat(image, title, id, description, url);
}
</script>

<template>
  <VanActionSheet :show="show" :closeable="false" @close="emit('close')">
    <div class="share" @click.stop>
      <div class="share-title">分享至</div>
      <div class="share-list">
        <div v-for="item in list" :key="item.id" class="share-list-item" @click="jump(item.id)">
          <img :src="item.imgUrl" alt="" />
          <div>{{ item.title }}</div>
        </div>
      </div>
      <div class="share-cancel flex-center" @click="emit('close')">取消</div>
    </div>
  </VanActionSheet>
</template>

<style scoped lang="scss">
.share {
  //width: 375px;
  height: 256px;
  background: #ffffff;
  //border-radius: 10px 10px 0 0;
  overflow: hidden;

  &-title {
    margin: 20px auto 0;
    height: 18px;
    font-size: 14px;
    font-family:
      PingFang SC-Regular,
      PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 18px;
    text-align: center;
  }

  &-list {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    &-item {
      padding-top: 20px;
      padding-bottom: 20px;

      div {
        font-size: 12px;
        font-family:
          PingFang SC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #333333;
        text-align: center;
      }

      img {
        margin-bottom: 6px;
        width: 48px;
        height: 48px;
      }
    }
  }

  &-cancel {
    margin: 20px auto 0;
    width: 343px;
    height: 46px;
    border-radius: 40px 40px 40px 40px;
    border: 1px solid #e2e2e2;
    font-size: 14px;
    font-family:
      PingFang SC-Regular,
      PingFang SC;
    font-weight: 400;
    color: #333333;
  }
}
</style>
