<template>
<div :class="`fx-article-item-${direction}`">
    <div class="image-box" @click="toDetailHandler">
        <img :src="data.src" />
    </div>
    <div class="article-box">
        <div class="art-title" @click="toDetailHandler">{{data.title}}</div>
        <div class="art-attr">
            <div class="pv" @click="toPvHandler">阅读 {{data.pv}}</div>
            <div class="ap" @click="toApHandler">{{data.ap}}</div>
        </div>
    </div>
</div>
</template>
<script lang="ts">
    export default {
      name: 'FxArticleItem',
    };
</script>
<script setup lang="ts">
    import { onMounted, reactive, ref, nextTick, onUnmounted } from 'vue';
    const props = defineProps({
        data: {
            type: Object,
            default: () => {
                return null
            },
        },
        direction : { // 呈现方式 横向 和 竖向 默认横向
            type: String,
            default: () => {
                return 'vertical' // vertical
            },
        }
    });
    const { data, direction} = props

    const emit = defineEmits(['click']);

    const toDetailHandler = ()=>{
        emit('click', { type:"detail", desc:"查看详情"}, data)
    }

    const toPvHandler = ()=>{
        emit('click', { type:"pv", desc:"阅读"}, data)
    }

    const toApHandler = ()=>{
        emit('click', { type:"ap", desc:"收藏"}, data)
    }

</script>
<style lang="less">
:root {
    --attr-color : #AAB0B6;
}
.fx-article-item-horizontal{
    display: flex; 
    padding: 0px 10px; 
    .image-box{
        flex: 0 0 120px; /* 左列宽度固定为30% */  
        background-color: #ffffff; 
        padding: 10px;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .article-box{
        flex: 1; /* 右列占据剩余空间 */  
        background-color: #ffffff; 
        padding: 5px;
        font-size: 14px;
        position: relative;
        .art-title{
            padding-top: 5px;
        }
        .art-attr{
            position: absolute;
            right: 0;
            bottom: 0;
            line-height: 30px;
            left: 0;
            padding: 0 10px 10px 6px;
            color: var(--attr-color);
            .pv{
                float: left;
            }
            .ap{
                background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAVCAIAAADTi7lxAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEvSURBVHjarNRLS8NAFAXgySWzsIIKFYsmxgSplJa2tEJd6MaNv9yNQhUUi1RKVKLSKqUGTBYjxFMf1TbTh5meReAyl4+bYWa0KIrYZ4R4v7pudl66vVcf5crykm2ZjmVyrqN8C8Kblus9tYMgjK8i2hd0e++dXzZgseGgr1YtCyFOzy5YLFjd39tdW01/Q1CkfTPm6PAAAxJmVlGQ45M6vtRsuUwt2DUg9PDYZsrpPHcpCEN1qOf7xOaSiBHXdXVnMbVAxkZGHQJChdyOooJ/cqxNwlSFXFYFqpTyOOL9zQZkW0YypVYt4dL1D+RPXU5gDZRfKIH1VxmC/mWNKKPQjFZckUBTLakihyZY2W1bqoyFpBbKSjE/rl8bvNnS4PF07zzOubNlGuuTLtOHAAMAQJVsdFIdkmkAAAAASUVORK5CYII=') no-repeat center left;
                float: right;
                padding-left: 20px;
                padding-right: 10px;
                background-size: auto 50% ;
            }
        }
        
    }
}
.fx-article-item-vertical{
    width: calc(50% - 20px);
    float: left;
    padding: 0px 10px; 
    .image-box{
        flex: 0 0 120px; /* 左列宽度固定为30% */  
        background-color: #ffffff; 
        padding: 10px;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .article-box{
        background-color: #ffffff; 
        padding: 0 5px;
        font-size: 14px;
        position: relative;
        .art-title{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 限制文本显示为2行 */
            overflow: hidden; /* 隐藏溢出的文本 */
            height: 40px;
        }
        .art-attr{
            line-height: 30px;
            padding: 0 10px 10px 6px;
            color: var(--attr-color);
            .pv{
                float: left;
            }
            .ap{
                background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAVCAIAAADTi7lxAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEvSURBVHjarNRLS8NAFAXgySWzsIIKFYsmxgSplJa2tEJd6MaNv9yNQhUUi1RKVKLSKqUGTBYjxFMf1TbTh5meReAyl4+bYWa0KIrYZ4R4v7pudl66vVcf5crykm2ZjmVyrqN8C8Kblus9tYMgjK8i2hd0e++dXzZgseGgr1YtCyFOzy5YLFjd39tdW01/Q1CkfTPm6PAAAxJmVlGQ45M6vtRsuUwt2DUg9PDYZsrpPHcpCEN1qOf7xOaSiBHXdXVnMbVAxkZGHQJChdyOooJ/cqxNwlSFXFYFqpTyOOL9zQZkW0YypVYt4dL1D+RPXU5gDZRfKIH1VxmC/mWNKKPQjFZckUBTLakihyZY2W1bqoyFpBbKSjE/rl8bvNnS4PF07zzOubNlGuuTLtOHAAMAQJVsdFIdkmkAAAAASUVORK5CYII=') no-repeat center left;
                float: right;
                padding-left: 20px;
                padding-right: 10px;
                background-size: auto 50% ;
            }
        }
        
    }
}
</style>