<template>
    <pro-search
        class="device-running-search"
        :columns="columns"
        target="device-instance-running-events"
        @search="handleSearch"
    />
    <JProTable
        ref="eventsRef"
        :columns="columns"
        :request="_getEventList"
        model="TABLE"
        :params="params"
        :bodyStyle="{ padding: '0 0 0 24px' }"
    >
        <template  v-for="i in objectKey" #[i.key]='slotProps'>
            <Ellipsis >
                <span @click="detail(slotProps[i.dataIndex])">{{  JSON.stringify(slotProps[i.dataIndex])}}</span>
            </Ellipsis>
        </template>
        <template #timestamp="slotProps">
            {{ dayjs(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template #action="slotProps">
            <j-button type="link" @click="detail(slotProps)">
                <AIcon type="SearchOutlined" />
            </j-button>
        </template>
    </JProTable>
    <j-modal
        :width="600"
        v-model:visible="visible"
        title="详情"
        class="device-running-event-modal"
    >
        <JsonViewer
            :value="info"
            style="max-height: calc(100vh - 400px); overflow: auto"
        />
        <template #footer>
            <j-button type="primary" @click="visible = false">关闭</j-button>
        </template>
    </j-modal>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { getEventList } from '@/api/device/instance';
import { useInstanceStore } from '@/store/instance';
import JsonViewer from 'vue-json-viewer';
import { cloneDeep } from 'lodash-es';

const events = defineProps({
    data: {
        type: Object,
        default: () => {},
    },
});
const instanceStore = useInstanceStore();

const defaultColumns = [
    {
        title: '时间',
        dataIndex: 'timestamp',
        key: 'timestamp',
        scopedSlots: true,
        search: {
            type: 'date',
        },
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        scopedSlots: true,
    },
];

const columns = ref<Array<Record<string, any>>>([...defaultColumns]);
const params = ref<Record<string, any>>({});
const visible = ref<boolean>(false);
const info = ref<Record<string, any>>({});
const objectKey = ref<Array>([]);

const _getEventList = (_params: any) =>
    getEventList(instanceStore.current.id || '', events.data.id || '', _params);

watchEffect(() => {
    columns.value = [...defaultColumns];
    if (events.data?.valueType?.type === 'object') {
        const eventProperties = cloneDeep(events.data.valueType?.properties || [])
        eventProperties.reverse().map((i: any) => {
            if (i.valueType?.type === 'object') {
                objectKey.value.push({
                    key:i.id,
                    dataIndex: `${i.id}_format`
                });
                columns.value.splice(0, 0, {
                    key: i.id,
                    title: i.name,
                    dataIndex: `${i.id}_format`,
                    search: {
                        type: i?.valueType?.type || 'string',
                        rename: i.id,
                    },
                    scopedSlots: true,
                });
            } else {
                columns.value.splice(0, 0, {
                    key: i.id,
                    title: i.name,
                    dataIndex: `${i.id}_format`,
                    search: {
                        type: i?.valueType?.type || 'string',
                        rename: i.id,
                    },
                    ellipsis: true,
                    scopedSlots: true,
                });
            }
        });
    } else {
        columns.value.splice(0, 0, {
            title: '数据',
            dataIndex: 'value',
        });
    }
});

const handleSearch = (_params: any) => {
    params.value = _params;
};

const detail = (_info: any) => {
    info.value = _info;
    visible.value = true;
    // Modal.info({
    //     title: () => '详情',
    //     width: 850,
    //     content: () => h('JsonViewer', {
    //         'expand-depth': 5,
    //         value: _info
    //     }),
    //     okText: '关闭',
    // });
};
</script>

<style lang="less">
.device-running-search {
    margin: 0 0 24px 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.device-running-event-modal {
    .ant-modal-body {
        padding: 0 20px;
    }
}
</style>
