import { Button, Popup } from 'vant'
import { PropType, defineComponent, onMounted, ref, watch } from 'vue'
import styles from './index.module.less'
import { postMessage } from '@/helpers/native-message'
import { getCodeBaseUrl } from '@/helpers/utils'
import { ElButton, ElScrollbar } from 'element-plus'

export default defineComponent({
  name: 'message-tip',
  props: {
    type: {
      type: String as PropType<'upload' | 'error' | 'origin'>,
      default: 'upload'
    },
    title: {
      type: String,
      default: '温馨提示'
    },
    showButton: {
      type: Boolean,
      default: true
    },
    buttonText: {
      type: String,
      default: '我已知晓'
    }
  },
  emits: ['confirm'],
  setup(props, { emit }) {
    const showPopup = ref(false)
    // props.title, props.type
    // watch(
    //   () => [props.title, props.type],
    //   () => {}
    // )

    // 详情
    const onDetail = (type: string) => {
      let url = `${getCodeBaseUrl('/teacher')}/#/registerProtocol`
      if (type === 'question') {
        url = `${getCodeBaseUrl('/teacher')}/muic-standard/question.html`
      } else if (type === 'music') {
        url = `${getCodeBaseUrl('/teacher')}/muic-standard/index.html`
      }
      window.open(url)
    }
    return () => (
      <div
        class={[
          styles.popupContainer,
          props.type === 'error' ? styles.popupContainerError : ''
        ]}
      >
        <p class={styles.title1}>
          <span>{props.title}</span>
        </p>
        <div class={styles.popupTips}>
          {props.type === 'upload' && (
            <ElScrollbar class={styles.container}>
              <p class={styles.cTitle}>注意事项：</p>
              <div class={styles.cContent}>
                1、必须是上传人自己参与制作的作品 <br />
                2、歌曲及歌曲信息中请勿涉及政治、宗教、广告、涉毒、犯罪、色情、低俗、暴力、血腥、消极等违规内容，违反者直接删除内容。多次违反则进行封号处理;
                <br />
                3、点击查看
                <span onClick={() => onDetail('protocol')}>
                  《用户注册协议》
                </span>
                ，如果您上传了文件，即认为您完全同意并遵守该协议的内容。
              </div>
              <p class={styles.cTitle}>曲谱审核标准：</p>
              <div class={styles.cContent}>
                1、文件大小不要超过10MB，不符合版面规范的乐谱，审核未通过的不予上架，详情参考
                <span onClick={() => onDetail('music')}>《曲谱排版规范》</span>
                ；
                <br />
                2、XML与MIDI文件内容必须一致，推荐使用Sibelius打谱软件；导出设置：导出XML-未压缩（*.XML）/导出MIDI：音色-其他回放设备General
                MIDI、MIDI、MIDI文件类型-类型0、不要勾选“将弱拍小节导出为具有休止符的完整小节”。点击查看
                <span onClick={() => onDetail('question')}>《常见问题》</span>
              </div>
            </ElScrollbar>
          )}

          {props.type === 'error' && (
            <div class={styles.container}>
              <div class={styles.cContent}>
                声轨名称解析失败，请对照
                <span onClick={() => onDetail('protocol')}>
                  《曲谱排版规范》
                </span>
                检查后重试
              </div>
            </div>
          )}

          {props.type === 'origin' && (
            <div class={styles.container}>
              <div class={styles.cContent}>
                1、同一首曲目不可重复上传，如有不同版本统一用“（）”补充。举例：人生的旋转木马（长笛二重奏版）
                <br />
                2、曲目名后可添加曲目信息备注，包含但不限于曲目类型等。曲目名《XXX》，举例：人声的旋转木马《哈尔的移动城堡》（长笛二重奏版）
                <br />
                3、其他信息不要写在曲目名里，如歌手、上传人员昵称等。
              </div>
            </div>
          )}
        </div>

        {props.showButton && (
          <div class={styles.btnGroup}>
            <ElButton
              type="primary"
              class={styles.button}
              onClick={() => emit('confirm')}
            >
              {props.buttonText}
            </ElButton>
          </div>
        )}
      </div>
    )
  }
})