<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Form, Input, InputNumber, message } from 'ant-design-vue';

import { createVideoTask } from '#/api/core/iva';

const projectName = ref('');
const year = ref<null | number>(null);
const month = ref<null | number>(null);
const day = ref<null | number>(null);
const hours = ref<null | number>(null);
const minutes = ref<null | number>(null);
const seconds = ref<null | number>(null);
const fileName = ref('');
const selectedFile = ref<File | null>(null);
const fileInputRef = ref<HTMLInputElement | null>(null);

const [Modal, modalApi] = useVbenModal({
  title: '新建视频分析任务',
  class: 'w-[600px]',
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    if (!projectName.value || !selectedFile.value) {
      message.warning('请填写项目名并选择视频文件');
    }
    uploadFile();
  },
});

async function uploadFile() {
  const formData = new FormData();
  formData.append('file', selectedFile.value);
  formData.append('projectName', projectName.value);
  formData.append(
    'projectDatetime',
    `${year.value ? year.value.toString() : '2025'}-${
      month.value ? month.value.toString().padStart(2, '0') : '01'
    }-${day.value ? day.value.toString().padStart(2, '0') : '01'} ${
      hours.value ? hours.value.toString().padStart(2, '0') : '00'
    }:${minutes.value ? minutes.value.toString().padStart(2, '0') : '00'}:${
      seconds.value ? seconds.value.toString().padStart(2, '0') : '00'
    }`,
  );
  await createVideoTask(formData).then(() => {
    message.success('任务创建成功，正在处理视频，请稍后刷新列表查看');
    modalApi.close();
    // 清空表单
    projectName.value = '';
    year.value = null;
    month.value = null;
    day.value = null;
    hours.value = null;
    minutes.value = null;
    seconds.value = null;
    fileName.value = '';
    selectedFile.value = null;
  });
}

function selectFile() {
  fileInputRef.value?.click();
}

function handleFileChange(event: Event) {
  const files = (event.target as HTMLInputElement).files;
  if (files && files.length > 0) {
    selectedFile.value = files[0];
    fileName.value = files[0].name;
  }
}
</script>

<template>
  <Modal>
    <Form layout="vertical">
      <Form.Item label="项目名*" required>
        <Input v-model:value="projectName" />
      </Form.Item>

      <Form.Item label="日期">
        <div style="display: flex; gap: 8px">
          <InputNumber
            v-model:value="year"
            :min="1900"
            :max="2100"
            placeholder="年"
            style="flex: 1"
          />
          <InputNumber
            v-model:value="month"
            :min="1"
            :max="12"
            placeholder="月"
            style="flex: 1"
          />
          <InputNumber
            v-model:value="day"
            :min="1"
            :max="31"
            placeholder="日"
            style="flex: 1"
          />
        </div>
      </Form.Item>

      <Form.Item label="时间">
        <div style="display: flex; gap: 8px">
          <InputNumber
            v-model:value="hours"
            :min="0"
            :max="23"
            placeholder="小时"
            style="flex: 1"
          />
          <InputNumber
            v-model:value="minutes"
            :min="0"
            :max="59"
            placeholder="分钟"
            style="flex: 1"
          />
          <InputNumber
            v-model:value="seconds"
            :min="0"
            :max="59"
            placeholder="秒"
            style="flex: 1"
          />
        </div>
      </Form.Item>

      <Form.Item label="上传视频*" required>
        <div
          @click="selectFile"
          style="
            padding: 16px;
            text-align: center;
            cursor: pointer;
            border: 1px dashed #d9d9d9;
          "
        >
          {{ fileName || '点击选择文件' }}
          <input
            type="file"
            accept="video/*"
            ref="fileInputRef"
            @change="handleFileChange"
            style="display: none"
          />
        </div>
      </Form.Item>
    </Form>
  </Modal>
</template>
