<template>
    <div class="list-item" :class="{'active':activeWindowId===item.AiChatTopicId}">
        <template v-if="!isEdit">
            <p>{{item.TopicName}}</p>
            <!-- <span>6 messages </span> -->
            <span>{{item.ModifyTime||item.CreateTime}}</span>
            <div class="tool-list" >
                <span @click.stop="editItem"><img src="~@/assets/img/ai_m/edit.png" /></span>
                <span @click.stop="deleteItem"><img src="~@/assets/img/ai_m/delete.png" /></span>
            </div>
        </template>
        <div class="item-edit" v-else>
            <el-input v-model="newTitle" ref="editVal" @blur="changeEdit"></el-input>
            <span @mousedown.stop="changeEdit"><img src="~@/assets/img/ai_m/save.png"/></span>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        activeWindowId:{ //当前活跃窗口
            type:Number,
            default:1
        },
        item:{
            type:Object,
            default:()=>{
                return {}
            }
        }
    },
    data() {
        return {
            isEdit:false,//是否是编辑状态
            newTitle:''
        };
    },
    methods: {
        editItem(){
            this.isEdit = true
            this.newTitle = this.item.TopicName
            this.$nextTick(() => {
                this.$refs.editVal.focus();
            });
        },
        changeEdit(e){
            e.preventDefault()
            if(!this.isEdit) return
            if(!this.newTitle.length){
                this.$message.warning('请输入窗口标题')
                return
            }
            this.$emit('changeEdit',this.newTitle)
            /* this.$nextTick(()=>{
                this.isEdit = false
            }) */
            setTimeout(()=>{
               this.isEdit = false 
            },200)
        },
        deleteItem(){
            this.$confirm("确定删除当前对话窗口？", "提示", {
                    type: "warning"
                }).then(()=>{
                    this.$emit('delete')
                })
        }
    },
};
</script>

<style lang="scss">
.list-item{
    .item-edit{
        .el-input.is-active .el-input__inner, .el-input__inner:focus{
                border-color: #3D52A1;
            }
    }
}

</style>
<style scoped lang="scss">
.list-item{
    width: 100%;
    box-sizing: border-box;
    padding:20px;
    position:relative;
    background-color: white;
    border:2px solid #E3E3E3;
    transition: border .5s;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom:20px;
    .tool-list{
        opacity: 0;
        pointer-events:none;
        position:absolute;
        top:0;
        right:0;
        width:220px;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        transition: opacity .5s;
        background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 38.02%, 
            rgba(255, 255, 255, 0.521008) 67.71%, 
            rgba(217, 217, 217, 0) 100%, 
            rgba(255, 255, 255, 0) 100%);
        span{
            margin-right:20px;
            cursor: pointer;
            img{
                width:26px;
                height:26px;
            }
        }
    }
    p{
        color:#666666;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 10px;
    }
    >span{
        color:#999999;
    }
    .item-edit{
        display: flex;
        align-items: center;
        .el-input{
            flex: 1;
        }
        span{
            margin-left: 20px;
            cursor: pointer;
            img{
                width:22px;
                height:22px;
            }
        }

    }
    &.active/* ,&:hover */{
        border:2px solid #3D52A1;
        .tool-list{
            opacity: 1;
            pointer-events:auto;
        }
    }
    /* &:hover{
        .tool-list{
            opacity: 1;
        }
    } */
}
</style>
