<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.deviceCode" readonly
                                label="控制器编号" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.deviceName" readonly
                                label="控制器名称" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined label="设备编码" readonly
                                v-model.trim="addOrEditFormData.equipmentCode" ref="equipmentCodeRef" :rules="[
                                    (val) => (val !== null && val !== '' && val != undefined) || '请选择设备编码',
                                ]">
                                <template v-slot:append>
                                    <q-btn icon="search" round flat color="primary" @click="equipmentClick">
                                        <q-tooltip>选择设备</q-tooltip>
                                    </q-btn>
                                </template>
                            </q-input>

                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.equipmentName" readonly
                                label="设备名称" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.equipmentType" readonly
                                label="设备类型" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-select class="text-h6" outlined v-model="addOrEditFormData.actionType"
                                :options="actionTypeList" emit-value map-options 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.pointCode" 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.pointName" 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.address" 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.dataType" 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.objectValue" readonly
                                label="当前值" />
                        </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="PLC点位是否启用" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.remark" label="备注" />
                        </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>
    <!-- 设备选择 -->
    <equipmentDialog ref="selectEquipmentRef" @returnEquipment="returnEquipment" />
</template>
<script lang="ts" setup>
import { deviceApi } from 'src/api/device/deviceApi';
import { DeivcePointEntity } from 'src/api/device/model/device';
import { ref } from 'vue';
import equipmentDialog from './equipmentDialog.vue'

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

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

const actionTypeList = ref([
    { label: '启动停止', value: 'StartStop' },
    { label: '故障', value: 'Fault' }
])

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

const addOrEditFormData = ref(new DeivcePointEntity());
const clickForm = (e?: any) => {
    if (e.id) {
        //获取class 添加弹窗文本（新增/编辑）
        addOrEditFormData.value = JSON.parse(JSON.stringify(e)); // 改为深拷贝;
        addOrEditFormTitle.value = '修改PLC点位';
    } else {
        addOrEditFormData.value = new DeivcePointEntity();
        addOrEditFormTitle.value = '新增PLC点位';
        addOrEditFormData.value.deviceId = e.id;
        addOrEditFormData.value.deviceCode = e.deviceCode
        addOrEditFormData.value.deviceName = e.deviceName
        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) {
                deviceApi.updateDevicePoint(addOrEditFormData.value).then(() => {
                    visible.value = false;
                    emit('refresh');
                });
            } else {
                deviceApi.addDevicePoint(addOrEditFormData.value).then(() => {
                    visible.value = false;
                    emit('refresh');
                });
            }
        }
    });
};

const selectEquipmentRef = ref();
const equipmentClick = () => {
    selectEquipmentRef.value.clickForm();
}

// 接收返回选择的设备并赋值
const returnEquipment = (row: any) => {
    addOrEditFormData.value.equipmentId = row.id
    addOrEditFormData.value.equipmentCode = row.equipmentCode
    addOrEditFormData.value.equipmentName = row.equipmentName
    addOrEditFormData.value.equipmentType = row.equipmentType
}


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