<template>
    <view>
        <view
            v-for="(item, index) in newsList"
            :key="index"
            class="four-view-news-info"
            @tap.stop="tapMiddle(item.field_value.jumpUrl)"
        >
            <view class="four-view-news-time">
                <view v-if="item.field_value.startDay" class="news-day">{{ item.field_value.startDay }}</view>
                <view v-if="item.field_value.startDay" class="news-year">{{ item.field_value.startYear }}</view>
            </view>
            <view class="four-view-news-message">
                <view class="four-view-news-title c-line-clamp1">
                    {{ item.field_value.newName }}
                </view>
                <view class="four-view-news-desc c-line-clamp2">
                    {{ item.field_value.newBrief }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @author yumingzhi
 * @file 新闻组件
 */
import {navToH5, navToBdBoxH5} from '../../../../utils/navigate';
export default {
    config: {
        component: true
    },
    components: {},
    props: {
        newsList: {
            type: Array,
            default: () => []
        },
        newsUbcClass: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isSwan: process.env.MARS_ENV === 'swan'
        };
    },
    methods: {
        tapMiddle(url) {
            this.$emit('newsChange');
            if (this.isSwan) {
                navToBdBoxH5(url, {
                    module: 'browser',
                    action: 'open',
                    parameters: {
                        simple: '1'
                    }
                });
            } else {
                navToH5(url);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.four-view-news-info {
    display: flex;
    align-items: flex-start;
    padding: 18px 0 12px;
    border-bottom: 1px solid #f1f1f1;
    &:nth-last-child(1) {
        border-bottom: 0;
    }
    .four-view-news-time {
        margin-right: 16px;
        color: #cccccc;
        text-align: right;
        .news-day {
            font-weight: 500;
            font-size: 24px;
        }
        .news-year {
            font-weight: 300;
            font-size: 12px;
        }
    }
    .four-view-news-message {
        width: 0;
        flex: 1;
        text-align: left;
        .four-view-news-title {
            color: #333333;
            font-size: 16px;
        }
        .four-view-news-desc {
            font-size: 13px;
            color: #777777;
            margin-top: 6px;
        }
    }
}
</style>
