<template>
    <el-dialog title="含量检测" append-to-body :modelValue="openShow" width="40%" @close="closeDialog">

        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="90">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="作业中心" prop="zuoyezhongxin">
                        <el-select v-model="ruleForm.zuoyezhongxin" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="化验时间" prop="huayanshijian">
                        <el-date-picker v-model="value1" type="date" placeholder="请选择" />
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180" />
            <el-table-column prop="name" label="作业槽" width="180" />
            <el-table-column prop="address" label="测量值">
                <template #header>
                    <span><i style="color:red">*</i>测量值</span>
                </template>
                <template #default="scope">
                    <el-input-number v-model="scope.row.address"    controls-position="right"
                        @change="handleChange" />
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            openShow: false,
            ruleForm: {
                huayanshijian: '',
                zuoyezhongxin: ''
            },
            rules: {
                huayanshijian: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                zuoyezhongxin: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ]
            },
            options: [
                {
                    label: '作业中心一',
                    value: '1'
                },
                {
                    label: '作业中心二',
                    value: '2'
                },
            ],
            tableData: [
                { address: null, name: '#16' },
                 { address: null, name: '#15' },
                  { address: null, name: '#14' },

                   { address: null, name: '#13' },
                    { address: null, name: '#12' }
            ]
        }
    },
    mounted() {
        this.openShow = this.showDialog
    },
    methods: {
        closeDialog() {
            this.openShow = false
            this.$emit('closeDialog');
        }
    }
}
</script>
<style lang="scss" scoped></style>