<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"
        >
            <el-col :style="{width: lableWidth}" class="label">{{ lable[0] }}：</el-col>
            <el-col :style="{width: inputWidth}">
                <el-input v-model="value[lable[0]][index]"></el-input>
            </el-col>
            <el-col :style="{width: lableWidth}" class="label">{{ lable[1] }}：</el-col>
            <el-col :style="{width: inputWidth}">
                <el-input v-model="value[lable[1]][index]"></el-input>
            </el-col>
            <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 字段可自定义
lableWidth lable的宽 统一设置 默认值100px
inputWidth input的宽 统一设置 默认值200px

事件
*/
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,
        lableWidth: {
            type: String,
            default: "100px"
        },
        inputWidth: {
            type: String,
            default: "200px"
        }
    },
    created() {},
    methods: {
        minus() {
            // 保证数组长度一致
            let keyArr = this.value[this.lable[0]];
            let valArr = this.value[this.lable[1]];
            if (keyArr.length > valArr.length) {
                valArr[keyArr.length - 1] = undefined;
            } else if (keyArr.length < valArr.length) {
                keyArr[valArr.length - 1] = undefined;
            }
            keyArr.pop();
            valArr.pop();
        },
        plus() {
            // 保证数组长度一致
            let keyArr = this.value[this.lable[0]];
            let valArr = this.value[this.lable[1]];
            if (keyArr.length > valArr.length) {
                valArr[keyArr.length - 1] = undefined;
            } else if (keyArr.length < valArr.length) {
                keyArr[valArr.length - 1] = undefined;
            }
            keyArr.push("");
            valArr.push("");
        }
    }
};
</script>

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