<template>
   <a-modal :width="685" centered :visible="visible" title="命中片段" :confirmLoading="confirmLoading"
           @cancel="handleCancel" class="form-modal">
           <ul class="menu">
            <li v-for="(item,index) in quoteList" :key="index" class="menu-li">
                {{ item.content }}
                <p class="similarity">匹配度：{{  Math.floor(item.similarity * 100) / 100 }}</p>
            </li>
           </ul>

    <template slot="footer">
      <a-button @click="handleCancel">取 消</a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
    data(){
        return{
            visible: false,
            confirmLoading: false,
            model: {},
            quoteList:[],


        }
    },
    props:{
        datasetQuoteList:{
            type: Array,
            required: true
        }
    },
    methods:{
        async edit(record) {
            this.model = Object.assign({}, record)
            this.visible = true
            this.handleList()
        },
        async handleList(){
            this.quoteList = this.datasetQuoteList.filter(acc=>acc.document_name == this.model.document_name)
        },
        handleCancel(){
            this.visible = false
        },
    }
    
}
</script>

<style lang="less" scoped>
div[aria-hidden="true"] {
    display: none !important;
}
.menu{
    list-style: none;
    padding: 0;
    position: relative;
    height: 480px;
    overflow: hidden;
    overflow-y: scroll;
    &::-webkit-scrollbar {
        width: 8px;
    }
    &::-webkit-scrollbar-thumb {
        background: #ccc; 
        border-radius: 5px;
    }
    .menu-li{
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        text-align: left;
        margin-bottom: 20px;
        border-bottom: 1px dashed rgba(4,24,73,0.15);
        .similarity{
            margin-top: 10px;
            font-size: 14px;
            color: #347ae2;
            margin-bottom: 14px;
            text-align: right;
        }
        &:last-child{
            border-bottom: none;
        }
    }
}
</style>

