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'

export default defineComponent({
  name: 'message-tip',
  props: {
    // 是否显示微信弹窗
    show: {
      type: Boolean,
      default: true
    },
    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)
    onMounted(() => {
      if (props.show) {
        showPopup.value = true
        return
      }
    })

    watch(
      () => [props.show],
      () => {
        if (props.show) {
          showPopup.value = true
        } else {
          showPopup.value = false
        }
      }
    )
    // props.title, props.type
    // watch(
    //   () => [props.title, props.type],
    //   () => {}
    // )

    // 详情
    const onDetail = (type: string) => {
      let url = `${location.origin}/teacher/#/registerProtocol`

      if (type === 'question') {
        // url = `${location.origin}/teacher/muic-standard/question.html`
        url = `${location.origin}/teacher.html#/upload-protocol?type=question`
      } else if (type === 'music') {
        // url = `${location.origin}/teacher/muic-standard/index.html`
        url = `${location.origin}/teacher.html#/upload-protocol?type=music`
      }

      postMessage({
        api: 'openWebView',
        content: {
          url,
          orientation: 1,
          isHideTitle: false
        }
      })
    }
    return () => (
      <>
        <Popup
          v-model:show={showPopup.value}
          round
          style={{ width: '88%' }}
          closeOnClickOverlay={false}
          class={[
            styles.wxPopupDialog,
            props.type === 'error' ? styles.dialogError : ''
          ]}
        >
          <div class={styles.popupContainer}>
            <p class={styles.title1}>
              <span>{props.title}</span>
            </p>
            <div class={styles.popupTips}>
              {props.type === 'upload' && (
                <div 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、文件大小不要超过5MB，不符合版面规范的乐谱，审核未通过的不予上架，详情参考
                    <span onClick={() => onDetail('music')}>
                      《曲谱排版规范》
                    </span>
                    ；
                    <br />
                    2、XML与MIDI文件内容必须一致，推荐使用Sibelius打谱软件；导出设置：导出XML-未压缩（*.XML）/导出MIDI：音色-其他回放设备General
                    MIDI、MIDI、MIDI文件类型-类型0、不要勾选“将弱拍小节导出为具有休止符的完整小节”。点击查看
                    <span onClick={() => onDetail('question')}>
                      《常见问题》
                    </span>
                  </div>
                </div>
              )}

              {props.type === 'error' && (
                <div class={styles.container}>
                  <div class={styles.cContent}>
                    声轨名称解析失败，请对照
                    <span onClick={() => onDetail('music')}>
                      《曲谱排版规范》
                    </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 && (
              <Button
                round
                type="primary"
                block
                class={styles.button}
                onClick={() => emit('confirm')}
              >
                {props.buttonText}
              </Button>
            )}
          </div>
        </Popup>
      </>
    )
  }
})