<template>
    <div class="agent_page">
        <div class="top adfacjb">
            <div class="left">知识库管理</div>
            <div class="right adfac">
                <div class="r_query adfacjb queryInput">
                    <el-input v-model="queryParams.name" placeholder="请输入知识库名称查询"></el-input>
                    <img src="@/assets/images/agent/query_mini.png">
                </div>
                <div class="r_add" @click="handleAdd">+ 创建知识库</div>
            </div>
        </div>
        <template v-if="list.length">
            <div class="list">
                <div class="item adfac" v-for="(item, index) in list" :key="index">
                    <div class="i_name adfac">
                        <img src="@/assets/images/agent/book_mini.png">
                        <div class="in_name">
                            <p class="i_text">{{ item.name }}</p>
                            <p class="i_tip">{{ item.intro }}</p>
                        </div>
                    </div>
                    <div class="i_num adffcacjb">
                        <p class="i_tip">知识数</p>
                        <p class="i_text">{{item.num}}</p>
                    </div>
                    <div class="i_time adffcacjb">
                        <p class="i_tip">更新时间</p>
                        <p class="i_text">{{item.time}}</p>
                    </div>
                    <div class="i_opreations adfacjb">
                        <div class="io_pre" @click="handleDetail(item)">查看</div>
                        <div class="io_pre">编辑</div>
                        <div class="io_pre">删除</div>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="empty adffcacjc">
                <img src="@/assets/images/agent/knowledge_empty.png">
                <p>暂无知识库</p>
            </div>
        </template>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance } from 'vue'
    const { proxy } = getCurrentInstance();
    
    const queryParams = ref({
        name: ''
    })
    const list = ref([
        {
            name: '知识库1',
            intro: '这是一个知识库的简介，可以简要描述一下这个知识库的内容。',
            num: 20,
            time: '2023-04-01 09:21'
        }
    ])

    const handleAdd = () => {
        proxy.$router.push('agentKnowledgeAdd')
    }

    const handleDetail = (item) => {
        proxy.$router.push({path:'/agentKnowledgeDetail',query:{title:item.name}})
    }
</script>

<style scoped lang="scss">
    ::v-deep .queryInput .el-input__inner{
        border: none !important;
        height: 30px !important;
        line-height: 30px !important;
        padding: 0 !important;
        width: 200px !important;
    }

    .agent_page{
        .top{
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            border-bottom: 1px solid #E5E7EB;
            .left{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 16px;
                color: #111111;
                line-height: 16px;
            }
            .right{
                .r_query{
                    width: 278px;
                    height: 34px;
                    border-radius: 6px;
                    border: 1px solid #E2E7F5;
                    padding: 0 16px;
                    box-sizing: border-box;
                    img{
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                    }
                }
                .r_add{
                    width: 110px;
                    height: 36px;
                    background: #761E6A;
                    border-radius: 6px;
                    margin-left: 16px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 36px;
                    text-align: center;
                    cursor: pointer;
                }
            }
        }

        .list{
            padding: 0 20px;
            .item{
                padding: 22px 0;
                box-shadow: inset 0px -1px 0px 0px #F2F2F2;
                .i_text{
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 14px;
                    color: #111111;
                    line-height: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 12px;
                }
                .i_tip{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #9CA3AF;
                    line-height: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .i_name{
                    width: calc(100% - 712px);
                    img{
                        width: 20px;
                        height: 18px;
                    }
                    .in_name{
                        margin-left: 22px;
                        .i_text{
                            margin-top: 0;
                        }
                        .i_tip{
                            margin-top: 12px;
                        }
                    }
                }
                .i_num{
                    width: 112px;
                }
                .i_time{
                    width: 424px;
                }
                .i_opreations{
                    width: 176px;
                    .io_pre{
                        width: 48px;
                        height: 32px;
                        background: #F6F9FC;
                        border-radius: 6px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #6B7280;
                        line-height: 32px;
                        text-align: center;
                        cursor: pointer;
                        &:hover{
                            color: #761E6A;
                        }
                    }
                }
            }
        }

        .empty{
            width: 100%;
            height: calc(100% - 77px);
            img{
                width: 64px;
                height: 61px;
            }
            p{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #9CA3AF;
                line-height: 14px;
                margin-top: 16px;
            }
        }
    }
</style>