<template>
    <view class="list">
        <view
            v-for="(v, i) in list"
            :key="i"
            @click="navigateTo(`/pages/articleDetails/index?id=${v.id}`)"
            class="item flex-between"
            :class="[v.infoType == 1 ? 'layout1' : 'layout2']"
        >
            <view class="video" v-if="v.infoType == 2">
                <image class="video-img" mode="widthFill" :src="evn.APP_IMAGE_BASE_API + v.thumbnailPath"> </image>
                <image class="play-icon" v-if="v.videoPath" src="../../static/image/icon/play.png"></image>
            </view>
            <view>
                <view class="title">{{ v.title }}</view>
                <view class="flex-align-center">
                    <view class="poster">{{ v.author }}</view>
                    <view class="date">{{ dayjs(v.publishDate).format("YYYY/MM/DD") }}</view>
                </view>
            </view>
            <img :src="evn.APP_IMAGE_BASE_API + v.thumbnailPath" v-if="v.infoType == 1" />
        </view>
    </view>
</template>

<script setup>
// infoType 1文图 2视频
import { defineProps } from "vue";
import evn from "@/utils/config";
import dayjs from "dayjs";
const props = defineProps({
    list: {
        type: Array,
        default: () => [
            {
                type: 2,
                title: "2023年贵阳市第四季度供求情况分2023年贵阳市第四季度供求情况分析报告析报告",
                poster: "社会保障局",
                date: "01-12 12:30"
            },
            {
                type: 1,
                title: "2023年贵阳市第四季度供求情况分析报告",
                poster: "社会保障局",
                date: "01-12 12:30"
            }
        ]
    }
});
function navigateTo(url) {
    xma.navigateTo({
        url
    });
}
</script>

<style lang="scss" scoped>
.list {
    .item {
        padding: 32rpx 0;
        margin: 0 32rpx;
        border-bottom: 2rpx solid #f3f4f8;
        & > view {
            flex: 1;
        }
        img {
            width: 202rpx;
            height: 114rpx;
            margin-left: 24rpx;
            border-radius: 8rpx;
        }
        .title {
            margin-bottom: 16rpx;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 36rpx;
            color: #000000;
        }
        .poster,
        .date {
            margin-right: 16rpx;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 28rpx;
            color: #77818f;
            letter-spacing: 0rpx;
        }
    }
    .video {
        height: 100%;
        width: 100%;
        position: relative;
        .video-img {
            height: 100%;
            height: 294rpx;
            border-radius: 8rpx;
            z-index: 0;
        }
        .play-icon {
            position: absolute;
            z-index: 1;
            height: 80rpx;
            width: 80rpx;
            top: calc(50% - 40rpx);
            left: calc(50% - 40rpx);
        }
    }
    .layout2 {
        flex-direction: column;
        align-items: flex-start;

        image {
            width: 100%;
            height: 294rpx;
            margin: 0;
        }
        .title {
            margin-top: 32rpx;
        }
    }
}
</style>
