<template>
    <a-popover v-model="visible" placement="leftTop" trigger="click" v-bind="$attrs">
        <template slot="content">
            <div :style="{ width: '400px' }">
                <a-form-model :model="form" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                    <a-form-model-item :style="{ marginBottom: 0 }" label="开始时间">
                        <a-date-picker
                            v-model="form.startTime"
                            style="width: 100%"
                            placeholder="Select date"
                        />
                    </a-form-model-item>
                    <a-form-model-item :style="{ marginBottom: 0 }" label="结束时间">
                        <a-date-picker v-model="form.endTime" style="width: 100%" placeholder="Select date" />
                    </a-form-model-item>
                    <a-form-model-item :style="{ marginBottom: 0 }" label="设备">
                        <a-tree-select
                            v-model="form.equipmentId"
                            style="width: 100%"
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            :tree-data="treeData"
                            placeholder="Please select"
                            treeDataSimpleMode
                            :load-data="onLoadData"
                        />
                    </a-form-model-item>
                    <a-form-model-item :style="{ marginBottom: 0 }" label="时间类型">
                        <MySelect
                            v-model="form.eventType"
                            :request="getStaticDataApi"
                            :param="{ paramModule: 'oceanus_equipment_event', paramCode: 'event_type' }"
                        />
                    </a-form-model-item>
                </a-form-model>
                <a-row>
                    <a-col :span="24" class="tw-text-right tw-mt-4">
                        <a-space>
                            <a-button type="default" @click="hide">取消</a-button>
                            <a-button type="default" @click="rest">重置</a-button>
                            <a-button type="primary" @click="submit">确定</a-button>
                        </a-space>
                    </a-col>
                </a-row>
            </div>
        </template>

        <slot name="btn">
            <a-button type="link">搜索</a-button>
        </slot>
    </a-popover>
</template>

<script>
import Api from '@/api/oceanus';
import { getStaticDataApi } from '@/api';
import MySelect from '@/components/MySelect/RequestSelect.vue';

export default {
    components: { MySelect },
    props: {
        dataInfo: {
            type: Object,
            default: () => ({}),
        },
    },
    watch: {
        dataInfo: {
            handler(val) {
                this.init(val);
            },
            deep: true,
            immediate: true,
        },
    },
    data() {
        return {
            Api,
            visible: false,
            form: {},
            treeData: [],
            getStaticDataApi,
        };
    },
    methods: {
        init(data) {
            const { catalogId, catalogName, equipmentId } = data;
            this.treeData = [{ value: equipmentId, id: catalogId, title: catalogName, pId: 0 }];
            this.form = {
                ...this.form,

                equipmentId,
            };
        },
        rest() {
            const { equipmentId } = this.dataInfo;
            this.form = {
                equipmentId,
            };
        },
        hide() {
            this.visible = false;
        },
        onLoadData(treeNode) {
            return new Promise((resolve) => {
                Api.getEquipmentsTree({ catalogId: treeNode.dataRef.id }).then((resp) => {
                    const newData = resp.map((i) => {
                        return {
                            value: i.catalogValue,
                            id: i.catalogId,
                            title: i.catalogName,
                            pId: i.parentCatalogId,
                        };
                    });
                    this.treeData = this.treeData.concat([...newData]);
                    resolve();
                });
            });
        },
        submit() {
            const data = {
                ...this.form,
                startTime: this.form.startTime && this.form.startTime.format('YYYY-MM-DD hh:mm:ss'),
                starendTimetTime: this.form.endTime && this.form.endTime.format('YYYY-MM-DD hh:mm:ss'),
            };
            this.$emit('submit', data);
            this.hide();
        },
    },
};
</script>
