<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="equipmentCode">
                <a-input v-model="form.equipmentCode" :disabled="isView" />
            </a-form-model-item>
            <a-form-model-item label="设备名称" prop="equipmentName">
                <a-input v-model="form.equipmentName" :disabled="isView" />
            </a-form-model-item>
            <a-form-model-item label="类别" prop="categoryId">
                <a-tree-select :treeData="oceanusTreeList" v-model="form.categoryId" :disabled="type === 1" />
            </a-form-model-item>
            <a-form-model-item label="等级" prop="equipmentGrade">
                <Select v-model="form.equipmentGrade" :options="equipmentGradeList" :disabled="isView" />
            </a-form-model-item>
            <a-form-model-item label="安装日期" prop="installTime">
                <a-date-picker class="tw-w-full" v-model="form.installTime" :disabled="isView" />
            </a-form-model-item>
            <a-form-model-item label="运行日期" prop="runTime">
                <a-date-picker class="tw-w-full" v-model="form.runTime" :disabled="isView" />
            </a-form-model-item>
            <a-form-model-item label="供应商" prop="supplier">
                <a-input v-model="form.supplier" :disabled="isView" />
            </a-form-model-item>
            <a-form-model-item label="制造商" prop="manufacturer">
                <a-input v-model="form.manufacturer" :disabled="isView" />
            </a-form-model-item>
            <a-form-model-item label="专业" prop="specialtyCode">
                <Select v-model="form.specialtyCode" :options="specialtyCodeList" :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 Select from '@/components/MySelect/index.vue';
import { arrayToTree, formatObj } from '@/utils';

export default {
    components: { Drawer, Select },
    props: {
        refresh: Function,
    },
    mixins: [FormMixin],
    data() {
        return {
            visible: false,
            form: {},
            rules: {
                equipmentCode: [
                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
                ],
                equipmentName: [
                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
                ],
                categoryId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
            },
            equipmentGradeList: [],
            specialtyCodeList: [],
            oceanusTreeList: [],
            Api,
        };
    },
    async mounted() {
        const oceanusTreeList = await formatObj(await Api.getOceanusTree(), {
            label: 'categoryName',
            value: 'categoryId',
        });
        const newOceanusTreeList = new arrayToTree({
            data: oceanusTreeList,
            rootValue: -1,
            parentKey: 'parentCategoryId',
            key: 'categoryId',
        }).treeData;

        const equipmentGradeList = await getStaticDataApi({
            paramModule: 'oceanus_equipment',
            paramCode: 'equipment_grade',
        });

        const specialtyCodeList = await getStaticDataApi({
            paramModule: 'oceanus_equipment',
            paramCode: 'specialty_code',
        });
        this.oceanusTreeList = newOceanusTreeList;
        this.equipmentGradeList = equipmentGradeList;
        this.specialtyCodeList = specialtyCodeList;
    },
    methods: {
        open() {
            this.form = {};
            this.visible = true;
        },
        add() {
            const { parentCatalogId, catalogType, installTime, runTime, ...rest } = this.form;
            const data = {
                catalogForm: {
                    parentCatalogId,
                    catalogType,
                },
                equipmentForm: {
                    installTime: installTime && installTime.format('YYYY-MM-DD hh:mm:ss'),
                    runTime: runTime && runTime.format('YYYY-MM-DD hh:mm:ss'),
                    ...rest,
                },
            };
            return Api.addEquipmentsTree(data);
        },
        edit() {
            const { catalogId, catalogType, installTime, runTime, ...rest } = this.form;
            const data = {
                catalogForm: {
                    catalogId,
                    catalogType,
                },
                equipmentForm: {
                    installTime: installTime && installTime.format('YYYY-MM-DD hh:mm:ss'),
                    runTime: runTime && runTime.format('YYYY-MM-DD hh:mm:ss'),
                    ...rest,
                },
            };
            return Api.updateEquipmentsTree(data);
        },
        colesAfter() {
            const { catalogId, catalogType, installTime, runTime, ...rest } = this.form;
            const data = {
                catalogForm: {
                    catalogId,
                    catalogType,
                },
                equipmentForm: {
                    installTime: installTime && installTime.format('YYYY-MM-DD hh:mm:ss'),
                    runTime: runTime && runTime.format('YYYY-MM-DD hh:mm:ss'),
                    ...rest,
                },
            };
            this.refresh(this.type, data);
        },
    },
};
</script>
