<!-- 
** 编辑设备 - 油罐
-->
<template>
    <el-dialog title="编辑油机" v-model="isDisplay.isShowDialog" width="769px" class="main-content">
        <el-form :model="dataList" v-loading="isDisplay.loading" ref="ruleFormRef" label-width="5em" :rules="addMachineRules">
            <el-row :gutter="35">
                <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="油罐号" :required="true" @focus="getOil" prop="number">
                        <el-input v-model="dataList.number" />
                    </el-form-item>
                </el-col> -->
                <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10" class="mb20">
                    <el-form-item label="油机号" :required="true" prop="name">
                        <el-input v-model="dataList.name" placeholder="油机号" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="13" :md="13" :lg="13" :xl="13" class="mb20">
                    <el-form-item label="连接FCC端口" prop="port">
                        <el-input v-model="dataList.port" placeholder="连接FCC端口" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row justify="end" class="submit-button">
            <el-button type="primary" @click="submit">确定</el-button>
        </el-row>

    </el-dialog>
</template>
<script setup lang="ts">
import { ref, defineExpose, reactive, onMounted } from 'vue';
import { uploadMaichine,deleteMachine } from "/@/api/api"
import { addMachineRules } from '/@/api/FormValidation'
import eventBus from "/@/utils/mitt";

// 子 传数据给父
const emit = defineEmits(['getDialogData'])
const isDisplay = reactive({
    isShowDialog: false,
    loading: false
})
const data = reactive({
    oilsList: <any>[],
    NameList: <any>[]

})

// 定义 所需添加数据
let dataList = reactive({
    /** 油站 */
    stationId: null,
    /** 油机id */
    id: null,
    /** 油机号 */
    name: null,
    /** 连接FCC的端口 */
    port: null,
})

// 创建表单实例
const ruleFormRef = ref()
// 提交 油罐编辑信息
const submit = async () => {
    ruleFormRef.value.validate(async (valid: boolean) => {
        // 表单验证不成功，不进行任何操作
        if (!valid) return

        isDisplay.loading = true
        await uploadMaichine(dataList).then((res) => {
            console.log(res)
            isDisplay.loading = false
            eventBus.emit('refreshViewMachine')
            isDisplay.isShowDialog = false
        })
    })
}

const openDialog = (data: any) => {
    dataList.stationId = data.stationId
    dataList.id = data.id
    dataList.name = data.name
    dataList.port = data.port
    isDisplay.isShowDialog = true
}
defineExpose({
    openDialog,
})
</script>

<style lang="scss">
// @import url('@/theme/form.scss');</style>