<template>
    <Modal
        :maskClosable="false"
        width="800px"
        :visible="true"
        :title="type === 'active' ? '启用' : '同步'"
    >
        <div style="margin: 10px 0px 20px 0px; padding-right: 10px;">
            <div v-if="flag">
                <div>{{ type === 'active' ? '正在启用全部设备' : '正在同步设备状态' }}</div>
                <Progress :percent="_percent" />
            </div>
            <div v-else>
                <p>{{ type === 'active' ? '启用' : '同步' }}成功：{{ count }}条</p>
                <p v-if="type === 'active'">启用失败：{{ errCount }}条<Tooltip title="实例信息页面中的配置项未完善"><AIcon style="margin-left: 5px" type="QuestionCircleOutlined" /></Tooltip></p>
            </div>
        </div>
        <template #footer>
            <Button v-if="!flag" type="primary" @click="handleCancel">完成</Button>
        </template>
    </Modal>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { getDeviceNumber } from '../../../../api/device/instance';
// @ts-ignore
import { Modal, Progress, Button, Tooltip, AIcon } from 'linker-ui-components';
// import { EventSourcePolyfill } from 'event-source-polyfill';

const emit = defineEmits(['close', 'save']);
const props = defineProps({
    api: {
        type: String,
        default: '',
    },
    type: {
        type: String,
        default: '',
    },
    data: {
        type: Object,
        default: () => []
    }
});

const count = ref<number>(0);
const total = ref<number>(0);
const flag = ref<boolean>(true);
const errCount = ref<number>(0);
const source = ref<Record<string, any>>({});

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

const _percent = computed(() => {
    return total.value ? ((errCount.value + count.value) / total.value * 100).toFixed(2) : 0
})

const getData = (api: string) => {
    flag.value = true;
    let dt = 0;
    let dt1 = 0;
    // const _source = new EventSourcePolyfill(api);
    // source.value = _source;
    // _source.onmessage = (e: any) => {
    //     const res = JSON.parse(e.data);
    //     switch (props.type) {
    //         case 'active':
    //             if (res.success) {
    //                 dt += res.total;
    //                 count.value = dt;
    //             } else {
    //                 dt1 += res.total;
    //                 errCount.value = dt1;
    //             }
    //             break;
    //         case 'sync':
    //             dt += res;
    //             count.value = dt;
    //             break;
    //         default:
    //             break;
    //     }
    //     if ((count.value + errCount.value) >= total.value) {
    //       setTimeout(() => {
    //         _source.close();
    //         flag.value = false;
    //       }, 500)
    //     }
    // };
    // _source.onerror = () => {
    //     _source.close();
    //     flag.value = false;
    // };
    // _source.onopen = () => {};
};

watch(
    () => props.api,
    (newValue) => {
        if (newValue) {
            getDeviceNumber(props.data).then(resp => {
                if(resp.code === 200){
                    total.value = resp.result
                    getData(newValue);
                }
            })
        }
    },
    { deep: true, immediate: true },
);
</script>
