<template>
    <a-row :gutter="[16, 24]">
        <a-col :span="12">
            <a-button type="link" @click="onAdd">新增</a-button>
            <a-divider type="vertical" />
            <a-dropdown>
                <a-button type="link"> 记录数 <a-icon type="down" /> </a-button>
                <a-menu slot="overlay">
                    <a-menu-item>
                        <a @click="() => setPage(10)">10</a>
                    </a-menu-item>
                    <a-menu-item>
                        <a @click="() => setPage(20)">20</a>
                    </a-menu-item>
                    <a-menu-item>
                        <a @click="() => setPage(30)">30</a>
                    </a-menu-item>
                    <a-menu-item>
                        <a @click="() => setPage(50)">50</a>
                    </a-menu-item>
                    <a-menu-item>
                        <a @click="() => setPage(100)">100</a>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </a-col>
        <a-col :span="12" class="tw-text-right">
            <SearchPopover :dataInfo="dataInfo" title="事件过滤" @submit="onScreen" />
        </a-col>
        <a-col :span="24">
            <a-timeline mode="alternate">
                <a-timeline-item v-for="item in list" :key="item.eventId">
                    <div class="tw-font-bold tw-leading-4 tw-mb-2">
                        {{ item.equipmentName }} [{{ item.equipmentCode }}]
                    </div>
                    <a-space>
                        <a-icon
                            v-if="item.eventType === 'MAINTAIN'"
                            type="tool"
                            style="color: rgb(245, 158, 11)"
                        />
                        <a-icon v-else type="warning" style="color: rgb(190, 24, 93)" />
                        <div>{{ item.eventTypeName }}</div>
                        <div>{{ item.occurTime }}</div>
                    </a-space>
                    <div class="tw-mb-2 tw-mt-2">{{ item.eventDescription }}</div>
                    <a-space>
                        <a @click="() => onEdit(item)">编辑</a>
                        <PopconfirmDelete
                            :url="`/oceanus/api/v1/equipments/events/${item.eventId}`"
                            :cb="refresh"
                        />
                    </a-space>
                </a-timeline-item>
            </a-timeline>
        </a-col>
        <EventDrawer ref="EventDrawer" :dataInfo="dataInfo" :refresh="refresh" />
    </a-row>
</template>
<script>
import moment from 'moment';
import Api from '@/api/oceanus';
import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
import SearchPopover from './SearchPopover.vue';
import EventDrawer from './EventDrawer.vue';

export default {
    components: { SearchPopover, EventDrawer, PopconfirmDelete },
    props: {
        dataInfo: {
            type: Object,
            default: () => ({}),
        },
    },
    watch: {
        dataInfo: {
            handler(val) {
                const { equipmentId } = val;
                this.form = {
                    equipmentId,
                };
                this.size = 10;
            },
            deep: true,
            immediate: true,
        },
    },
    data() {
        return {
            Api,
            size: 10,
            form: {},
            list: [],
        };
    },
    mounted() {
        this.onSearch();
    },

    methods: {
        onScreen(data) {
            this.form = data;
            this.onSearch();
        },
        setPage(val) {
            this.size = val;
            this.onSearch();
        },

        onAdd() {
            const { equipmentId } = this.dataInfo;
            this.view({ equipmentId });
        },
        onEdit(row) {
            const data = {
                ...row,
                occurTime: row.occurTime && moment(row.occurTime, 'YYYY-MM-DD'),
            };
            delete data.eventTypeName;
            delete data.equipmentName;
            delete data.equipmentCode;
            this.view(data, 1);
        },
        async onSearch() {
            const data = {
                ...this.form,
                size: this.size,
            };

            const resp = await Api.getEquipmentsEvents(data);
            this.list = resp;
        },
        async view(data = {}, type = 0) {
            this.$refs['EventDrawer']?.open();
            this.$nextTick(() => {
                this.$refs['EventDrawer'].setData({ ...data }, type);
            });
        },
        refresh() {
            this.onSearch();
        },
    },
};
</script>
