import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import React, { useState } from 'react'
import './index.less'
import { useDidShow, useUnload } from '@tarojs/taro'
let count = 0

const MiniWeb: React.FC = () => {
  const [showModal, setShowModal] = useState(false)

  useDidShow(() => {
    count++
    if (count < 2) {
      setShowModal(true)
    } else {
      Taro.navigateBack()
    }
  })

  useUnload(() => {
    count = 0
  })

  function btnClick() {
    Taro.openEmbeddedMiniProgram({
      appId: 'wxdd07a068bf2e6ef4',
      path: 'pages/middlepage/middlepage?paramKey=fdc2ab9b532143aea717520b5f9b8f10'
    })
  }

  function onCancel() {
    Taro.navigateBack()
  }

  function onConfirm() {
    setShowModal(false)
    btnClick()
  }

  return (
    <View className='mini-web'>
      {showModal && <View className='modal'>
        <View className='modal-content'>
          <View className='modal-body'>
            是否打开半屏小程序
          </View>
          <View className='modal-footer'>
            <View className='button cancel' onClick={onCancel}>取消</View>
            <View className='button confirm' onClick={onConfirm}>确认</View>
          </View>
        </View>
      </View>}
      半屏小程序
    </View>
  )
}

export default MiniWeb