<!-- 
** 新增设备 - 油罐
-->
<template>
    <el-dialog title="新增油罐" v-model="isDisplay.isShowDialog" class="main-content" width="769px">
        <el-form :model="dataList" ref="ruleFormRef" label-width="5em" :rules="addDeviceRules" size="default">
            <el-row :gutter="35">
                <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="油站ID" :required="true" prop="stationId">
                        <el-input v-model="dataList.stationId" disabled 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="油罐号" :required="true" @focus="getOil" prop="number">
                        <el-input v-model="dataList.number" 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="associatedOilName">
                        <el-select v-model="dataList.oilId" placeholder="请选择油品名" @change="getOil(dataList.oilId)">
                            <el-option v-for="(item) in data.NameList" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="罐容量" prop="capacity">
                        <el-input v-model="dataList.capacity" placeholder="罐容量" 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 { addTankInfo, getDetailsTankInfo } from "/@/api/api"
import { addDeviceRules } from '/@/api/FormValidation';
import eventBus from "/@/utils/mitt";



const isDisplay = reactive({
    isShowDialog: false,
    loading: false
})
const data = reactive({
    oilsList: <any>[],
    NameList: <any>[]
})

// 定义 所需添加数据
let dataList = reactive({
    /** 油站 */
    stationId: null,
    /** 油罐号 */
    number: null,
    /** 关联的油品id */
    oilId: '',
    /** 关联的油品名 */
    oilName: '',
    /** 罐容量 */
    capacity: ''
})

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

        isDisplay.loading = true
        await addTankInfo(dataList).then((res) => {
            console.log(res)
            isDisplay.loading = false
        })

        dataList.stationId = null
        dataList.number = null
        dataList.oilId = ''
        dataList.oilName = ''
        dataList.capacity = ''
        eventBus.emit('refreshViewDevice')
        isDisplay.isShowDialog = false
    })

}

onMounted(() => {
    getOil(-1)
})
// 获取油罐的详细信息
const getOil = ((id: any) => {
    if (id == -1) {
        getDetailsTankInfo({ 'id': id }).then((res: any) => {
            data.oilsList = res.relatableOils
            console.log(res)
            for (var i = 0; i < data.oilsList.length; i++) {
                data.NameList.push({ 'id': res.relatableOils[i].oilId, 'name': res.relatableOils[i].oilName })
            }
        })
    } else {
        // 获取 油品id对应的油品名
        for (var i = 0; i < data.oilsList.length; i++) {
            if (data.oilsList[i].oilId == id) {
                dataList.oilName = data.oilsList[i].oilName
            }
        }
    }
})

const openDialog = (id: any) => {
    dataList.stationId = id
    isDisplay.isShowDialog = true

}
defineExpose({
    openDialog,
})
</script>

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