<script setup lang="ts">
import {useUserStore} from '@/store'
import Config from "@/config";

const emits = defineEmits<{
  success: []
}>()


const {t} = useI18n()
const userStore = useUserStore()

const painterRef = ref(null)

const path = ref('')

const poster = computed(() => ({
  css: {
    width: '658rpx',
    height: '1052rpx',
  },
  views: [
    {
      src: '/static/images/50@2x.png',
      type: 'image',
      css: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
      },

      views: [
        {
          type: 'view',
          css: {
            height: '706rpx',
          },
          views: [
            {
              // src: '/static/images/1334@2x.png',
              src: Config.shareImage,
              type: 'image',
              css: {
                position: 'absolute',
                left: 0,
                top: 0,
                width: '100%',
                height: '100%',
              },
            },
            {
              type: 'view',
              css: {
                position: 'absolute',
                left: 0,
                right: 0,
                top: '14rpx',
                display: 'flex',
                "justifyContent": 'center'
              },
              views: [
                // {
                //   src: '/static/images/img_word@2x.png',
                //   type: 'image',
                //   css: {
                //     width: '592rpx',
                //     height: '238rpx',
                //   },
                // },
              ],
            },
          ],
        },

        {

          views: [
            {
              css: {
                padding: '24rpx 24rpx',
              },
              type: 'view',
              views: [
                {
                  views: [
                    {
                      text: `${t('pages.mine.activity-description')}`,
                      type: 'text',
                      css: {
                        color: '#000',
                        fontSize: '28rpx',
                        fontWeight: 'bold',
                        lineHeight: '42rpx'
                      },
                    },
                  ],
                  type: 'view',
                },
                {
                  css: {
                    marginTop: '8rpx',
                  },
                  views: [
                    {
                      text: Config.shareDesc,
                      type: 'text',
                      css: {
                        color: '#666',
                        fontSize: '24rpx',
                        fontWeight: 'bold',
                        lineHeight: '34rpx'
                      },
                    },
                  ],
                  type: 'view',
                },
              ]
            },
            {
              css: {
                marginTop: '2rpx',
                borderTop: '1rpx dashed #D1D1D1',
              },
              type: 'view',
            },
            {
              css: {
                padding: '24rpx 24rpx',
                display: 'flex',
                'align-items': 'center',
              },
              views: [
                {
                  css: {
                    flex: '1',
                    display: 'flex',
                    'align-items': 'center',
                  },
                  views: [
                    {
                      src: userStore.userInfo.avatar,
                      type: 'image',
                      css: {
                        width: '94rpx',
                        height: '94rpx',
                        borderRadius: '50%',
                      },
                    },
                    {
                      css: {
                        display: 'inline-block',
                        marginLeft: '24rpx',
                      },
                      views: [
                        {
                          views: [
                            {
                              text: `${userStore.userInfo.firstName} ${userStore.userInfo.surname}`,
                              type: 'text',
                              css: {
                                color: '#000',
                                fontSize: '30rpx',
                                fontWeight: 'bold',
                                lineHeight: '42rpx'
                              },
                            },
                          ],
                          type: 'view',
                        },
                        {
                          css: {
                            marginTop: '8rpx',
                          },
                          views: [
                            {
                              text: `${t('pages.mine.invitation-code')}：${userStore.userInfo.invitationCode}`,
                              type: 'text',
                              css: {
                                color: '#999',
                                fontSize: '24rpx',
                                fontWeight: 'bold',
                                lineHeight: '34rpx'
                              },
                            },
                          ],
                          type: 'view',
                        },
                      ],
                      type: 'view',
                    },
                  ],
                  type: 'view',
                },
                {
                  text: Config.shareLink + `pages-login/pages/sign-up/index?invitationCode=${userStore.userInfo.invitationCode}`,
                  type: 'qrcode',
                  css: {
                    width: '124rpx',
                    height: '124rpx',
                  },
                },
              ],
              type: 'view',
            },
          ],
          type: 'view',
        },
      ],
    },
  ],
}))


function save() {
  onAppSaveToPhone()
}

function onAppSaveToPhone() {
  uni.saveImageToPhotosAlbum({
    filePath: path.value,
    success: function () {
      console.log('save success')
      uni.showToast({
        title: t('common.prompt.save-successfully'),
        icon: 'none',
      })
      emits('success')
    },
    fail(error) {
      console.log(error)
      uni.showToast({
        title: t('common.prompt.save-failed'),
        icon: 'none',
      })
    },
    complete() {
      uni.hideLoading()
    }
  })
}


function init() {
  console.log('init')
  console.log(userStore.userInfo)
  uni.showLoading({
    title: t('common.loading') + '...',
  })
  painterRef.value?.render(poster.value)
  painterRef.value?.canvasToTempFilePathSync({
    fileType: 'png',
    // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
    pathType: 'url',
    success: (res: any) => {
      console.log('res', res)
      path.value = res.tempFilePath
      save()
    },
    fail(error: Error) {
      console.log(error)
      uni.hideLoading()
      uni.showToast({
        title: t('common.failure'),
        icon: 'none',
      })
    },

  })
}

defineOptions({
  name: "InvitePoster",
});

defineExpose({
  path,
  init,
})
</script>
<template>
  <l-painter ref="painterRef" path-type="url" hidden custom-style="position: fixed; left: 200%"/>
</template>

<style scoped lang="scss"></style>
