<!-- 
** 修改油枪信息(油机页)
-->

<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="editOilGunForMachineRules">
            <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 v-if="dataInfos.flag == 1" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="云端油枪id" prop="cloundNozzleId">
                        <el-input v-model="dataList.cloundNozzleId" placeholder="请输入云端油枪id" 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="tankName">
                        <el-select v-model="dataList.tankId" placeholder="请选择绑定油罐" @change="getTank(dataList.tankId)">
                            <el-option v-for="(item) in dataInfos.tankDatas.value" :key="item.id" :label="getLable(item)"
                                :value="item.id" />
                        </el-select>
                    </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 { getTankInfo,uploadNozzleInfoForMachine, getNozzleInfo } from '/@/api/api'
import { editOilGunForMachineRules } from '/@/api/FormValidation'
import eventBus from "/@/utils/mitt";

const isDisplay = reactive({
    isShowDialog: false,
    loading: false
})
const dataInfos = reactive({
    /** 站点id */
    stationId:null,
    /** 操作：0：新增；1：编辑 */
    flag:0,
    /** 油罐列表 */
    tankDatas:[]
})
let title = ref('')


let dataList = reactive({
    /** 油枪id */
    id: null,
    /** 油枪号 */
    nozzleNum: null,
    /** 加油点 */
    fuelPoint: null,
    /** 内部油枪号 */
    internalNum: null,
    /** 关联油罐id */
    tankId: null as any,
    /** 关联油罐号 */
    tankNum: null,
    /** 关联的油机id */
    machineId:null,
    /** 关联的云端油枪id */
    cloundNozzleId:null
})
// 创建表单实例
const ruleFormRef = ref()

// 获取油罐信息
const getInfo = async () => {
    await getTankInfo({ 'id': dataInfos.stationId }).then((res) => {
        dataInfos.tankDatas.value = res
        console.log("获取到油罐信息",dataInfos.tankDatas.value)
    })
}

/** 拼接下拉框选项 */
const getLable = (row:any) => {
    return row.number + "号油罐(" + row.oilName + ")"
}
// 获取绑定的油罐信息 
const getTank = (tankId:number) => {
    const tankInfo = dataInfos.tankDatas.value.find(tank => tank.id == tankId)
    dataList.tankNum = tankInfo.number
}

// 添加油枪数据
const submit = async () => {
    ruleFormRef.value.validate(async (valid: boolean) => {
        // 表单验证不成功，不进行任何操作
        if (!valid) return

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

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

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