<template>
    <div class="ht-base-form-dynamic-demo">
        <ht-base-form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
            <ht-base-form-item
                    v-for="(item, index) in formDynamic.items"
                    v-if="item.status"
                    :key="index"
                    :label="'条目 ' + item.index"
                    :prop="'items.' + index + '.value'"
                    :rules="{required: true, message: '条目 ' + item.index +' 不能为空', trigger: 'blur'}">
                <ht-base-row>
                    <ht-base-col span="18">
                        <ht-base-input type="text" v-model="item.value" placeholder="请输入"></ht-base-input>
                    </ht-base-col>
                    <ht-base-col span="4" offset="1">
                        <ht-base-icon @click="handleRemove(index)" type='LiRa_reduce'
                                      class="ht-base-form-dynamic-demo-reduce"></ht-base-icon>
                    </ht-base-col>
                </ht-base-row>
            </ht-base-form-item>

            <ht-base-form-item>
                <ht-base-row>
                    <ht-base-col span="18">
                        <ht-base-button type="dashed" long @click="handleAdd">+ 增加新条目</ht-base-button>
                    </ht-base-col>
                </ht-base-row>
            </ht-base-form-item>
            <ht-base-form-item>
                <ht-base-button type="primary" @click="handleSubmit('formDynamic')">提交</ht-base-button>
                <ht-base-button @click="handleReset('formDynamic')" style="margin-left: 8px">重置</ht-base-button>
            </ht-base-form-item>
        </ht-base-form>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseFormDynamicDemo',
        data() {
            return {
                index: 1,
                formDynamic: {
                    items: [
                        {
                            value: '',
                            index: 1,
                            status: 1
                        }
                    ]
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$HtBaseMessage.success('成功!');
                    } else {
                        this.$HtBaseMessage.error('失败!');
                    }
                })
            },
            handleAdd() {
                this.index++;
                this.formDynamic.items.push({
                    value: '',
                    index: this.index,
                    status: 1
                });
            },
            handleRemove(index) {
                this.formDynamic.items[index].status = 0;
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            },
        }
    }
</script>
<style lang="less">
    .ht-base-form-dynamic-demo {
        .ht-base-form-dynamic-demo-reduce {
            font-size: 20px;
            &:hover {
                color: #ed4014;
            }
        }
    }
</style>

