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

<script setup lang="ts">
import Modal from "@/components/Module/Modal/index.vue";
import {
  Form,
  FormItem,
  InputNumber,
  Input,
  Row,
  Col,
  Space,
  Button,
  message,
} from "ant-design-vue";
import { download, downloadFile } from "@/utils/download/index.ts";
import { ref } from "vue";

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

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 formRef = ref();

// 表单
const form = ref<Record<string, any>>({
  batchIds: [],
  tarin: 0.5,
  test: 0.5,
  fileName: null,
  description: null,
});

let open = ref<boolean>(false);

// 重置
const reset = () => {
  // formRef.value.clearValidate();
  form.value = {
    batchIds: [],
    tarin: 0.5,
    test: 0.5,
    fileName: null,
    description: null,
  };
};

// 打开
const onOpen = (ids: string[]) => {
  reset();
  form.value.batchIds = ids;
  open.value = true;
};

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

const onTrainChange = (value: string | number) => {
  form.value.test = (1 - Number(value)).toFixed(1);
  // form.value.test = 10 - form.value.tarin;
};

const onTestChange = (value: string | number) => {
  form.value.tarin = (1 - Number(value)).toFixed(1);
};

const rules = {
  fileName: {
    required: true,
    message: "请输入文件名称",
    trigger: "blur",
  },
};

defineExpose({ onOpen, onClose });

const loading = ref(false);

// 提交
const onSubmit = async (type: string) => {
  await formRef.value.validate();
  const params = {
    batch_ids: form.value.batchIds,
    type: type,
    name: form.value.fileName,
    description: form.value.description,
    // test_ratio: form.value.test,
    // file_format: "csv",
  };
  const res = await props.api.getExportFileUrl(params);
  if (res.status == 200) {
    message.success("导出成功");
    emits("onSuccess");
    // const blob = await res.blob();
    // const url = window.URL.createObjectURL(blob);
    // const fileName = form.value.fileName || form.value.batchIds.join(",");
    // const type = "数据集";
    // downloadFile(url, `${fileName}${type}`);
  }
};
</script>

<template>
  <Modal v-model:open="open" title="导出数据" width="700px" style="top: 200px" :loading="loading">
    <Form layout="vertical" :model="form" ref="formRef" :rules="rules">
      <Row :gutter="[20, 0]">
        <!-- <Col :span="24"> 选择训练集和测试集配比 </Col>
        <Col :span="24">
          <Space>
            <div class="grid-box grey-text">训练集</div>
            <div class="grid-box">
              <FormItem label="" name="tarin">
                <InputNumber
                  v-model:value="form.tarin"
                  :step="0.1"
                  :max="1"
                  :min="0"
                  @change="onTrainChange"
                />
              </FormItem>
            </div>
            <div class="grid-box">：</div>
            <div class="grid-box">
              <FormItem label="" name="test">
                <InputNumber
                  v-model:value="form.test"
                  :step="0.1"
                  :max="1"
                  :min="0"
                  @change="onTestChange"
                />
              </FormItem>
            </div>
            <div class="grid-box grey-text">测试集</div>
          </Space>
        </Col> -->
        <Col :span="24">
          <FormItem label="数据集名称" name="fileName">
            <Input v-model:value="form.fileName" placeholder="请输入" style="width: 400px" />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="数据集描述" name="description">
            <Input v-model:value="form.description" placeholder="请输入" style="width: 400px" />
          </FormItem>
        </Col>
      </Row>
    </Form>
    <template #footer>
      <div class="export-footer">
        <Space>
          <Button type="primary" @click="onSubmit('train')">导出训练集</Button>
          <!-- <Button type="primary" @click="onExportTest">导出测试集</Button> -->
          <Button type="primary" @click="onSubmit('test')">导出测试集</Button>
        </Space>
      </div>
    </template>
  </Modal>
</template>

<style scoped lang="scss">
.grid-box {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  :deep(.ant-form-item) {
    margin-bottom: 0;
  }
}
.grey-text {
  color: #8c8c8c;
}
.export-footer {
  // margin-top: 20px;
  // border-top: 1px solid #d0d0d0;
  padding: 12px 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}
</style>
