
<template>
    <div class="form-container">
        <Form :model="formTop" label-position="top">
            <!--<FormItem :label="$t('knowledge.subject')">
                <Select v-model="formTop.subject">
                    <Option v-for="(item,index) in currentPeriod.subjects" :value="item.id" :key="index">{{ item.name }}</Option>
                </Select>
            </FormItem>-->
            <FormItem :label="$t('knowledge.label')">
                <Input v-model="formTop.name" :placeholder="$t('knowledge.blockP')" />
                <vuescroll>
                    <ul class="search-list" v-show="filterData.length > 0">
                        <li v-for="(list,index) in filterData">
                            <span>{{list.name}}</span>
                        </li>
                    </ul>
                </vuescroll>
            </FormItem>
            <FormItem>
                <Button @click="handleSubmit" :loading="isLoading">{{$t("knowledge.confirm")}}</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
    import '@/utils/Math.uuid'
    export default {
        props: ['originData', 'periodIndex', 'subjectIndex', 'addType', 'editBlock', 'orginBlock'],
        data() {
            return {
                originDatas: {},
                currentPeriod: {},
                editItem: null,
                addPointType: 'school',
                isLoading: false,
                uuid: '',
                formTop: {
                    subject: '',
                    grade: '',
                    semester: '',
                    name: ''
                }
            }
        },

        created() {
			if(this.originData && this.originData.period){
				this.currentPeriod = this.originData.period[this.periodIndex]
				this.originDatas = this.originData
			}
        },
        methods: {
            // 提交添加
            handleSubmit() {
                let newName = this.formTop.name
                if (!newName) {
                    this.$Message.warning(this.$t('knowledge.blockWarning'))
                } else {
                    this.isLoading = true
                    let params = {
                        name: this.formTop.name,
                        points: [],
                    }
                    if (this.editItem && this.editItem.code) {
                        params.knowledgeId = this.editItem.knowledgeId
                        params.points = this.editItem.points
                        params.id = this.editItem.id
                    }
                    if (params.name) {
                        this.$emit('addFinish', params)
                        this.isLoading = false
                        this.closeModal()
                    }
                }
            },

            // 添加完成 关闭窗口
            closeModal() {
                this.formTop.name = ''
            }
        },
        computed: {
            filterData() {
                console.log(this.orginBlock)
                if (this.formTop.name !== "") {
                    return this.orginBlock.filter(item => item.name.indexOf(this.formTop.name) > -1)
                }
                return []
            }
        },
        watch: {
            addType: {
                handler(newValue, oldValue) {
                    if (newValue) {
                        this.addPointType = newValue
                    }
                }
            },
            originData: {
                handler(newValue, oldValue) {
                    this.originDatas = newValue
                }
            },
            periodIndex: {
                handler(newValue, oldValue) {
                    this.currentPeriod = this.originDatas.period[newValue]
                    this.formTop.subject = this.currentPeriod.subjects.length ? this.currentPeriod.subjects[0].id : ''
                    this.formTop.name = ''
                }
            },
            subjectIndex: {
                handler(newValue, oldValue) {
                    this.formTop.subject = this.currentPeriod.subjects ? this.currentPeriod.subjects[newValue].id : ''
                }
            },
            editBlock: {
                handler(newValue, oldValue) {
                    if (newValue) { // 有编辑册别传过来则为编辑状态
                        this.editItem = newValue
                        this.formTop.subject = this.formTop.subject || newValue.subjectId
                        this.formTop.name = newValue.name
                    } else { // 否则为新增状态
                        this.formTop.subject = this.formTop.subject || this.currentPeriod.subjects[0].id
                        this.formTop.name = ''
                        this.editItem = 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;
    }
</style>
