<template>
  <syCommonDialog
    :visible="visible"
    type="element"
    :elementDialogProps="{
      title: '创建专辑',
    }"
    showMask
    elementDialogSize="medium"
    @closePopup="$emit('update:visible', false)"
  >
    <ElForm :rules="rules" :model="model" ref="formRef">
      <CustomizeFormItem prop="name">
        <syDialogInput
          style="width: 100%"
          v-model:value="model.name"
          placeholder="请输入专辑名称"
          maxLength="30"
        ></syDialogInput>
      </CustomizeFormItem>
      <CustomizeFormItem prop="file">
        <HandleAllKindsOfType
          type="uploadAlbum"
          :file="model.file"
          @upload="upload"
          @clear="clear"
          @cancelUpload="clear"
          :uploadPercent="model.percent"
        ></HandleAllKindsOfType>
      </CustomizeFormItem>
    </ElForm>
    <div class="tip" style="margin-bottom: 50px">
      提示：系统根据您的文件名生成数字产品编号，一旦上传无法修改。
    </div>
    <syButton
      mode="elementBtn"
      type="primary"
      style="height: 40px; margin-bottom: 42px"
      class="w-full"
      :loading="submitting"
      :disabled="confirmDisabled"
      @click="handleClickConfirm"
      >确定</syButton
    >
  </syCommonDialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from "vue";

import { syCommonDialog, syDialogInput, syButton } from "cqk-sy-ui";
import { ElForm, FormInstance } from "element-plus";
import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
import HandleAllKindsOfType from "@/components/HandleAllKindsOfType/index.vue";
import { $ajax } from "@/service";
import { URLS } from "@/service/URL";
import { handleBigFileUpload } from "@/service/Upload";

const props = defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "update"): void;
}>();

const formRef = ref<null | FormInstance>();

const isDone = ref(false);

const rules = {
  name: [
    {
      required: true,
      message: "请输入专辑名",
    },
  ],
  file: [
    {
      required: true,
      message: "请关联专辑",
      trigger: "change",
    },
  ],
};
const model = reactive({
  name: "",
  file: undefined as File | undefined,
  percent: 0,
  uploadedRef: null as Awaited<ReturnType<typeof handleBigFileUpload>> | null,
});

const submitting = ref(false);

const confirmDisabled = computed(() => {
  return !model.name || !model.file || model.percent < 1 || !isDone.value;
});

const upload = async (f: File) => {
  model.file = f;
  model.percent = 0;
  const res = await handleBigFileUpload(
    f,
    (percent: number) => {
      model.percent = percent;
    },
    () => {
      isDone.value = true;
    }
  );
  model.uploadedRef = res;
};
const clear = () => {
  model.file = undefined;
  model.uploadedRef?.cancelUpload && model.uploadedRef?.cancelUpload();
  model.uploadedRef = null;
  model.percent = 0;
  isDone.value = false;
};

const handleClickConfirm = () => {
  if (submitting.value) return;
  submitting.value = true;
  formRef.value?.validate(async (valid) => {
    if (!valid) return;
    const ret = await $ajax({
      url: URLS.category,
      type: "post",
      params: {
        name: model.name,
      },
    });
    if (ret) {
      await model.uploadedRef?.unzip(ret.data.id);
      emit("update");
      emit("update:visible", false);
      submitting.value = false;
    }
  });
};

watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      formRef.value?.resetFields();
      model.percent = 0;
    } else {
      clear();
    }
  }
);
</script>

<style scoped>
.tip {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #565656;
  line-height: 17px;
}
</style>
