<template>
    <Drawer ref="drawerRef" v-model="visible" :title="title" :onOk="submit" :colesAfter="colesAfter">
        <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
            <a-form-model-item label="设备编码" prop="equipmentId">
                <a-select v-model="form.equipmentId" :disabled="true" :options="options" />
            </a-form-model-item>
            <a-form-model-item label="事件类型" prop="eventType">
                <MySelect
                    v-model="form.eventType"
                    :request="getStaticDataApi"
                    :param="{ paramModule: 'oceanus_equipment_event', paramCode: 'event_type' }"
                    :disabled="isView"
                />
            </a-form-model-item>
            <a-form-model-item label="发生日期" prop="occurTime">
                <a-date-picker
                    v-model="form.occurTime"
                    style="width: 100%"
                    placeholder="Select date"
                    :disabled="isView"
                />
            </a-form-model-item>
            <a-form-model-item label="设备编码" prop="eventDescription">
                <a-textarea
                    :rows="4"
                    v-model="form.eventDescription"
                    style="width: 100%"
                    placeholder="Select date"
                    :disabled="isView"
                />
            </a-form-model-item>
        </a-form-model>
    </Drawer>
</template>

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

export default {
    components: { Drawer, MySelect },
    props: {
        dataInfo: {
            type: Object,
            default: () => ({}),
        },
        refresh: Function,
    },
    mixins: [FormMixin],
    watch: {
        dataInfo: {
            handler(val) {
                console.log(val);
                const { catalogName, equipmentId } = val;

                this.options = [{ value: equipmentId, label: catalogName, key: equipmentId }];
            },
            deep: true,
            immediate: true,
        },
    },
    data() {
        return {
            visible: false,
            form: {},
            rules: {
                equipmentId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                eventType: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                occurTime: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                eventDescription: [
                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
                ],
            },
            options: [],
            getStaticDataApi,
            Api,
        };
    },
    async mounted() {},
    methods: {
        open() {
            this.form = {};
            this.visible = true;
        },
        add() {
            const data = {
                ...this.form,
                occurTime: this.form.occurTime && this.form.occurTime.format('YYYY-MM-DD hh:mm:ss'),
            };
            return Api.addEquipmentsEvents(data);
        },
        edit() {
            const data = {
                ...this.form,
                occurTime: this.form.occurTime && this.form.occurTime.format('YYYY-MM-DD hh:mm:ss'),
            };
            return Api.updateEquipmentsEvents(data);
        },
        colesAfter() {
            this.refresh();
        },
    },
};
</script>
