<template>
  <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
    :description="`类型为：${props.mediaTypeInfo}, 大小不超过${props.fileSizeInfo}, 宽*高: ${props.mediaWidth}px*${props.mediaHeight}px`" />
  <div class="gva-btn-list" style="width: 100%;">
    <el-upload class="avatar-uploader" :action="`${imgUploadPath}/cms/mediaFile/upload?category=${props.category}`"
      :show-file-list="false" :on-success="(res) => { uploadSuccess(res) }" :on-error="uploadFailure"
      :before-upload="(file) => { return beforeUpload(file) }">
      <el-button type="default" plain icon="upload">上传</el-button>
    </el-upload>
    <el-button type="default" plain icon="link" :onclick="openDialog">插入第三方</el-button>
  </div>

  <div v-if="videoCode != ''">
    <video v-if="videoCode.substring(0, 5) == 'http:' || videoCode.substring(0, 6) == 'https:'" ref="videoRef"
      controls="controls" :width="300">
      <source :src="videoCode" />
    </video>
    <div v-else-if="videoCode.substring(0, 7) == '<iframe'" class="video-content" v-html="videoCode"></div>
    <div v-else>
      {{ videoCode }}
    </div>
  </div>
  <div v-else>
    无视频
  </div>

  <el-dialog v-model="dialogVisible" width="600" height="400" class="overlay" :show-close="false">
    <template #header>
      <div>请输入第三方iframe代码</div>
    </template>
    <el-input v-model="newVideoCode" type="textarea" :rows="14" />
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="close">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { isVideoMime } from '@/utils/image'
const imgUploadPath = import.meta.env.VITE_BASE_API

defineOptions({
  name: 'InsertVideo',
})

const videoCode = ref('')
const newVideoCode = ref('')
const emits = defineEmits(['update:modelValue', 'on-close'])
const props = defineProps({
  mediaTypeInfo: { type: String, default: 'mp4,webm' },
  fileSize: { type: Number, default: 5000 },
  fileSizeInfo: { type: String, default: '5M' },
  mediaWidth: { type: Number, default: 600 },
  mediaHeight: { type: Number, default: 400 },
  category: { type: String, default: '' },
  modelValue: { type: String, default: '' }
})

watch(() => props.modelValue, () => {
  videoCode.value = props.modelValue
  console.log(videoCode.value)
})

const beforeUpload = (file) => {
  console.log(file)
  const isLtSize = file.size / 1024 < props.fileSize
  const isVideo = isVideoMime(file.type)
  if (!isVideo) {
    ElMessage.error('上传文件只能是 ' + props.mediaTypeInfo + ' 格式')
    return false
  }
  if (!isLtSize) {
    ElMessage.error('上传文件大小不能超过 ' + info.fileSizeInfo)
    return false
  }
  return true
}

const uploadFailure = () => {
  ElMessage({
    type: 'error',
    message: '上传失败'
  })
}

const dialogVisible = ref(false)
const openDialog = () => {
  dialogVisible.value = true
  if (videoCode.value.substring(0, 7) == '<iframe') {
    newVideoCode.value = videoCode.value
  }
}

const close = () => {
  dialogVisible.value = false
  newVideoCode.value = ''
}

const submit = (value) => {
  videoCode.value = value
  emits('update:modelValue', value)
  close()
}

const handleSubmit = () => {
  if (newVideoCode.value != '') {
    submit(newVideoCode.value)
  } else {
    close()
  }
}

const uploadSuccess = (res) => {
  const { code, data, msg } = res
  if (code !== 0) {
    ElMessage({ type: 'error', message: msg })
    return
  }
  if (!data.mediaFile) {
    ElMessage({ type: 'error', message: '返回错误，上传失败' })
    return
  }
  console.log(data.mediaFile)
  submit(data.mediaFile.url)
}

defineExpose({ uploadSuccess })

</script>

<style lang="scss">
.overlay {
  border-radius: 4px;

  .el-dialog__header {
    padding: 0 !important;
    margin-right: 0 !important;
  }

  .el-dialog__body {
    padding: 12px !important;
    height: 50vh;
    overflow: auto !important;
  }

  .quick-title {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
  }

  .quick-input {
    color: #666;
    border-radius: 4px 4px 0 0;
    border: none;
    padding: 12px 16px;
    box-sizing: border-box;
    width: 100%;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
  }

  .quick-item {
    font-size: 14px;
    padding: 8px;
    margin: 4px 0;

    &:hover {
      cursor: pointer;
      background: #eee;
      border-radius: 4px;
    }
  }
}

.video-content {
  line-height: 1.2;
}
</style>
