<!-- 
** 编辑油品
-->
<template>
    <el-dialog :title=isDisplay.title v-model="isDisplay.isShowDialog" width="769px" class="main-content">
        <el-form :model="dataList" v-loading="isDisplay.loading" ref="ruleFormRef" label-width="5em" :rules="editOilRules">
            <el-row :gutter="35">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" 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="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="油品码" prop="code">
                        <el-input v-model="dataList.code" 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="price">
                        <el-input v-model="dataList.price" 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 } from 'vue';
import { uploadOilInfo } from "/@/api/api"
import { editOilRules } from '/@/api/FormValidation'
import eventBus from "/@/utils/mitt";


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

// 定义 所需添加数据
let dataList = ref({
    /** 油品码 */
    code: '',
    /** 油品名 */
    name: '',
    /** 单价 */
    price: null
})

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

        isDisplay.loading = true
        uploadOilInfo(dataList.value).then((res) => {
            console.log(res)
            isDisplay.loading = false
            eventBus.emit('refreshView')
            isDisplay.isShowDialog = false
        })
    })
}

const openDialog = (val: any) => {
    isDisplay.isShowDialog = true
    if (val) {
        isDisplay.title = '编辑油品'
        dataList.value = val
    } else {
        dataList.value = {
            code: '',
            name: '',
            price: null
        }
        isDisplay.title = '新增油品'
    }
}
defineExpose({
    openDialog,
})
</script>

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