<!-- 
** 修改油枪信息
-->

<template>
    <el-dialog :title=title v-model="isDisplay.isShowDialog" class="main-content" width="769px">
        <el-form :model="dataList" v-loading="isDisplay.loading" ref="ruleFormRef" label-width="6em" :rules="editOilGunRules">
            <el-row :gutter="35">
                <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="油罐号" prop="tankNum">
                        <el-input v-model="dataList.tankNum" disabled placeholder="请输入油罐号" clearable />
                    </el-form-item>
                </el-col> -->
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="加油点" prop="fuelPoint">
                        <el-input v-model="dataList.fuelPoint" placeholder="请输入加油点" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="内部枪号" prop="internalNum">
                        <el-input v-model="dataList.internalNum" placeholder="请输入内部油枪号" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="油枪号" :required="true" prop="nozzleNum">
                        <el-input v-model="dataList.nozzleNum" placeholder="请输入油枪号" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" 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 } from 'vue';
import { uploadNozzleInfo, getNozzleInfo } from '/@/api/api'
import { editOilGunRules } from '/@/api/FormValidation'
import eventBus from "/@/utils/mitt";

const isDisplay = reactive({
    isShowDialog: false,
    loading: false
})
let title = ref('')


let dataList = reactive({
    id: null,
    /** 油枪号 */
    nozzleNum: null,
    /** 油机主板连接FCC端口 */
    port: null,
    /** 加油点 */
    fuelPoint: null,
    /** 内部油枪号 */
    internalNum: null,
    /** 关联油罐id */
    tankId: null as any,
    /** 关联油罐号 */
    tankNum: null
})
// 创建表单实例
const ruleFormRef = ref()
// 添加油枪数据
const submit = async () => {
    ruleFormRef.value.validate(async (valid: boolean) => {
        // 表单验证不成功，不进行任何操作
        if (!valid) return

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

const openDialog = async (data: any) => {
    if (data.flag == 0) {
        title.value = '新增油枪'
        dataList.id = null
        dataList.port = null
        dataList.nozzleNum = null
        dataList.fuelPoint = null
        dataList.internalNum = null
        dataList.tankId = data.id
        dataList.tankNum = data.number
    } else {
        title.value = '编辑油枪'
        await getNozzleInfo({ 'id': data.nozzleId }).then((res: any) => {
            console.log(res)
            dataList.id = res.id
            dataList.nozzleNum = res.nozzleNum
            dataList.port = res.port
            dataList.fuelPoint = res.fuelPoint
            dataList.internalNum = res.internalNum
            dataList.tankId = res.tankId
            dataList.tankNum = data.number
        })
    }
    isDisplay.isShowDialog = true
}
defineExpose({
    openDialog,
})
</script>

<style lang="scss"></style>