<template>
    <div>
        <el-button
            v-show="value[lable[0]].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 listLength"
            :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-col>
            </div>

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

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


<formList v-model="data"></formList>
data: {
    时间: [1,2,33],
    值: [1,2,3,4,5]
},

事件
*/
export default {
    name: "formList",
    data() {
        return {};
    },
    computed: {
        lable() {
            return Object.keys(this.value) || ["key", "value"];
        },
        listLength() {
            let kL = this.value[this.lable[0]].length;
            let vL = this.value[this.lable[1]].length;
            let arr = [];
            if (kL < vL) {
                arr[vL - 1] = undefined;
            } else {
                arr[kL - 1] = undefined;
            }
            return arr;
        }
    },
    props: {
        value: undefined,
        title: {
            type: Array,
            default() {
                return Object.keys(this.value);
            }
        },
        titleWidth: {
            type: String,
            default: "100px"
        },
        inputWidth: {
            type: String,
            default: "200px"
        }
    },
    created() {},
    mounted() {},
    methods: {
        minus() {
            // 保证数组长度一致
            let keyArr = this.value[this.lable[0]];
            keyArr.pop();
        },
        plus() {
            let keyArr = this.value[this.lable[0]];
            keyArr.push("");
        }
    }
};
</script>

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