<script setup>
import AppEditor from '@/components/base/AppEditor.vue'
import { useFileDialog } from '@vueuse/core'
import { multipartUpload } from '@/utils/oss'
import { Delete } from '@element-plus/icons-vue'

const form = defineModel('form', {
  type: Object,
  default: () => ({}),
})

const props = defineProps({
  steps: { type: Array, default: () => [] },
})

const activeTab = ref(1)

const handleNext = () => {
  activeTab.value++
}
const handlePrev = () => {
  activeTab.value--
}
const handleSave = () => {
  emit('save', form)
}

const emit = defineEmits(['save'])

const { open, onChange } = useFileDialog({
  accept: 'image/*,video/*',
  multiple: false,
})

const currentItem = computed(() => {
  return props.steps.find((item) => item.name === activeTab.value)
})
const key = computed(() => {
  return currentItem.value?.key
})

const handleUpload = async () => {
  if (currentItem.value.isImage) {
    open({ accept: 'image/*' })
  } else if (currentItem.value.isVideo) {
    open({ accept: 'video/*' })
  }
}
const isLoading = ref(false)
const percentage = ref(0)
onChange(async (files) => {
  if (!files) return
  const [file] = files
  isLoading.value = true
  const res = await multipartUpload(file, {
    progress: (progress) => {
      percentage.value = Math.round(progress * 100)
    },
  })
  if (currentItem.value.isImage) {
    form.value[key.value] = form.value[key.value] ? [...form.value[key.value], res.url] : [res.url]
  } else {
    form.value[key.value] = res.url
  }
  isLoading.value = false
})

const handleDelete = (url) => {
  form.value[key.value] = form.value[key.value].filter((item) => item !== url)
}
</script>

<template>
  <AppCard>
    <el-tabs stretch v-model="activeTab" class="operations-tabs">
      <el-tab-pane :label="item.label" :name="item.name" v-for="item in steps" :key="item.name">
        <AppCard :title="item.title">
          <div style="background: #ecf2f7; padding: 40px; border-radius: 20px; min-height: 200px">
            <template v-if="item.isImage || item.isVideo">
              <el-button type="primary" round @click="handleUpload" :loading="isLoading">点击上传</el-button>
              <el-progress :percentage="percentage" v-if="isLoading" />
              <div v-if="item.isImage" class="upload-tips">
                <p>图片格式为png/jpg/jpeg，图片大小不能超过2M</p>
              </div>
              <div v-if="item.isVideo" class="upload-tips">
                <p>视频分辨率不能超过1080p，视频文件大小不能超过500M</p>
                <p>视频帧率25fps，视频文件格式为mp4</p>
              </div>
            </template>
            <AppEditor v-model="form[item.key]" v-else />
            <div class="upload-list">
              <ul class="image-list" v-if="item.isImage">
                <li v-for="url in form[item.key]" :key="url">
                  <el-icon @click="handleDelete(url)"><Delete /></el-icon>
                  <img :src="url" />
                </li>
              </ul>
              <video class="video-player" v-if="item.isVideo && form[item.key]" :src="form[item.key]" controls></video>
            </div>
          </div>
        </AppCard>
      </el-tab-pane>
    </el-tabs>
    <el-row justify="center">
      <el-button type="primary" plain @click="handlePrev" v-if="activeTab > 1">上一步</el-button>
      <el-button type="primary" @click="handleSave" style="width: 200px">保存</el-button>
      <el-button type="primary" plain @click="handleNext" v-if="activeTab < steps.length">下一步</el-button>
    </el-row>
  </AppCard>
</template>

<style lang="scss" scoped>
.operations-tabs {
  :deep(.el-tabs__header) {
    width: 800px;
    margin: 0 auto 20px;
  }
  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }
}
.upload-list {
  margin: 20px 0;
}
.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  li {
    position: relative;
    width: 180px;
    height: 240px;
    background-color: #fff;
    border: 1px solid #eee;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .el-icon {
      display: none;
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      color: #999;
      font-size: 22px;
    }
    &:hover {
      .el-icon {
        display: block;
      }
    }
  }
}
.video-player {
  max-height: 400px;
}
.upload-tips {
  padding: 10px 0 20px;
  color: #000;
  line-height: 30px;
}
</style>
