<template>
    <Modal title="表头配置"
        :value="true"
        :closable="false"
        :mask-closable="false">
        <Form label-position="right"
            :label-width="60"
            ref="currForm"
            :model="curData"
            :rules="rule">
            <FormItem label="名称"
                prop="name">
                <Input v-model="curData.name"></Input>
            </FormItem>
            <FormItem label="子项目">
                <div v-for="(child, index) in curData.children"
                    style="display:flex;align-items: center;">
                    <Input v-model="child.name"
                        placeholder="子项目名称"
                        style="flex:1;margin-right: 6px;margin-bottom:6px;"></Input>
                    <Icon type="md-close"
                        size="16"
                        color="#f00"
                        @click.native="delChild(index)"></Icon>
                </div>
                <Button icon="md-add"
                    type="dashed"
                    @click="addChild"
                    class="my-btn">添加子项目</Button>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button size="large"
                @click="onCancel">取消</Button>
            <Button type="primary"
                size="large"
                @click="onOK">确定</Button>
        </div>
    </Modal>
</template>
<script>
export default {
    name: 'CapacityHeader',
    data() {
        return {
            curData: this.header,
            rule: {
                name: {
                    required: true,
                    message: '必须输入项目名称,长度4位以上',
                    min: 4,
                    trigger: 'blur'
                }
            }
        }
    },
    props: {
        header: {
            type: Object
        }
    },
    computed: {},
    components: {},
    methods: {
        delChild(index) {
            this.curData.children.splice(index, 1)
        },
        addChild() {
            if (!this.curData.children) {
                this.curData.children = []
            }
            this.curData.children.push({})
        },
        onCancel() {
            this.remove();
        },
        onOK() {
            this.$refs['currForm'].validate((valid) => {
                if (valid) {
                    this.remove();
                    this.onOkCb && this.onOkCb(this.curData)
                }
            })
        },
        remove() {
            setTimeout(() => {
                this.destroy();
            }, 300);
        },
        destroy() {
            this.$destroy();
            document.body.removeChild(this.$el);
        }
    }
};
</script>
<style>
</style>