<template>
    <el-dialog title="新增" append-to-body :modelValue="openShow" width="70%" @close="closeDialog">

        <div style="margin-bottom: 12px;">
            <el-button type="primary" @click="addTable">插入一行</el-button>
            <!-- <el-button type="danger" @click="delTable">删除行</el-button> -->
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="categoryText" label="类别" align="center">
                <template #header>
                    <span><i style="color:red">*</i>类别</span>
                </template>
                <template #default="scope">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option label="类别一" value="1">
                        </el-option>
                        <el-option label="类别二" value="2">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="days" label="天数" align="center">
                <template #header>
                    <span><i style="color:red">*</i>天数</span>
                </template>
                <template #default="scope">
                    <el-input-number v-model="scope.row.days" controls-position="right" @change="handleChange"
                        :min="1"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="colorText" label="颜色" align="center">
                <template #header>
                    <span><i style="color:red">*</i>颜色</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.colorText" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
                <template #default="scope">
                    <el-button @click.native.prevent="delTable(scope.row, scope.$index)" type="text" size="small">
                        删除
                    </el-button>
                </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
        },
        moldAddMore: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            openShow: false,
            tableData: []
        }
    },
    mounted() {
        this.openShow = this.showDialog
    },
    methods: {
        closeDialog() {
            this.openShow = false
            this.$emit('closeDialog');
        },
        // 插入一行
        addTable() {
            this.tableData.push({
                code: '3',
                No: '3',
                number: '3',
                shuliang: '',
                shuliang: 0,
                memo: ''

            })
        },
        // 删除一行
        delTable(row, index) {
            this.tableData.splice(index, 1)
        },
    }
}
</script>
<style lang="scss" scoped></style>