<!-- 
** 编辑设备 - 油罐
-->
<template>
    <el-dialog title="编辑油罐" v-model="isDisplay.isShowDialog" width="769px" class="main-content">
        <el-form :model="dataList" ref="ruleFormRef" label-width="5em" :rules="addDeviceRules">
            <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="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" />
                    </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 { getDetailsTankInfo, updateTankInfo } from "/@/api/api"
import { addDeviceRules } 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({
    /** 油站 */
    id: 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 updateTankInfo(dataList).then((res) => {
            console.log(res)
            isDisplay.loading = false

            if (res?.result) {
                eventBus.emit('refreshView')
                isDisplay.isShowDialog = false
            }
        })
    })
}


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

const openDialog = (data: any) => {
    dataList.id = data.id
    dataList.number = data.number
    dataList.oilId = data.associatedOilId
    dataList.oilName = data.associatedOilName
    dataList.capacity = data.capacity
    isDisplay.isShowDialog = true
}
defineExpose({
    openDialog,
})
</script>

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