import { defineComponent, ref } from "vue"
import styles from "./index.module.less"
import empty from "./imgs/empty.png"
import { browser } from "/src/utils";
import { HANDLE_WORK_ADD } from "../../custom-plugins/work-index";
import { storeData } from "/src/store";
import { api_back } from "/src/helpers/communication";
import { getQuery } from "/src/utils/queryString";

export const isEmptyMusicShow = ref(false)
export default defineComponent({
   name: "emptyMusic",
   setup() {
      const query = getQuery();
      const browInfo = browser()
      /** 返回 */
      const handleBack = () => {
         HANDLE_WORK_ADD()
         // 不在APP中,
         if (!storeData.isApp) {
            window.parent.postMessage(
               {
                  api: "back",
               },
               "*"
            );
            window.close()
            return
         }
         if ((browInfo.iPhone || browInfo.ios) && query.workRecord) {
            setTimeout(() => {
               api_back()
            }, 550)
            return
         }
         api_back()
      }
      return () => (
         <>
            {isEmptyMusicShow.value && (
               <div class={styles.emptyMusic}>
                  <div class={styles.emptyMusicBox}>
                     <img class={styles.img} src={empty} />
                     <div class={styles.tit}>曲目已失效</div>
                     <div class={styles.backBtn} onClick={handleBack}>返回</div>
                  </div>
               </div>
            )}
         </>
      )
   }
})
