import { defineComponent, computed } 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
		});

      return () => (
         <>
            {
               !smoothAnimationState.isShow.value && !state.isCombineRender && 
               <div class={["authorName", styles.authorName]}>
                  <div class={styles.title}>
                     <NoticeBar text={state.examSongName} background="none" />
                  </div>
                  <div class={styles.authorCon}>
                     <div class={styles.author}>
                        {
                           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>
            }
         </>
      )
   }
})