
<template>
    <div class="compose-container">
        <Tabs value="0" @on-click="onTabChange">
            <TabPane :label="$t('knowledge.newBlock')" icon="md-folder" name="0">
                <div class="tab-content">
                    <p class="tab-title">{{$t("knowledge.addBlock")}}</p>
                    <Input v-model="newBlockName" :placeholder="$t('knowledge.blockP')" style="width: 98%;margin-left:1%" />
                </div>
            </TabPane>
            <TabPane :label="$t('knowledge.nowBlock')" icon="md-cube" name="1">
                <div class="tab-content">
                    <p class="tab-title">{{$t("knowledge.nowBlockN")}}</p>
                    <Select v-model="selectBlock" transfer style="width: 98%;margin-left:1%">
                        <Option v-for="(item,index) in existBlockList" :value="item.name" :key="index">{{ item.name }}</Option>
                    </Select>
                </div>
            </TabPane>
        </Tabs>

        <div class="show-wrap">
            <p class="tab-title">{{$t("knowledge.selectPoint")}}</p>
            <div class="show-list">
                <span class="point-item" v-for="(item,index) in checkedList" :key="index">
                {{ item }}
                    <span class="btn-delete"><Icon type="ios-close" size="20" style="vertical-align:bottom;margin-left:5px" @click="onSplicePoint(item)" /></span>
                </span>
            </div>
        </div>

        <Button @click="currentTab === '0' ? handleSubmitNew() : handleSubmit()" :loading="isLoading">{{$t("knowledge.confirm")}}</Button>
    </div>
</template>

<script>
    import '@/utils/Math.uuid'
    export default {
        props: ['list', 'params', 'blockList'],
        data() {
            return {
                existBlockList: [],
                checkedList: [],
                currentParams: null,
                newBlockName: '',
                isLoading: false,
                selectBlock: '',
                currentTab: '0'
            }
        },

        created() {
            this.currentParams = this.params
        },
        methods: {

            // 面板切换事件
            onTabChange(name) {
                this.currentTab = name
            },

            // 提交新增知识块
            handleSubmitNew() {
                this.isLoading = true
                if (this.newBlockName) {
                    let list = this.existBlockList.map(item => item.name)
                    let isExistIndex = list.indexOf(this.newBlockName)
                    if (isExistIndex > -1) {
                        this.$Message.warning(this.$t('knowledge.blockWarning2'))
                        this.isLoading = false
                    } else {
                        let params = {
                            name: this.newBlockName,
                            points: this.checkedList.map(item => item),
                        }
                        this.$emit('onFinish', params)
                        this.isLoading = false
                        this.newBlockName = ''
                    }
                } else {
                    this.$Message.warning(this.$t('knowledge.blockWarning3'))
                    this.isLoading = false
                }
            },

            // 提交新增知识块
            handleSubmit() {
                if (this.existBlockList.length) {
                    this.isLoading = true
					let selectBlockItem = this.existBlockList.filter(item => item.name === this.selectBlock)[0]
                    let pointList = selectBlockItem.points
                    pointList = Array.from(new Set(pointList.concat(this.checkedList.map(item => item)))) // 知识点合并去重
                    selectBlockItem.points = pointList
                    this.$emit('onFinish', selectBlockItem)
                    this.isLoading = false
				}else{
					this.$Message.warning(this.$t('knowledge.blockWarning4'))
				}
                
            },

            onSplicePoint(item) {
                this.checkedList.splice(this.checkedList.indexOf(item), 1)
            }
        },
        mounted() {

        },
        watch: {
            list: {
                handler(newValue, oldValue) {
                    if (newValue) {
                        this.checkedList = []
                        this.checkedList = newValue
                    }
                }
            },

            params: {
                handler(newValue, oldValue) {
                    if (newValue) {
                        this.currentParams = newValue
                    }
                }
            },

            blockList: {
                handler(newValue, oldValue) {
                    if (newValue) {
                        this.newBlockName = ''
                        this.existBlockList = newValue
                        this.selectBlock = newValue.length ? newValue[0].id : ''
                    }
                }
            }
        }

    }
</script>

<style>

    /*修改iview Tab标签页样式重写*/
    .compose-container .ivu-tabs-nav {
        width:100%;
    }

     .compose-container .ivu-tabs {
        height:100%;
    }

        .compose-container .ivu-tabs-nav .ivu-icon {
            font-size:20px;
            margin-right:15px;
        }

    .compose-container .ivu-tabs-nav .ivu-tabs-tab {
        width:50%;
        text-align:center;
        color:#fff;
        margin:0;
        padding-bottom:20px;
    }

    .compose-container .ivu-tabs-bar {
        border-bottom:none;
    }

    .compose-container .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused {
        border-color:rgb(11, 151, 117) !important;
    }

    .compose-container .ivu-tabs-ink-bar {
        background:rgb(11, 151, 117) !important;
        height:4px;
        bottom:0;
    }

    .compose-container .ivu-tabs-content {
        height:100%;
    }

    .compose-container .tab-content {
        padding:30px;
    }

    .compose-container .tab-title {
        color:#fff;
        margin:10px 0 20px 5px;
    }

    .compose-container .tab-title::before {
        content:"";
        width:4px;
        height:14px;
        background:rgb(11, 151, 117);
        margin:-2px 10px -2px 0;
        display:inline-block;
     }

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

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

    .compose-container .show-wrap{
        padding:30px;
    }

    .compose-container .show-list {
       display:flex;
       flex-wrap:wrap;
    }

        .compose-container .show-list .point-item {
            margin: 10px;
            padding: 5px 30px;
            border-radius: 50px;
            background: #828282;
            box-shadow: 1px 4px 0px 0px #313131;
            cursor: pointer;
        }

    .compose-container .ivu-btn {
        width: 92%;
        margin-left:4%;
        margin-bottom:20px;
        height: 40px;
        background: rgb(11, 151, 117);
        border: none;
        color: #fff;
    }

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

    .compose-container .ivu-select-single .ivu-select-arrow {
        color: #fbfbfb;
    }
</style>
