import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from './index.module.less'
import { Grid, GridItem, Icon, Toast } from 'vant'
import iconDownload from './images/icon-download.png'
// import iconFirend from './images/icon-friend.png'
import iconWeChat from './images/icon-wechat.png'
import iconFriendRing from './images/icon-friend-ring.png'
// import iconLink from './images/icon-link.png';
import iconLogo from '@common/images/logo.png'
import shareBg from './images/share-bg.png'
import audioPan from '../images/audio-pan.png'
import smallLogo from '@common/images/icon_logo.png'
import musicBg from './images/music-bg.png'
import QRCode from 'qrcode'
import { promisefiyPostMessage } from '@/helpers/native-message'
import html2canvas from 'html2canvas'

export default defineComponent({
  name: 'sahre-model',
  props: {
    musicDetail: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    const canvasRef = ref()
    const state = reactive({
      saveLoading: false,
      image: null as any
    })
    const saveImg = async () => {
      Toast.loading({
        message: '图片生成中...',
        forbidClick: true
      })
      setTimeout(() => {
        state.saveLoading = false
      }, 100)
      const res = await promisefiyPostMessage({
        api: 'savePicture',
        content: {
          base64: state.image
        }
      })
      if (res?.content?.status === 'success') {
        Toast.success('保存至相册')
      } else {
        Toast.fail('保存失败')
      }
    }

    const onSaveWe = async (type: string) => {
      Toast.loading({
        message: '图片生成中...',
        forbidClick: true
      })
      setTimeout(() => {
        state.saveLoading = false
      }, 100)
      const res = await promisefiyPostMessage({
        api: 'shareTripartite',
        content: {
          title: '',
          desc: '',
          image: state.image,
          video: '',
          type: 'image',
          shareType: type
        }
      })
      if (res?.content?.status) {
        Toast.success('分享成功')
      } else {
        Toast.fail('分享失败')
      }
    }

    const onSavePath = (type: string) => {
      // 判断是否在保存中...
      if (state.saveLoading) {
        return
      }
      state.saveLoading = true
      // 判断是否已经生成图片
      if (state.image) {
        if (type) {
          onSaveWe(type)
        } else {
          saveImg()
        }
      } else {
        const container: any = document.getElementById('shareContent')
        html2canvas(container, {
          allowTaint: true,
          useCORS: true,
          backgroundColor: null
        })
          .then(async canvas => {
            const url = canvas.toDataURL('image/png')
            state.image = url
            if (type) {
              onSaveWe(type)
            } else {
              saveImg()
            }
          })
          .catch(() => {
            Toast.clear()
            state.saveLoading = false
          })
      }
    }

    onMounted(() => {
      const canvas = canvasRef.value
      QRCode.toCanvas(
        canvas,
        location.origin +
          location.pathname +
          '#/shareCreation?id=' +
          props.musicDetail.id,
        {
          margin: 1
        },
        (error: any) => {
          if (error) console.log(error)
          console.log('success')
        }
      )
    })

    return () => (
      <div class={styles.shareModel}>
        <div class={styles.shareContent} id="shareContent">
          <img src={shareBg} class={styles.shareBg} />
          <div class={styles.share_content__title}>
            <p class={styles.large}>我在酷乐秀发布了演奏作品</p>
            <p class={styles.small}>赶快扫码看看吧！</p>
          </div>

          <div class={[styles.share_music__container, styles.sectionFile]}>
            <div class={styles.uploadImg}>
              <img
                src={audioPan}
                class={styles.audioPan}
                crossorigin="anonymous"
              />
              <img
                src={
                  props.musicDetail.img
                    ? props.musicDetail.img + '?t' + new Date().getTime()
                    : musicBg
                }
                class={styles.muploader}
                crossorigin="anonymous"
              />
            </div>
            <div class={styles.musicDetail}>
              <p class={[styles.musicName, 'van-ellipsis']}>
                {props.musicDetail.musicSheetName}
              </p>
              <p class={styles.username}>
                演奏者：{props.musicDetail.username}
              </p>
            </div>
          </div>

          <div class={styles.downloadSection}>
            <div class={styles.qrcode}>
              <canvas ref={canvasRef} class={styles.qrcodeCanvas}></canvas>
              <img src={smallLogo} class={styles.qrcodeLogo} />
            </div>
            <div class={styles.qrtips}>
              <p class={styles.tip}>
                温馨提示：保存图片到相册或长按识别二维码进入查看喔～
              </p>
              <img src={iconLogo} class={styles.iconLogo} />
              {/* <p class={styles.downTip}>扫码下载音乐数字课堂App</p> */}
            </div>
          </div>
        </div>

        <div class={styles.shareBottom}>
          <Icon
            name="cross"
            class={styles.iconClose}
            onClick={() => emit('close')}
          />
          <div class={styles.share__header}>海报已生成！快来分享吧！</div>
          <Grid columnNum={5} border={false} class={styles.gridSection}>
            <GridItem
              icon={iconDownload}
              text="保存本地"
              onClick={() => onSavePath('')}
            ></GridItem>
            {/* <GridItem icon={iconFirend} text="群聊"></GridItem> */}
            <GridItem
              icon={iconWeChat}
              text="微信好友"
              onClick={() => onSavePath('wechat')}
            ></GridItem>
            <GridItem
              icon={iconFriendRing}
              text="朋友圈"
              onClick={() => onSavePath('wechat_circle')}
            ></GridItem>
            {/* <GridItem icon={iconLink} text="复制链接"></GridItem> */}
          </Grid>

          <div
            class={[styles.btn, 'van-hairline--top']}
            onClick={() => emit('close')}
          >
            取消
          </div>
        </div>
      </div>
    )
  }
})
