<template>
  <a-row style="margin-bottom: 20px;" justify="space-between">
    <a-col>
      <a-upload name="file" :multiple="false" :before-upload="beforeUpload" :show-upload-list="false"
        :customRequest="uploadFile">
        <a-button type="primary">
          上传航线
        </a-button>
      </a-upload>
    </a-col>
    <a-col>
      <a-form ref="formRef" layout="inline" :model="formModel" :colon="false">
        <a-form-item name="template_type">
          <a-select style="width: 200px;" placeholder="航线类型" v-model:value="formModel.template_type">
            <a-select-option :value="0">
              航点航线
            </a-select-option>
            <a-select-option :value="1">
              二维正射
            </a-select-option>
            <a-select-option :value="2">
              倾斜摄影
            </a-select-option>
            <a-select-option :value="3">
              带状航线
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="key">
          <a-input style="width: 200px;" placeholder="航线名称" v-model:value="formModel.key" />
        </a-form-item>
        <a-form-item>
          <a-button style="margin-right: 10px;" @click="handleClickSearch">
            <template #icon>
              <SearchOutlined />
            </template>
          </a-button>
          <a-button @click="handleClickReset">
            <template #icon>
              <ReloadOutlined />
            </template>
          </a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';

interface Props {
  importWayline: (data: FormData) => Promise<any>,
  onClickSearch: (query: any) => Promise<any>,
  onClickReset: (query: any) => Promise<any>,
};

const props = withDefaults(defineProps<Props>(), {

});

const formRef = ref();

const formModel = reactive({
  template_type: undefined,
  key: undefined,
})

interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
}

interface State {
  buttonLoading: boolean,
  fileList: FileItem[];
}

const state: State = reactive({
  buttonLoading: false,
  fileList: []
})

const beforeUpload = (file: FileItem) => {
  state.fileList = [file];
  state.buttonLoading = true;
  return true
}

const uploadFile = async () => {
  state.fileList.forEach(async (file: any) => {
    const fileData = new FormData();
    fileData.append('file', file, file.name);
    try {
      await props.importWayline(fileData);
    } catch (error) {
      console.error(error);
    } finally {
      state.buttonLoading = false;
      state.fileList = [];
    }
  })
}

// 点击查询
const handleClickSearch = async () => {
  const values = formRef.value?.getFieldsValue();
  await props.onClickSearch(values);
}

// 点击重置
const handleClickReset = async () => {
  formRef.value?.resetFields();
  const values = formRef.value?.getFieldsValue();
  await props.onClickReset(values);
}
</script>

<style lang="scss" scoped></style>