<template>
    <el-dialog
        title="选择标签"
        :visible.sync="isModifyDialogShow"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        @close="$emit('close')"
        width="589px"
        v-dialogDrag
        center
        class="add-Tags-wrap"
    >
        <div class="dialog-container">
            <el-input  placeholder="请输入标签名称"  prefix-icon="el-icon-search"
                v-model.trim="searchText" clearable @input="getTagList(searchText)"></el-input>
            <el-button type="text" @click="getTagList(searchText)">搜索</el-button>
            <div class="tag-list-box">
                <el-tag v-for="item in tagList"
                    :class="['tag-item',{ choosed: choosedTags.findIndex(i=>i.TagId===item.TagId)!==-1 }]"
                    :key="item.TagId"
                    type="info"
                    effect="plain"
                    @click="chooseTag(item)"
                >
                    {{ item.TagName }}
                </el-tag>
            </div>
            <div class="add-tag-box">
                <el-input  placeholder="请输入标签名称" v-model.trim="addText"></el-input>
                <el-button type="text" @click="addTag">添加</el-button>
                <el-button type="text" @click="toTagPage">标签管理</el-button>
                <p style="color:#999999;font-size: 12px;">注：名称不得超过5个字</p>
            </div>
        </div>
        <div class="foot-container">
            <el-button @click="$emit('close')">取 消</el-button>
            <el-button type="primary" @click="modifyTags">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {TagInterface} from '@/api/modules/trainingApi'
export default {
    props:{
        isModifyDialogShow:{
            type:Boolean,
            default:false
        },
        Tags:{
            type:Array,
            default:[]
        },
        getTagList:{
            type:Function,
            default:null
        },
        tagList:{
            type:Array,
            default:[]
        }
    },
    data() {
        return {
            searchText:'',
            addText:'',
            choosedTags:[],
        };
    },
    watch:{
        isModifyDialogShow(newVal){
            if(newVal){
                this.searchText=''
                this.addText=''
                this.choosedTags = _.cloneDeep(this.Tags)
                this.getTagList()
            }
        }
    },
    methods: {
        //选择标签
        chooseTag(tag){
            const {TagId} = tag
            const index = this.choosedTags.findIndex(i=>i.TagId===TagId)
            if(index!==-1){
                this.choosedTags.splice(index,1)
            }else{
                if(this.choosedTags.length===3){
                    this.$message.warning("最多选择3个标签")
                    return
                }
                this.choosedTags.push(tag)
            }
        },
        //添加标签
        addTag(){
            if(!this.addText){
                this.$message.warning("请输入标签名称")
                return
            }
            if(this.addText>5){
                this.$message.warning("标签名称过长,请重新编辑")
                return
            }
            TagInterface.addTag({
                TagName:this.addText
            }).then(res=>{
                if(res.Ret!==200) return 
                this.getTagList()
                this.addText = ''
            })
        },
        modifyTags(){
            this.$emit('modify',this.choosedTags)
        },
        toTagPage(){
            window.open('/trainingLabel')
        }
    },
};
</script>

<style scoped lang="scss">
.add-Tags-wrap{
    .el-dialog{
        .dialog-container{
            .tag-list-box{
                margin-top:20px;
                padding:10px;
                box-sizing: border-box;
                border: 1px dashed #DCDFE6;
                border-radius: 4px;
                max-height: 200px;
                overflow-y: auto;
                display: flex;
                flex-wrap: wrap;
                gap:10px;
                .tag-item{
                    cursor: pointer;
                    box-sizing: border-box;
                    text-align: center;
                    min-width:78px;
                    /* border:1px solid black; */
                    border-radius: 2px;
                    &:hover,&.choosed{
                        background-color: #EAF3FE;
                        border-color: #409EFF;
                        color: #409EFF;
                    }
                }
            }
            .add-tag-box{
                margin-top:20px;
            }
        }
        .foot-container{
            text-align: center;
            padding:20px 0;
        }
    }
}
</style>
