<script setup>
import {TagInterface} from '@/api/modules/trainingApi'
import { ref, reactive, watch, nextTick } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import _ from 'lodash'

const props = defineProps({
    isModifyDialogShow:{
        type:Boolean,
        default:false
    },
    Tags:{
        type:Array,
        default:[]
    },
    getTagList:{
        type:Function,
        default:null
    },
    tagList:{
        type:Array,
        default:[]
    }
})
const emit = defineEmits(["modify","close"])
let searchText = ref('')
let addText = ref('')
let choosedTags = ref([])
watch(()=>props.isModifyDialogShow,(newVal)=>{
    if(newVal){
        searchText.value =''
        addText.value = ''
        choosedTags.value = _.cloneDeep(props.Tags)
        props.getTagList()
    }
})
//选择标签
function chooseTag(tag){
    const {TagId} = tag
    const index = choosedTags.value.findIndex(i=>i.TagId===TagId)
    if(index!==-1){
        choosedTags.value.splice(index,1)
    }else{
        if(choosedTags.value.length===3){
            ElMessage.warning("最多选择3个标签")
            return
        }
        choosedTags.value.push(tag)
    }
}
//添加标签
function addTag(){
    if(!addText.value){
        ElMessage.warning("请输入标签名称")
        return
    }
    if(addText.value.length>5){
        ElMessage.warning("标签名称过长,请重新编辑")
        return
    }
    TagInterface.addTag({
        TagName:addText.value
    }).then(res=>{
        if(res.Ret!==200) return 
        props.getTagList()
        addText.value = ''
    })
}
function modifyTags(){
    emit('modify',choosedTags.value)
}
function toTagPage(){
    window.open('/trainingLabel')
}
</script>
<template>
    <el-dialog
        title="选择标签"
        :model-value="props.isModifyDialogShow"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        @close="emit('close')"
        width="589px"
        center
        class="add-Tags-wrap"
    >
        <div class="dialog-container">
            <el-input  placeholder="请输入标签名称" :prefix-icon="Search"
                v-model.trim="searchText" clearable @input="getTagList(searchText)"></el-input>
            <el-link :underline="false" type="primary" @click="getTagList(searchText)">搜索</el-link>
            <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-link :underline="false" type="primary" style="margin-right: 20px;" @click="addTag">添加</el-link>
                <el-link :underline="false" type="primary"  @click="toTagPage">标签管理</el-link>
                <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>

<style scoped lang="scss">
.add-Tags-wrap{
    .el-dialog__body{
        .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;
            }
            .el-input{
                margin-right: 10px;
            }
        }
        .foot-container{
            text-align: center;
            padding:20px 0;
        }
    }
}
</style>
