<template>
    <Modal
        :maskClosable="false"
        width="800px"
        :visible="true"
        title="导入"
        @cancel="handleCancel"
    >
        <div style="margin-top: 10px">
            <Form :layout="'vertical'">
                <Row>
                    <Col span="24">
                        <FormItem label="产品" required>
                            <Select
                                showSearch
                                v-model:value="modelRef.product"
                                placeholder="请选择产品"
                            >
                                <SelectOption
                                    :value="item.id"
                                    v-for="item in productList"
                                    :key="item.id"
                                    :label="item.name"
                                    >{{ item.name }}</SelectOption
                                >
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="文件格式" v-if="modelRef.product">
                            <FileFormat v-model="modelRef.file" />
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="文件上传" v-if="modelRef.product">
                            <NormalUpload
                                :product="modelRef.product"
                                v-model="modelRef.upload"
                                :file="modelRef.file"
                            />
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </div>
        <template #footer>
            <Button type="primary" @click="handleSave">关闭</Button>
        </template>
    </Modal>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { queryNoPagingPost } from '../../../../api/device/product';
// @ts-ignore
import { Button, Modal, Row, Col, Form, FormItem, Select, SelectOption } from 'linker-ui-components';

const emit = defineEmits(['close', 'save']);
const props = defineProps({
    data: {
        type: Object,
        default: undefined,
    },
    type: String,
});
const productList = ref<Record<string, any>[]>([]);

const modelRef = reactive({
    product: undefined,
    upload: [],
    file: {
        fileType: 'xlsx',
        autoDeploy: false,
    },
});

watch(
    () => props.data,
    () => {
        queryNoPagingPost({
            paging: false,
            terms: [
                {
                    column: 'state',
                    value: '1',
                    type: 'and'
                },
                {
                    column: 'accessProvider',
                    value: props?.type
                }
            ],
            sorts: [{ name: 'createTime', order: 'desc' }]
        }).then((resp) => {
            if (resp.code === 200) {
                productList.value = resp.result as Record<string, any>[];
            }
        });
    },
    { immediate: true, deep: true },
);

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

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