<template>
    <div id="app">
        <el-divider content-position="left">内容数据</el-divider>
        <div class="el-main">
            <p style="text-align: right; margin-bottom: 10px;">
                <el-button type="primary" icon="el-icon-plus" @click="addItem">添加</el-button>
            </p>
            <el-card v-for="item,index in data" :key="index" style="margin-bottom: 10px;">
                <el-form ref="form" :model="item" label-width="60px" :inline="true">
                    <el-form-item>
                        <span style="font-size: 22px; font-weight: 600">-{{ index + 1 }}-</span>
                    </el-form-item>
                    <el-form-item label="名字: ">
                        <el-input class="cascader-item" v-model="item.code" @change="save()"></el-input>
                    </el-form-item>
                    <el-form-item label="编码: ">
                        <el-input class="cascader-item" v-model="item.name" @change="save()"></el-input>
                    </el-form-item>
                    <el-form-item label="类型: ">
                        <el-select class="cascader-item" v-model="item.type" placeholder="请选择" @change="save()">
                            <el-option label="ID" value="id"></el-option>
                            <el-option label="Array" value="array" disabled></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="值: ">
                        <el-input class="cascader-item" v-model="item.value" @change="save()"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-popconfirm
                            confirm-button-text='好的'
                            cancel-button-text='再想想'
                            icon="el-icon-info"
                            icon-color="red"
                            title="删除后不可恢复，确定吗？"
                            @cancel="$message.info('已取消')"
                            @confirm="deleteItem(index)">
                            <el-button type="danger" slot="reference" icon="el-icon-delete">删除</el-button>
                        </el-popconfirm>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    components: {
        
    },
    data() {
        return {
            data: [
                // {name: "", code: "", type: "id", value: ""}
            ]
        };
    },
    async created() {
        this.initData()
    },
    methods: {
        // 保存数据
        save() {
            this.$setData(this.data)
        },

        // 获取数据
        async initData() {
            const data = await this.$getData()
            if (data) {
                this.data = data;
            }
        },

        // 删除Item
        deleteItem(index) {
            this.data.splice(index, 1);
            this.save();
            this.$message.success("已删除")
        },

        // 添加Item
        addItem() {
            this.data.push({name: "", code: "", type: "id", value: ""});
            this.save();
        },

        
    }
}
</script>

<style>
#app {}

.cascader-item {
    width: 120px;
}

</style>
