<template>
    <q-dialog v-model="visible" persistent>
        <q-card class="shadow-24" style="max-width: 40vw">
            <q-card-section class="no-padding">
                <q-card-actions class="bg-light-blue-10 text-white">
                    <q-card-actions class="text-h6">{{ addOrEditFormTitle }}</q-card-actions>
                    <q-space />
                    <q-btn dense flat round icon="close" @click="visible = false">
                        <q-tooltip content-class="bg-amber text-black shadow-4">关闭</q-tooltip>
                    </q-btn>
                </q-card-actions>
            </q-card-section>
            <q-card-section style="max-width: 40vw" class="scroll">
                <q-form ref="myForm">
                    <div class="row q-col-gutter-md">
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.equipmentCode" label="设备编码"
                                :rules="[(val) => (val && val.length > 0) || '请填写设备编码']" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.equipmentName" label="设备名称"
                                :rules="[(val) => (val && val.length > 0) || '请填写设备名称']" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-select class="text-h6" outlined v-model="addOrEditFormData.equipmentType"
                                :options="equipmentTypeList" emit-value map-options label="设备类型"
                                :rules="[(val) => (val && val.length > 0) || '请选择设备类型']" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-select class="text-h6" outlined v-model="addOrEditFormData.activated"
                                :options="activatedList" emit-value map-options label="设备启停用" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-select class="text-h6" outlined v-model="addOrEditFormData.model" :options="modelList"
                                emit-value map-options label="模式" @update:model-value="modelUpdate" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12" v-show="isAlarmFlag">
                            <q-select class="text-h6" outlined v-model="addOrEditFormData.isAlarm" :options="[{ label: '是', value: true },
                            { label: '否', value: false }]" emit-value map-options label="是否报警" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" type="number" outlined v-model="addOrEditFormData.ordrNo" label="排序"
                                :rules="[(val) => (val != null && val != undefined && val != '') || '请填写排序']">
                                <template v-slot:append>
                                    <q-btn icon="info" round flat color="info" @click="cfgClick">
                                        <q-tooltip>查看排序配置规则</q-tooltip>
                                    </q-btn>
                                </template>
                            </q-input>
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-select class="text-h6" outlined v-model="addOrEditFormData.remark" :options="remarkList"
                                emit-value map-options label="所属涂层室"
                                :rules="[(val) => (val && val.length > 0) || '请选择所属涂层室']" bottom-slots>
                                <template v-slot:hint>
                                    <span class="text-red">TIPS : 用于配置设备放置的涂层室</span>
                                </template>
                            </q-select>
                        </div>
                    </div>
                </q-form>
            </q-card-section>
            <q-separator />
            <q-card-actions align="right">
                <q-btn color="white" text-color="black" style="margin-right: 25px" @click="visible = false">关闭</q-btn>
                <q-btn color="primary" @click="submitForm()">提交</q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>
    <cfgDialog ref="cfgRef" />
</template>
<script lang="ts" setup>
import { equipmentApi } from 'src/api/equipment/equipmentApi';
import { EquipmentEntity } from 'src/api/equipment/model/equipment';
import cfgDialog from './cfgDialog.vue';
import { ref } from 'vue';

// const props = defineProps<{
//   areaPropertyList: any[];
//   warehouseList: any[];
// }>();
const emit = defineEmits(['refresh']);

const isAlarmFlag = ref(false);

const equipmentTypeList = ref([
    { label: 'Ionbond', value: 'Ionbond' },
    { label: 'Balzers', value: 'Balzers' },
    { label: 'CemeCon', value: 'CemeCon' },
])

const activatedList = ref([
    { label: '启用', value: true },
    { label: '停用', value: false }
])

const remarkList = ref([
    { label: 'Ionbond', value: 'Ionbond' },
    { label: 'Balzers', value: 'Balzers' },
    { label: 'CemeCon', value: 'CemeCon' }
])

const modelList = ref([
    { label: '自动', value: 'Auto' },
    { label: '手动', value: 'Manual' }
]);

//新增或修改
const visible = ref(false);
const addOrEditFormTitle = ref('');

const addOrEditFormData = ref(new EquipmentEntity());
const clickForm = (e?: any) => {
    if (e) {
        //获取class 添加弹窗文本（新增/编辑）
        addOrEditFormData.value = JSON.parse(JSON.stringify(e)); // 改为深拷贝;
        addOrEditFormTitle.value = '修改设备';
        modelUpdate(addOrEditFormData.value.model);
    } else {
        addOrEditFormData.value = new EquipmentEntity();
        addOrEditFormTitle.value = '新增设备';
        addOrEditFormData.value.model = 'Auto';
        isAlarmFlag.value = false;
        addOrEditFormData.value.isAlarm = false;
        addOrEditFormData.value.activated = true;
    }
    visible.value = true;
};

const myForm = ref();
const submitForm = () => {
    myForm.value.validate().then((success: any) => {
        if (success) {
            if (addOrEditFormData.value.id !== undefined) {
                equipmentApi.edit(addOrEditFormData.value).then(() => {
                    visible.value = false;
                    emit('refresh');
                });
            } else {
                equipmentApi.add(addOrEditFormData.value).then(() => {
                    visible.value = false;
                    emit('refresh');
                });
            }
        }
    });
};

const cfgRef = ref();
const cfgClick = () => {
    cfgRef.value.clickForm();
}

const modelUpdate = (val: any) => {
    if (val == 'Manual') {
        isAlarmFlag.value = true;
    } else {
        isAlarmFlag.value = false;
        addOrEditFormData.value.isAlarm = false;
    }
}

defineExpose({
    clickForm,
});
</script>