<template>
    <div>
        <el-button
            v-show="value.length == 0"
            @click="plus"
            type="primary"
            icon="el-icon-plus"
            circle
        ></el-button>
        <el-row
            type="flex"
            :gutter="10"
            align="middle"
            v-for="(item, index) in value"
            :key="index"
            style="margin:15px"
        >
            <div v-for="(S_item, S_index) in title" :key="S_index" class="cell">
                <el-col :style="{width: titleWidth}" class="label">{{ title[S_index] || lable[S_index] }}：</el-col>
                <el-col :style="{width: inputWidth}">
                    <!-- <el-input v-model="value[lable[S_index]][index]"></el-input> -->
                    <el-input v-model="value[index][lable[S_index]]" :type="type" autosize></el-input>
                </el-col>
            </div>

            <el-col :style="{width: '120px'}">
                <el-button
                    v-show="value.length == index+1"
                    @click="plus(index)"
                    type="primary"
                    icon="el-icon-plus"
                    circle
                ></el-button>
                <el-button
                    v-show="value.length > 0"
                    @click="minus(index)"
                    icon="el-icon-minus"
                    circle
                ></el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
/* 
v-model  数据结构 [{key: [], val: []}]  key 和 val 字段可自定义
titleWidth String lable的宽 统一设置 默认值100px
inputWidth String input的宽 统一设置 默认值200px
title Array  设置输入框的标题 不设置默认取 v-model 对象的key
type String input 类型


<formList v-model="dataF" :title="['值','时间']"></formList>
dataF: [
    {key:'a', value: 1},
    {key:'a', value: 1},
    {key:'a', value: 1},
    {key:'a', value: 1}
]

事件
*/
export default {
    name: "formList",
    data() {
        return {};
    },
    computed: {
        lable() {
            return Object.keys(this.value[0]) || ["key", "value"];
        },
    },
    props: {
        value: undefined,
        title: {
            type: Array,
            default() {
                return Object.keys(this.value[0])
            }
        },
        titleWidth: {
            type: String,
            default: "100px"
        },
        inputWidth: {
            type: String,
            default: "200px"
        },
        type: {
            type: String,
            default: "text"
        }
    },
    created() {},
    methods: {
        minus(i) {
            // this.value.pop();
            this.value.splice(i,1);
        },
        plus(i) {
            this.value.push({});
        }
    }
};
</script>

<style lang="scss" scope>
.cell {
    display: flex;
    align-items: center;
    .label {
        text-align: right;
        color: #444;
    }
}
</style>
