<template>
    <div class="menuPopover" :class="menuStyle" @mouseover="mouseover" @mouseout="mouseout">
        
        <el-popover
        placement="top-start"
        title=""
        
        trigger="hover"
        >
        <ul class="menu-list1" >
            <li @click="downLoad(data)"><i class="fa el-icon-download"></i><span>下载</span></li>
            <li @click="preview(data)"><i class="fa el-icon-view"></i><span>预览</span></li>
            <li @click="delFile(data)"><i class="fa el-icon-delete"></i><span>删除</span></li>
        </ul>
        <div slot="reference" class="menu-button">
            <div class="line-box">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </div>
    </el-popover>
        
    </div>
</template>
<script>

import {File2} from './mixins'
export default {
    props:['data'],
    mixins:[File2],
    data() {
        return {
            menuStyle:'menu-box',
            active:false,
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        mouseover(){
            this.menuStyle = 'menu-box active' 
            this.active = true
        },
        mouseout(){
            this.menuStyle = 'menu-box' 
            this.active = false
        },
        // downLoad(){
        //     downLoad2(this.data.url) 
        // },
        // preview(){
        //     var item = this.data
        //     var arr = ['png','jpeg','bmp','jpg']
        //     if(arr.includes(item.suffix)){
        //         var FileUrl = this.$p + item.url
        //         var isPicture = 1
        //     }else if(item.suffix == 'pdf'){
        //         var FileUrl = this.$p + item.url
        //         var isPicture = 0
        //     }else{
        //         var FileUrl =  'http://192.168.1.24:8012/onlinePreview?url='+ btoa(encodeURIComponent(this.$p + item.url))
        //         var isPicture = 0
        //     }
        //     const router = this.$router.resolve({
        //         path: '/checkFile',
        //         query: {
        //             row: JSON.stringify(item),
        //             FileUrl: FileUrl,
        //             isPicture:isPicture
        //         }
        //     })
        //     window.open(router.href, '_blank');
        // },
        // delFile(){
        //     this.$emit('delFile',this.data.id)
        // }
    }
}
</script>
<style>
.menuPopover .el-popover{
    min-width: 100px;
    padding: 0;
}
</style>
<style lang="scss" scoped>
    .menu-button{
        width: 25px;
        height: 25px;
        background-color: white;
        border-radius: 50%;
        // box-shadow: 0 0 0 4px rgba(92,103,255,0.3);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        
        cursor: pointer;
        transition: 0.2s ease-in;
    }
    .menu-button:hover{
        background-color: white;
        z-index: 999;
        // box-shadow: 0 0 0 8px rgba(92,103,255,0.3);
    }
    .menu-button .line-box{
        width: 10px;
        height: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        transition: transform 0.3s ease-out;
    }
    .menu-button .line{
        background-color: black;
        width: 100%;
        height: 2px;
        border-radius: 2px;
    }
    .menu-button .line:first-child{
        width: 50%;
        transform-origin: right;
        transition: transform 0.3s ease-in-out;
    }
    .menu-button .line:last-child{
        width: 50%;
        align-self: flex-end;
        transform-origin: left;
        transition: transform 0.3s ease-in-out;
    }
    .menu-list1{
        padding: 6px;
        transition: 0.3s ease;
        transition: delay 0.3s;
        
    }
    .menu-list1 li{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        color: #343470;
        cursor: pointer;
        position: relative;
        opacity: 1;
        transform:  translateX(-10px);
        transition: 0.2s ease-in;
    }
    .menu-list1 li:hover{
        color: #5c67ff;
    }
    .menu-list1 li::before{
        content: '';
        width: calc(100% - 24px);
        height: 1px;
        background-color: rgba(92,103,255,0.1);
        position: absolute;
        bottom: 0;
        left: 12px;
    }
    .menu-list1 li:last-child::before{
        display: none;
    }
    .menu-list1 .fa{
        font-size: 18px;
        width: 18px;
        height: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menu-list1 span{
        font-size: 14px;
        margin-left: 8px;
    }
    .active{
        position: relative;
    }
    .active .line-box{
        transform: rotate(-45deg);
    }
    .active .line-box .line:first-child{
        transform: rotate(-90deg) translateX(1px);
    }
    .active .line-box .line:last-child{
        transform: rotate(-90deg) translateX(-1px);
    }
    .active .menu-list{
        margin: 0;
        opacity: 1;
        transform: scale(1);
    }
    .active .menu-list li{
        animation: fade-in-item 0.4s linear forwards;
    }
    .active .menu-list li:nth-child(1){
        animation-delay: 0.1s;
    }
    .active .menu-list li:nth-child(2){
        animation-delay: 0.2s;
    }
    .active .menu-list li:nth-child(3){
        animation-delay: 0.3s;
    }
    
    @keyframes fade-in-item{
        100%{
            transform: translateX(0);
            opacity: 1;
        }
    }
</style>