<template>
  <Modal
    :centered="true"
    :maskClosable="false"
    width="800px"
    :visible="true"
    title="导出"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div style="background-color: rgb(236, 237, 238)">
      <p style="padding: 10px">
        <AIcon type="ExclamationCircleOutlined" />
        选择单个产品时可导出其下属设备的详细数据,不选择产品时导出所有设备的基础数据。
      </p>
    </div>
    <div style="margin-top: 20px">
      <Form :layout="'vertical'">
        <FormItem label="产品">
          <Select
            show-search
            :filter-option="filterOption"
            v-model:value="modelRef.product"
            placeholder="请选择产品"
            allowClear
          >
            <SelectOption :value="item.id" v-for="item in productList" :key="item.id" :label="item.name">
              {{ item.name }}
            </SelectOption>
          </Select>
        </FormItem>
        <FormItem label="文件格式">
          <RadioGroup button-style="solid" v-model:value="modelRef.fileType" placeholder="请选择文件格式">
            <RadioButton value="xlsx">xlsx</RadioButton>
            <RadioButton value="csv">csv</RadioButton>
          </RadioGroup>
        </FormItem>
      </Form>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch, computed } from 'vue';
  import { queryNoPagingPost } from '../../../../api/device/product';
  import { downloadFileByUrl } from '@jdlinker/utils';
  import { encodeQuery } from '@jdlinker/utils';
  import { deviceExport } from '../../../../api/device/instance';
  // @ts-ignore
  import { Modal, AIcon, Form, FormItem, Select, SelectOption, RadioGroup, RadioButton } from 'linker-ui-components';

  const emit = defineEmits(['close']);
  const props = defineProps({
    data: {
      type: Object,
      default: undefined
    }
  });
  const modelRef = reactive({
    product: undefined,
    fileType: 'xlsx'
  });

  const filterOption = (input: string, option: any) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };

  const productList = ref<Record<string, any>[]>([]);

  watch(
    () => props.data,
    () => {
      queryNoPagingPost({ paging: false }).then((resp) => {
        if (resp.code === 200) {
          productList.value = resp.result as Record<string, any>[];
        }
      });
    },
    { immediate: true, deep: true }
  );
  const productName = computed(() => {
    return productList.value.find((item) => item.id === modelRef.product)?.name || '';
  });

  const handleOk = async () => {
    const params = encodeQuery(props.data);
    // downloadFile(
    //     deviceExport(modelRef.product || '', modelRef.fileType),
    //     params,
    // );
    const res: any = await deviceExport(modelRef.product || '', modelRef.fileType, params);
    if (res) {
      const blob = new Blob([res], { type: modelRef.fileType });
      const url = URL.createObjectURL(blob);
      downloadFileByUrl(url, `${productName.value ? productName.value + '下设备' : '设备实例'}`, modelRef.fileType);
      emit('close');
    }
  };

  const handleCancel = () => {
    emit('close');
  };
</script>
