<script setup>
import AppEditor from '@/components/base/AppEditor.vue'
import { useFileDialog } from '@vueuse/core'
import { upload } from '@/utils/upload'
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/*',
})

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)

onChange(async (files) => {
  if (!files) return
  const [file] = files
  isLoading.value = true
  const res = await upload(file)
  if (currentItem.value.isImage) {
    form.value[key.value] = form.value[key.value] ? [...form.value[key.value], res] : [res]
  } else {
    form.value[key.value] = res
  }
  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">
            <el-button
              type="primary"
              round
              @click="handleUpload"
              :loading="isLoading"
              v-if="item.isImage || item.isVideo"
              >点击上传</el-button
            >
            <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;
}
</style>
