import { defineComponent, reactive, computed, onMounted, watch } from "vue"
import { Button, Popup } from "vant"
import state from "/src/state"
import TipsIcon from "./tips.png"
import styles from "./index.module.less"
import dayjs from "dayjs"
import { storeData } from "/src/store"
import { postMessage } from "/src/utils/native-message"
import { usePageVisibility } from "@vant/use"
import { getMusicSheetDetail } from "/src/utils/baseApi"
import { api_back } from "/src/helpers/communication"

export const vipData = reactive({
   show: false
})

export default defineComponent({
   name: "vip-popup",
   setup() {
      const getContent = computed(() => {
         if (state.isSchool) {
            return "VIP曲目暂不可用"
         } else {
            return "该曲目暂未解锁，解锁更多曲目，享受全新学习体验"
         }
      })
      onMounted(() => {
         if (state.isHomeWork && state.paymentType === "LOCK") {
            vipData.show = true
         }
      })
      function vaildMusicScoreUrl() {
         const url = window.location.hostname
         let returnUrl = ""
         if (/dev/.test(url) || /192.168/.test(url)) {
            returnUrl = "https://test.gym.lexiaoya.cn"
         } else if (/test/.test(url)) {
            // test 环境
            returnUrl = "https://test.gym.lexiaoya.cn"
         } else {
            returnUrl = "https://gym.lexiaoya.cn"
         }
         return returnUrl
      }
      function hanldeOpen() {
         if (state.isHomeWork) {
            postMessage({
               api: "openWebView",
               content: {
                  url: vaildMusicScoreUrl() + `/mdaya/#/member?id=${state.examSongId}`,
                  orientation: 1
               }
            })
         } else {
            vipData.show = false
         }
      }
      function handleClose() {
         if (state.isHomeWork) {
            api_back()
         } else {
            vipData.show = false
         }
      }
      const pageVisibility = usePageVisibility()
      watch(pageVisibility, value => {
         if (state.isHomeWork && value === "visible") {
            if (state.paymentType === "LOCK") {
               getMusicSheetDetail(state.examSongId).then(res => {
                  if (res.code === 200) {
                     state.paymentType = res?.data?.useStatus
                     // 当没有锁定的时候 去掉弹窗
                     if(state.paymentType !== "LOCK"){
                        vipData.show = false
                     }
                  }
               })
            }
         }
      })
      return () => (
         <>
            <Popup
               class={styles.vipPopup}
               zIndex={2222222222}
               show={vipData.show}
               /* 引导页层级和引导页禁止了pointerEvents */
               overlay-style={{ zIndex: 1111111111, pointerEvents: "initial" }}
               teleport="body"
               closeable
               onClickCloseIcon={handleClose}
               round
            >
               <div class={styles.vip}>
                  <div class={styles.title}>
                     <div class={styles.tit}>温馨提示</div>
                  </div>
                  <div class={styles.text}>{getContent.value}</div>
                  <div class={styles.btnCon}>
                     <Button class={styles.btn} round onClick={handleClose}>
                        取消
                     </Button>
                     <Button class={styles.btn} round color="#01C1B5" onClick={hanldeOpen}>
                        {state.isHomeWork ? "去开通" : " 确定"}
                     </Button>
                  </div>
               </div>
            </Popup>
         </>
      )
   }
})
