<template>
  <div class="wx-open-app">
    <wx-open-launch-app
      id="launch-btn"
      ref="launchBtnRef"
      :appid="props.appid"
      :extinfo="props.extinfo"
      @ready="handleReadyFn"
    >
      <div v-is="'script'" type="text/wxtag-template">
        <slot>
          <div
            class="btn"
            style="
            width: 334px;
            height: 52px;
            background: #ff8024;
            border-radius: 26px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
          "
          >
            打开APP
          </div>
        </slot>
      </div>
    </wx-open-launch-app>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, ref } from 'vue'

interface IProps {
  appid?: string;
  extinfo?: string;
}

const props = withDefaults(defineProps<IProps>(), {
  // wxe87236d542cd0f94 逻辑狗思维教育公众号
  // wxd61f929a1c72280a 思维魔法学堂公众号

  // wxeb44a864bdd935be zaojiao.net
  // wxf6e96c65ba6116d4 luojigou.vip

  appid: 'wxeb44a864bdd935be',
  extinfo: ''
})

const launchBtnRef = ref()

const handleReadyFn = () => {
  launchBtnRef.value.addEventListener('launch', function () {
    console.log('launch')
  })

  launchBtnRef.value.addEventListener('error', function (e: any) {
    console.log('error:', e.detail)
    window.location.href =
      'https://sj.qq.com/myapp/detail.htm?apkName=com.zaojiao.app'
  })
}

setTimeout(() => {
  console.log(props.extinfo, 'props.extinfo')
}, 3000)
</script>

<style></style>
