<template>
  <div class="flex-column">
    <a-row style="overflow-y: hidden">
      <a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
        <a-form
          ref="form"
          v-model:model="currentAppForm"
          labelAlign="right"
          label-width="80px"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          size="mini"
        >
          <a-form-item label="当前版本">
            <span style="font-size: 15px; font-weight: bold; color: #000">
              <a-input :bordered="false" />
            </span>
          </a-form-item>
          <a-form-item label="版本号">
            <a-input-number v-model:value="currentAppForm.edition" />
          </a-form-item>
          <a-form-item label="项目名称">
            <a-input v-model:value="currentAppForm.project_name" />
          </a-form-item>
          <a-form-item label="上传">
            <a-upload
              v-model:file-list="fileList"
              :name="imageRelease_name"
              :multiple="true"
              :customRequest="handleCustomRequest"
              :headers="headers"
              :progress="progress"
              :beforeUpload="beforeUpload"
            >
              <a-button :loading="imageRelease_loading"> 点击上传 </a-button>
            </a-upload>
            {{ fileName }}
            <DeleteOutlined v-if="fileName != ''" @click="deleteFileName" />
          </a-form-item>
          <a-form-item label="描述信息">
            <a-textarea type="textarea" v-model:value="currentAppForm.description" :rows="4" />
          </a-form-item>
          <a-form-item label="是否必须更新" label-width="120px">
            <a-radio-group v-model:value="currentAppForm.must_update" size="medium">
              <a-radio :bordered="false" :value="1">是</a-radio>
              <a-radio :bordered="false" :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 10, span: 14 }">
            <a-button type="primary" @click="onFlyControlSubmit">立即创建</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  // vue
  import { ref, onMounted } from 'vue';
  // vben
  import { useMessage } from '@/hooks/web/useMessage';
  import { DeleteOutlined, UploadOutlined } from '@ant-design/icons-vue';
  import { message, Upload } from 'ant-design-vue';
  import type { UploadProps } from 'ant-design-vue';
  // api
  import { fun_AddAppFiles } from '@/api/demo/version';
  import { fun_Load, fun_Upload } from '@/api/demo/files';

  const { createMessage } = useMessage();

  // 表单栅格
  const labelCol = { span: 6 };
  const wrapperCol = { span: 18 };
  // 上传文件列表
  let fileList: any = ref([]);
  const imageRelease_loading = ref<boolean>(false);
  const imageRelease_name = ref<string>('');
  // 上传的文件
  const fileName = ref('');
  let filePath = '';

  // 影像发布事件
  const currentAppForm = ref({
    edition: '',
    description: '',
    filepath: '',
    must_update: '',
    project_name: '',
    createuser: '',
    createtime: '',
  });

  // 上传文件接口
  const handleCustomRequest = (file, progress) => {
    fileList.value = [];
    fun_Upload(file, progress)
      .then((res: any) => {
        if (res.data.result.length > 0) {
          fileName.value = res.data.result[0].fileName;
          filePath = res.data.result[0].filePath;
          imageRelease_loading.value = false;
        }
      })
      .catch((err) => {
        imageRelease_loading.value = false;
        file.onError(err);
        createMessage.error(err.message);
      });
  };

  // 上传之前
  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
    let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
    let size = file.size / 1024 / 1024;
    const isZip = extension === 'zip' || extension === 'xlsx';
    const suitableSize = size < 10;

    imageRelease_name.value = file.name;
    if (!isZip) {
      createMessage.error('只能上传后缀是.zip或者.xlsx的文件');
    }
    if (!suitableSize) {
      createMessage.error('文件大小不得超过10M');
    }
    if (isZip && suitableSize) {
      imageRelease_loading.value = true;
    }
    return (isZip && suitableSize) || Upload.LIST_IGNORE;
  };

  // 删除文件
  function deleteFileName() {
    // 影像发布事件-删除文件
    fileName.value = '';
    filePath = '';
    fileList.value = [];
  }

  // 影像发布事件-立即创建
  function onFlyControlSubmit() {
    if (fileName.value == '' || filePath == '') {
      createMessage.warn(`请选择上传文件!`);
      return;
    }
    if (currentAppForm.value.edition == '') {
      createMessage.warn(`请先填写版本号!`);
      return;
    }
    if (currentAppForm.value.project_name == '') {
      createMessage.warn(`请先填写项目名称!`);
      return;
    }
    fun_Load({ key: fileName.value }).then((res) => {
      if (res.items.length > 0) {
        currentAppForm.value.filepath = res.items[0].filePath;
        fun_AddAppFiles(currentAppForm.value).then((res2) => {
          if (res2) {
            createMessage.success(`上传成功!`);
            currentAppForm.value = {
              createtime: '',
              createuser: '',
              edition: '',
              description: '',
              filepath: '',
              must_update: '',
              project_name: '',
            };
            fileList.value = [];
          } else {
            createMessage.warn(`接口错误!`);
          }
        });
      } else {
        createMessage.warn(`上传文件出现错误!`);
      }
    });
  }
</script>
