<template>
  <el-form ref="form" label-width="84px">
    <el-form-item label="案件名称">
      <el-input
        v-model="bindExample.caseTitle"
        maxlength="50"
        placeholder="请输入案件名称"
      />
    </el-form-item>
    <el-form-item label="创建人">
      <el-input
        v-model="bindExample.caseCreator"
        placeholder="请输入案件创建人"
        maxlength="255"
        show-word-limit
      />
    </el-form-item>
    <el-form-item label="案件信息">
      <el-input
        v-model="bindExample.caseInfo"
        type="textarea"
        :autosize="false"
        :rows="5"
        placeholder="请输入案件信息"
      />
    </el-form-item>
    <el-form-item label="视频介绍"
      ><el-upload
        class="upload-demo"
        :multiple="false"
        :limit="1"
        :disabled="!!file"
        :before-upload="upload"
        :file-list="fileList"
        :http-request="() => {}"
        :on-preview="previewFile"
        accept=".mp4"
        :before-remove="removeFile"
      >
        <el-button type="primary" :disabled="!!file">
          <el-icon><Upload /></el-icon>上传
        </el-button>
        <template v-slot:tip>
          <div class="el-upload__tip">注：可上传{{ size }}以内的视频mp4格式的文件</div>
        </template>
        <template v-slot:file="{ file }: { file: UploadFile }">
          <div class="file" @click.stop="previewFile()">
            <div>
              <el-icon><Document /></el-icon>
              <span class="name">{{ file.name }}</span>
            </div>
            <el-icon @click.stop="removeFile()"><Close /></el-icon>
          </div>
        </template>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Example, setExample, addExample } from "@/app/criminal/store/example";
import { ElMessage, UploadFile } from "element-plus";
import { QuiskExpose } from "@/helper/mount";
import { useUpload } from "@/hook/upload";
import { uploadFile } from "@/store/system";

const props = defineProps<{ example?: Example }>();
const bindExample = ref<Example>(props.example ? { ...props.example } : ({} as Example));

const { size, fileList, upload, removeFile, previewFile, file, accept } = useUpload({
  url: bindExample.value.caseInfoVideo,
  maxSize: 100 * 1024 * 1024,
  formats: [".mp4"],
});

fileList.value.push();

defineExpose<QuiskExpose>({
  async submit() {
    if (file.value && typeof file.value !== "string") {
      const url = await uploadFile(file.value);
      bindExample.value.caseInfoVideo = url;
    }

    if (!bindExample.value.caseTitle || !bindExample.value.caseTitle.trim()) {
      ElMessage.error("案件名称不能为空");
      throw "案件名称不能为空";
    }
    await (bindExample.value.caseId
      ? setExample(bindExample.value)
      : addExample(bindExample.value));
  },
});
</script>

<style scoped lang="scss">
.upload-demo {
  overflow: hidden;
}

.file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > div {
    display: flex;
    align-items: center;
  }

  .name {
    margin-left: 10px;
  }
}
</style>
