<template>
  <syCommonDialog
    :visible="visible"
    type="element"
    :elementDialogProps="{
      title: '上传备注',
    }"
    showMask
    elementDialogSize="medium"
    @closePopup="$emit('update:visible', false)"
  >
    <div style="margin-top: -22px" class="flex justify-between">
      <div class="tip">请下载模板，按照模板格式要求编辑后上传，完成导入。</div>
      <div
        class="download"
        @click="downloadExcelTemplate(Number($route.query.id))"
      >
        下载备注模板
      </div>
    </div>
    <HandleAllKindsOfType
      style="margin-top: 22px"
      type="uploadRemark"
      :file="file"
      @upload="(v) => (file = v)"
      @clear="() => (file = null)"
    ></HandleAllKindsOfType>
    <syButton
      mode="elementBtn"
      type="primary"
      style="width: 100%; height: 40px; margin-top: 50px; margin-bottom: 42px"
      :disabled="!file"
      @click="handleClickConfirm"
      >确定</syButton
    >
  </syCommonDialog>
</template>

<script setup lang="ts">
/**
 * @description: 上传备注弹出框，用于专辑详情中的备注上传
 */

import { syCommonDialog, syButton } from "cqk-sy-ui";
import HandleAllKindsOfType from "@/components/HandleAllKindsOfType/index.vue";
import { ref, watch } from "vue";
import { downloadExcelTemplate } from "@/service/Download";
import { $ajax } from "@/service";
import { URLS } from "@/service/URL";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";

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

watch(
  () => props.visible,
  () => {
    if (props.visible) {
      file.value = null;
    }
  }
);

const file = ref<File | null>(null);
const emit = defineEmits(["update:visible", "uploaded"]);

const handleClickConfirm = async () => {
  const fd = new FormData();
  fd.append("file_data", file.value!);
  const res = await $ajax({
    url: URLS.fileImport + "?category_id=" + route.query.id,
    type: "post",
    params: fd,
  });
  if (res) {
    emit("update:visible", false);
    ElMessage.success("上传成功");
    emit("uploaded");
  }
};
</script>

<style lang="scss" scoped>
@mixin tip {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 20px;
}
.tip {
  @include tip;
  color: #565656;
}

.download {
  @include tip;
  color: var(--sy-blue);
  cursor: pointer;
  user-select: none;
}
</style>
