<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ImportDataLabelModal",
});
</script>

<script setup lang="ts">
import Icon from "@/components/Module/Icon/index.vue";
import Modal from "@/components/Module/Modal/index.vue";

import {
  Form,
  FormItem,
  Select,
  SelectOption,
  Row,
  Col,
  Space,
  Button,
  Input,
  Upload,
  Radio,
  RadioGroup,
} from "ant-design-vue";
import { ref } from "vue";

interface PropsType {
  state: Record<string, any>;
  api: Record<string, any>;
  requestMap: Record<string, any>;
  // data: Record<string, any>[];
}

const props = withDefaults(defineProps<PropsType>(), {
  state: () => {
    return {};
  },
  api: () => {
    return {};
  },
  requestMap: () => {
    return {};
  },
});

const emits = defineEmits(["onSuccess"]);

// 表单实例
const formRef = ref();

// 表单
const form = ref<Record<string, any>>({
  files: [],
});

const onFilesValid = (
  rule: Record<string, any>,
  value: Record<string, any>,
  callback: Function,
) => {
  if (form.value.files && form.value.files.length) {
    return Promise.resolve();
  } else {
    return Promise.reject("请上传文件");
  }
};

const rules: Record<string, any> = {
  files: [
    {
      required: true,
      validator: onFilesValid,
      message: "请上传文件",
      trigger: "blur",
    },
  ],
};

// 上传
const onUpload = (e: File) => {
  form.value.files[0] = e;
  return false;
};

let open = ref<boolean>(false);

// 重置
const reset = () => {
  // formRef.value.clearValidate();
  form.value = {
    files: [],
  };
};

// 打开
const onOpen = () => {
  reset();
  open.value = true;
};

// 关闭
const onClose = () => {
  open.value = false;
};

defineExpose({ onOpen, onClose });

const getTemplate = () => {
  props.api.onDownloadLabelTemplate();
};

// 提交
const onSubmit = async () => {
  await formRef.value.validate();

  const formData = new FormData();
  formData.append("file", form.value.files[0]);
  // formData.append("data_type", form.value.agreement);
  // console.log("formData", formData.get("file"));
  // console.log("formData", formData.get("data_type"));
  const res = await props.api.onImportLabel(formData);
  if (res?.code == 200) {
    emits("onSuccess");
    onClose();
  }
  // console.log("form", props);
};

const prefix = "import-data-label-modal";
</script>

<template>
  <Modal
    v-model:open="open"
    title="导入标注"
    width="700px"
    style="top: 200px"
    :onConfirm="onSubmit"
  >
    <!--
    :loading="props.requestMap.importRequest.loading.value"
   -->
    <Form
      layout="vertical"
      :model="form"
      ref="formRef"
      :rules="rules"
      v-if="open"
      :class="`${prefix}`"
    >
      <Row :gutter="[20, 24]">
        <Col :span="24">
          <FormItem name="files" class="upload-row">
            <template #label>
              <div class="form-label-wrapper">
                上传数据
                <Button type="link" @click="getTemplate" style="margin-left: auto; font-size: 14px"
                  >下载模版</Button
                >
              </div>
            </template>
            <Upload
              :multiple="false"
              :before-upload="onUpload"
              :max-count="1"
              style="width: 100%"
              accept=".csv"
            >
              <div class="upload-box">
                <div class="upload-box-icon">
                  <Icon name="fileUpload" />
                </div>
                <div class="upload-box-title">点击上传</div>
              </div>
            </Upload>
            <div class="upload-desc">请上传csv文件</div>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </Modal>
</template>

<style scoped lang="scss">
$prefix: "import-data-label-modal";

.#{$prefix} {
  :deep(.ant-form-item) {
    .ant-form-item-label > label {
      width: 100%;
    }
  }

  .ant-form-item-label {
    label {
      width: 100%;
    }
  }
}

.grid-box {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  :deep(.ant-form-item) {
    margin-bottom: 0;
  }
}

.form-label-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.grey-text {
  color: #8c8c8c;
}
.upload-row {
  .ant-upload-wrapper {
    display: block;
    :deep(.ant-upload) {
      width: 100%;
    }
  }
  .ant-upload-select {
    width: 100%;
    .upload-box {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      color: #8a8a8a;
      width: 100%;
      aspect-ratio: 537 / 91;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #d9d9d9;
      background: rgba(200, 200, 200, 0.2);
      &-icon {
      }
      &-title {
      }
    }
  }
  .upload-desc {
    font-family:
      Source Han Sans,
      Source Han Sans;
    font-weight: 400;
    font-size: 12px;
    color: #c8c8c8;
    line-height: 26px;
    text-align: justify;
    font-style: normal;
    text-transform: none;
  }
}

.upload-footer {
  padding: 12px 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}
</style>
