import { defineComponent, ref, computed } from 'vue'
import { useUserStore } from '@/store/modules/user'
import styles from './index.module.less'
import { api_getCbsDetail } from '../../api'
import musicImg from './img/music.png'
import tipImg from './img/tip.png'
import { NPopselect } from 'naive-ui'

export default defineComponent({
  name: 'musicPreView',
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    scoreType: {
      type: String,
      default: 'staff'
    }
  },
  setup(props, { emit }) {
    const userStore = useUserStore()
    const token = userStore.getToken
    const src = ref('')
    // 获取乐器列表
    const musicalInstrumentsList = ref<any[]>([])
    const muicInstrumentId = ref<undefined | string>(undefined)
    api_getCbsDetail(props.item.id).then((res) => {
      if (res.code === 200) {
        // 当不是节奏练习(isAllSubject),并且是独奏SINGLE，且有演奏文件的时候PLAY 才加载乐器列表字段;当乐器列表大于1个的时候才显示，默认展示第一个乐器
        const { isAllSubject, musicSheetType, audioPlayTypes, musicalInstruments } = res.data
        if (!isAllSubject && musicSheetType === 'SINGLE' && audioPlayTypes.includes("PLAY")) {
          musicalInstrumentsList.value = (musicalInstruments || []).map((item: any) => {
            return {
              value: item.id,
              label: item.name
            }
          })
        }
        if (musicalInstrumentsList.value.length) {
          muicInstrumentId.value = musicalInstrumentsList.value[0].value
          setSrc(muicInstrumentId.value)
        } else {
          setSrc()
        }
      }
    })
    const musicName = computed(() => {
      return musicalInstrumentsList.value.find((item) => {
        return item.value === muicInstrumentId.value
      })?.label
    })

    const apiUrls = {
      dev: 'https://dev.kt.colexiu.com',
      test: 'https://test.lexiaoya.cn',
      online: 'https://mec.colexiu.com'
    }
    const environment = location.origin.includes('//dev')
      ? 'dev'
      : location.origin.includes('//test')
      ? 'test'
      : location.origin.includes('//mec.colexiu')
      ? 'online'
      : 'dev'
    const apiUrl = apiUrls[environment]
    const prefix = /(localhost|192)/.test(location.host) ? 'https://test.kt.colexiu.com/' : apiUrl
    function setSrc(instrumentId?: string) {
      let url =
        prefix +
        `/instrument/?_t=${Date.now()}&id=${
          props.item.id
        }&modelType=practise&modeType=json&Authorization=${token}&isCbs=true&isMove=1`
      url += '&musicRenderType=' + props.scoreType
      instrumentId && (url += `&instrumentId=${instrumentId}`)
      src.value = url
    }
    return () => (
      <div class={styles.musicPreView}>
        {musicalInstrumentsList.value.length > 1 && (
          <NPopselect
            v-model:value={muicInstrumentId.value}
            options={musicalInstrumentsList.value}
            scrollable
            size={'large'}
            trigger={'click'}
            class="musicalInstrumentsListPop"
            onUpdate:value={setSrc}
          >
            <div class={styles.musicList}>
              <img class={styles.musicImg} src={musicImg} />
              <div>{musicName.value}</div>
              <img class={styles.tipImg} src={tipImg} />
            </div>
          </NPopselect>
        )}
        {src.value && (
          <iframe width={'100%'} height={'100%'} frameborder="0" src={src.value}></iframe>
        )}
      </div>
    )
  }
})
