
<template>
    <div class="form-container">
        <Form :model="formTop" label-position="top">
            <FormItem :label="$t('knowledge.block')" v-show="!hideBlock">
                <Input v-model="formTop.blockName" disabled />
            </FormItem>
            <FormItem :label="$t('knowledge.label')">
                <Input v-model="formTop.name" :placeholder="$t('knowledge.knowledgeP')" />
                <vuescroll>
                    <ul class="search-list" v-show="filterData.length > 0">
                        <li v-for="(list,index) in filterData">
                            <span>{{list}}</span>
                        </li>
                    </ul>
                </vuescroll>
            </FormItem>
            <FormItem>
                <Button @click="handleAddPointSubmit()" :loading="isLoading">{{$t("knowledge.confirm")}}</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
    import '@/utils/Math.uuid'
    export default {
        props: ['blockData', 'pointData', 'hideBlock', 'addType', 'schoolParams', 'orginPoint'],
        data() {
            return {
                blockDatas: null,
                currentPeriod: {},
                currentPoint: null,
                schoolInfos: {},
                addPointType: 'school',
                isHideBlock: false,
                isLoading: false,
                uuid: '',
                formTop: {
                    blockName: '',
                    name: ''
                },
                selectPoint:[]
            }
        },

        created() {
            this.isHideBlock = this.hideBlock
        },
        methods: {
            // 提交添加
            handleAddPointSubmit() {
                let newName = this.formTop.name
                if (!newName) {
                    this.$Message.warning(this.$t('knowledge.knowledgeWarning'))
                } else {
                    this.isLoading = true
                    let params = {
                        name: newName,
                    }
                    this.$emit('addFinish', params)
                    this.formTop =  {
                        blockName: '',
                            name: ''
                    }
                    this.isLoading = false
                    console.log(this.formTop)
                }
            },

            // 添加完成 关闭窗口
            closeModal() {
                this.formTop.name = ''
            }
        },
        mounted() {
        },
        computed: {
            filterData() {
                if (this.formTop.name !== "") {
                    return this.orginPoint.filter(item => item.indexOf(this.formTop.name) > -1)
                }
                return []
            }
        },
        watch: {
            addType: {
                handler(newValue, oldValue) {
                    if (newValue) {
                        this.addPointType = newValue
                    }
                }
            },

            hideBlock: {
                handler(newValue, oldValue) {
                    if (newValue) {
                        this.isHideBlock = newValue
                    }
                }
            },

            blockData: {
                handler(newValue, oldValue) {
                    this.blockDatas = newValue
                    if (newValue) {
                        this.formTop.blockName = newValue.name
                    }
                }
            },

            pointData: {
                handler(newValue, oldValue) {
                    if (newValue) {
                        this.currentPoint = newValue
                        this.formTop.name = newValue.name
                    }
                }
            },

            schoolParams: {
                handler(newValue, oldValue) {
                    if (newValue) {
                        this.schoolInfos = newValue
                    }
                }
            }
        }

    }
</script>

<style>
    .form-container .ivu-form .ivu-form-item-label {
        color: #fff;
        margin: 10px 0;
        font-size: 16px;
    }

    .form-container .ivu-input {
        background: #575757;
        border-color: transparent;
        height: 35px;
        color: #fff;
    }

        .form-container .ivu-input::-webkit-input-placeholder {
            color: #808080;
        }

    .form-container .ivu-select-single .ivu-select-selection {
        background: #575757;
        color: #fbfbfb;
        border-color: transparent;
        height: 35px;
    }

    .form-container .ivu-select-single .ivu-select-arrow {
        color: #fbfbfb;
    }

    .form-container .ivu-btn {
        width: 100%;
        height: 40px;
        background: rgb(11, 151, 117);
        border: none;
        color: #fff;
    }
    .form-container .search-list{
        list-style:none;
        height:150px;
    }
        .form-container .search-list li {
            margin-left: 5px;
            padding: 5px;
            border-bottom: 1px solid rgba(98, 97, 101, 0.4);
        }
</style>
