<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" 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.deviceName" 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.host" label="控制器主机地址"
                                :rules="[(val) => (val && val.length > 0) || '请填写控制器主机地址']" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" type="number" outlined v-model="addOrEditFormData.port" label="控制器主机端口"
                                :rules="[(val) => (val != null && val != undefined && val != '') || '请填写控制器主机端口']" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-select class="text-h6" outlined v-model="addOrEditFormData.protocol" :options="protocolList"
                                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-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>
</template>
<script lang="ts" setup>
import { deviceApi } from 'src/api/device/deviceApi';
import { DeivceEntity } from 'src/api/device/model/device';
import { ref } from 'vue';

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

const protocolList = ref([
    { label: 'S7_1200', value: 'S7_1200' },
    { label: 'S7_300', value: 'S7_300' },
    { label: 'S7_400', value: 'S7_400' },
    { label: 'S7_1500', value: 'S7_1500' },
    { label: 'S7_200Smart', value: 'S7_200Smart' },
    { label: 'S7_200', value: 'S7_200' }
])

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

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

const addOrEditFormData = ref(new DeivceEntity());
const clickForm = (e?: any) => {
    if (e) {
        //获取class 添加弹窗文本（新增/编辑）
        addOrEditFormData.value = JSON.parse(JSON.stringify(e)); // 改为深拷贝;
        addOrEditFormTitle.value = '修改PLC控制器';
    } else {
        addOrEditFormData.value = new DeivceEntity();
        addOrEditFormTitle.value = '新增PLC控制器';
        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.updateDevice(addOrEditFormData.value).then(() => {
                    visible.value = false;
                    emit('refresh');
                });
            } else {
                deviceApi.addDevice(addOrEditFormData.value).then(() => {
                    visible.value = false;
                    emit('refresh');
                });
            }
        }
    });
};
defineExpose({
    clickForm,
});
</script>