import { defineComponent, computed, onMounted, ref } from "vue"
import styles from "./index.module.less"
import { NoticeBar } from "vant"
import state from "/src/state"
import { smoothAnimationState } from "../../view-detail/smoothAnimation"

export default defineComponent({
   name: "authorName",
   setup() {
		const combineAuthor = computed(() => {
			const context = state.musicLyricist ? state.musicComposer + ' / ' + state.musicLyricist : state.musicComposer;
			return context
		});
      const noticeBarDom = ref()
      const isScroll = ref(false)
      onMounted(() => {
         const noticeBarEl = noticeBarDom.value?.$el
         if(noticeBarEl){
            isScroll.value = noticeBarEl.querySelector(".van-notice-bar__wrap")?.offsetWidth < noticeBarEl.querySelector(".van-notice-bar__content")?.offsetWidth
         }
      })
      return () => (
         <>
            {
               !smoothAnimationState.isShow.value && !state.isCombineRender && 
               <div class={["authorName", styles.authorName]}>
                  <div class={[styles.title, state.isCbsView && styles.blackTitle, isScroll.value && styles.isScroll]}>
                     <NoticeBar ref={noticeBarDom} text={state.examSongName} background="none" />
                  </div>
                  <div class={styles.authorCon}>
                     <div class={[styles.author, state.isCbsView && styles.blackTitle]}>
                        {
                           state.isSingleLine ? 
                           <>
                              { state.musicLyricist && <NoticeBar text={state.musicLyricist} background="none" />}
                              { state.musicComposer && <NoticeBar text={state.musicComposer} background="none" /> }                           
                           </> : 
                           <>
                              { combineAuthor.value && <NoticeBar text={combineAuthor.value} background="none" /> }
                           </>
                        }
                     </div>
                  </div>
               </div>
            }
         </>
      )
   }
})
