<template>
  <el-card body-class="" class="video-card">
    <div class="video-operation">
      <div>
        <el-button type="primary" text bg v-if="detail?.status === AiVideoStatusEnum.IN_PROGRESS">
          生成中
        </el-button>
        <el-button text bg v-else-if="detail?.status === AiVideoStatusEnum.SUCCESS">
          已完成
        </el-button>
        <el-button type="danger" text bg v-else-if="detail?.status === AiVideoStatusEnum.FAIL">
          异常
        </el-button>
      </div>
      <!-- 操作区 -->
      <div>
        <el-button
          class="btn"
          text
          :icon="Download"
          @click="handleButtonClick('download', detail)"
        />
        <el-button
          class="btn"
          text
          :icon="RefreshRight"
          @click="handleButtonClick('regeneration', detail)"
        />
        <el-button class="btn" text :icon="Delete" @click="handleButtonClick('delete', detail)" />
        <el-button class="btn" text :icon="More" @click="handleButtonClick('more', detail)" />
      </div>
    </div>
    <div class="video-wrapper" ref="cardVideoRef">
      <video
        class="video"
        :src="detail?.videoUrl"
        controls
      ></video>
      <div v-if="detail?.status === AiVideoStatusEnum.FAIL">
        {{ detail?.errorMessage }}
      </div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { Delete, Download, More, RefreshRight } from '@element-plus/icons-vue'
import { VideoVO } from '@/api/ai/video'
import { PropType, ref, toRefs, watch, onMounted } from 'vue'
import { ElLoading, LoadingOptionsResolved } from 'element-plus'
import { AiVideoStatusEnum } from '@/views/ai/utils/constants'
import { useMessage } from '@/hooks/web/useMessage'

const message = useMessage() // 消息

const props = defineProps({
  detail: {
    type: Object as PropType<VideoVO>,
    require: true
  }
})

const cardVideoRef = ref<any>() // 卡片 video ref
const cardVideoLoadingInstance = ref<any>() // 卡片 video ref

/** 处理点击事件  */
const handleButtonClick = async (type, detail: VideoVO) => {
  if (type === 'regeneration') {
    // 显示重新生成加载状态
    const loadingInstance = ElLoading.service({
      target: cardVideoRef.value,
      text: '重新加载中...'
    });
    try {
      emits('onBtnClick', type, detail);
      // 等待父组件处理完成后，detail更新会自动触发watch重新加载图片
    } finally {
      loadingInstance.close();
    }
  } else {
    emits('onBtnClick', type, detail);
  }
}

const emits = defineEmits(['onBtnClick', 'onMjBtnClick']) // emits

/** 监听详情 */
const { detail } = toRefs(props)
watch(detail, async (newVal, oldVal) => {
  await handleLoading(newVal.status as string)
})

/** 处理加载状态 */
const handleLoading = async (status: number) => {
  // 情况一：如果是生成中，则设置加载中的 loading
  if (status === AiVideoStatusEnum.IN_PROGRESS) {
    cardVideoLoadingInstance.value = ElLoading.service({
      target: cardVideoRef.value,
      text: '生成中...'
    } as LoadingOptionsResolved)
    // 情况二：如果已经生成结束，则移除 loading
  } else {
    if (cardVideoLoadingInstance.value) {
      cardVideoLoadingInstance.value.close()
      cardVideoLoadingInstance.value = null
    }
  }
}

/** 初始化 */
onMounted(async () => {
  await handleLoading(props.detail.status as string)
})
</script>

<style scoped lang="scss">
.video-card {
  width: 320px;
  height: auto;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;

  .video-operation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .btn {
      //border: 1px solid red;
      padding: 10px;
      margin: 0;
    }
  }

  .video-wrapper {
    overflow: hidden;
    margin-top: 20px;
    height: 280px;
    flex: 1;

    .video {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }

  .video-mj-btns {
    margin-top: 5px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
</style>
