import MusicPreView from '@/views/content-manage/music-manage/modal/musicPreView'
import { NAlert, NButton, NCard, NImage, NList, NModal, NSpace, NTag } from 'naive-ui'
import { computed, defineComponent, reactive } from 'vue'
import { difficultyCoefficients, questionTypeCode } from '../question-bank'
import styles from './previewUnit.module.less'
const items = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'M']
const difficultyEmun = [
  { label: '普通级', value: '1' },
  { label: '进阶级', value: '2' },
  { label: '大师级', value: '3' }
]
export default defineComponent({
  name: 'previewUnit',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  setup(props, {}) {
    console.log('🚀 ~ 题目列表', JSON.parse(JSON.stringify(props.list)))
    const modalData = reactive({
      open: false,
      music: {}
    })
    const list = computed(() => {
      const arr = [] as any
      props.list.forEach((n: any) => {
        const mediaUrls =
          n?.mediaUrls?.split(',').map((media: any) => {
            return {
              src: media,
              type: media?.includes('.mp3') ? 'audio' : 'img'
            }
          }) || []
        let questionExtendsInfo = ''
        try {
          questionExtendsInfo =
            n.questionTypeCode != 'PLAY' ? n.questionExtendsInfo : JSON.parse(n.questionExtendsInfo)
        } catch (error) {}
        arr.push({
          ...n,
          mediaUrls,
          questionExtendsInfo
        })
      })
      return arr
    })
    return () => (
      <div>
        <NSpace vertical>
          {list.value.map((n: any, index: number) => {
            return (
              <NCard hoverable size="small">
                {{
                  header: () => (
                    <div>
                      <NSpace>
                        <span>
                          {index + 1}、{n.name}
                        </span>
                        <span>({n.totalScore}分)</span>
                        <NTag size="small" type="primary">
                          {questionTypeCode[n.questionTypeCode]}
                        </NTag>
                        <NTag size="small" type="primary">
                          {
                            difficultyCoefficients.find(
                              (d: any) => d.value == n.difficultyCoefficient
                            )?.label
                          }
                        </NTag>
                      </NSpace>
                    </div>
                  ),
                  default: () => (
                    <div>
                      <div innerHTML={n.questionDetail}></div>

                      {n.questionTypeCode != 'PLAY' ? (
                        <div>
                          <NSpace>
                            {n.mediaUrls.map((media: any) => (
                              <>
                                {media.type === 'audio' ? (
                                  <audio src={media.src} controls></audio>
                                ) : (
                                  <NImage height={80} src={media.src}></NImage>
                                )}
                              </>
                            ))}
                          </NSpace>
                          <NSpace vertical wrapItem={false}>
                            {n.answers.map((answer: any, index: number) => {
                              return (
                                <div class={styles.item}>
                                  <NSpace align="center">
                                    <span>{items[index]}.</span>
                                    {answer.questionAnswerTypeCode == 'TXT' ? (
                                      answer.questionAnswer
                                    ) : answer.questionAnswerTypeCode == 'IMAGE' ? (
                                      <NImage height={50} src={answer.questionAnswer}></NImage>
                                    ) : (
                                      <audio src={answer.questionAnswer} controls></audio>
                                    )}
                                  </NSpace>
                                  <span>{answer.questionExtra}</span>
                                  {!['SORT', 'LINK'].includes(n.questionTypeCode) && (
                                    <NButton text type="success">
                                      {answer.rightAnswerFlag ? '正确答案' : ''}
                                    </NButton>
                                  )}
                                </div>
                              )
                            })}
                          </NSpace>
                        </div>
                      ) : (
                        <NButton
                          onClick={() => {
                            modalData.open = true
                            modalData.music = { id: n.questionExtendsInfo?.musicSheetId }
                          }}
                        >
                          演奏曲目: {n.questionExtendsInfo?.musicName}
                          <NSpace style={{ marginLeft: '8px' }}>
                            <NTag size="small" type="primary">
                              合格分数: {n.questionExtendsInfo?.score}
                            </NTag>
                            <NTag size="small" type="primary">
                              练习小节：
                              {n.questionExtendsInfo?.start}-{n.questionExtendsInfo?.end}
                            </NTag>
                            <NTag size="small" type="primary">
                              测验难度：
                              {
                                difficultyEmun.find(
                                  (d: any) => d.value == n.questionExtendsInfo?.difficulty
                                )?.label
                              }
                            </NTag>
                          </NSpace>
                        </NButton>
                      )}

                      <NAlert style={{ marginTop: '10px' }} showIcon={false}>
                        答案解析:{n.answerAnalysis}
                      </NAlert>
                    </div>
                  )
                }}
              </NCard>
            )
          })}
        </NSpace>
        <NModal
          v-model:show={modalData.open}
          preset="dialog"
          showIcon={false}
          title={'曲谱预览'}
          style={{ width: 'auto' }}
        >
          <MusicPreView item={modalData.music} />
        </NModal>
      </div>
    )
  }
})
