import { defineComponent} from "vue"
import styles from "./index.module.less"
import state from "/src/state"
import animGif from "./images/refresh_anim.gif";

export default defineComponent({
   name: "loading",
   props: {
		/** 提示文案 */
		tipText: {
			type: String,
			default: '',
		},
	},
   setup(props) {
      return () => (
         <div class={[styles.loadingPop, state.isPreView && styles.isPreView]} style={{ display: state.isLoading ? "flex" : "none" }}>
            {
               // props.tipText === '音频资源加载中，请稍后…' ? 
               // <img class={styles.lottie} src={animGif} /> :
               <div class={styles.loadingCssBox}>
                  <div class={styles.loadingCssItem}></div>
                  <div class={styles.loadingCssItem}></div>
                  <div class={styles.loadingCssItem}></div>
                  <div class={styles.loadingCssItem}></div>
            </div>
            }
            <div class={styles.loadingTip}>{props.tipText}</div>
         </div>
      )
   }
})
