<template>
    <view v-if="list && list.length" class="pcr-article">
        <view
            v-for="(item, index) in list"
            :key="index"
            class="pcr-article-item"
            :class="[index + 1 !== list.length && 'c-gap-bottom']"
            @tap.stop="onTap(item, index)"
        >
            <view class="pcr-article-img">
                <c-image
                    v-if="item.image"
                    has-compress
                    :src="item.image"
                    width="100%"
                    height="auto"
                    mode="widthFix"
                    :hack-white-stroke="false"
                    :is-round="false"
                    radius="8px"
                    :extra="{column: 3}"
                />
            </view>

            <view class="pcr-article-info">
                <view class="pcr-article-title c-font-normal">{{ item.title }}</view>
                <view v-if="item.source" class="pcr-article-intro c-color-gray c-gap-tpo-small c-font-normal">
                    <image
                        v-if="item.source.icon"
                        :src="item.source.icon"
                        class="pcr-article-logo c-gap-right-small"
                        lazy-load
                    />
                    <text v-if="item.source.text" class="c-gap-right-small">{{ item.source.text }}</text>
                    <c-timespan :time="item.update * 1000" :server-time="nowTime"/>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 机构
* @author chenshuo04
*/
import CImage from '@components/common/image';
import CTimespan from '@baidu/med-ui/components/Timespan/Timespan';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CTimespan,
        CImage
    },
    props: {
        list: {
            type: Array,
            default: () => {
                return [];
            }
        },
        topic: {
            type: String,
            default: ''
        },
        pageTopic: {
            type: String,
            default: ''
        },
        /* 城市 */
        city: {
            type: String,
            default: ''
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            nowTime: new Date().getTime()
        };
    },
    methods: {
        onTap(data, index) {
            const isSwan = process.env.MARS_ENV === 'swan';
            if (data.appkey) {
                ubcSend({
                    page: this.page,
                    type: 'clk',
                    value: 'article',
                    ext: {
                        pd: 'bx',
                        city: this.city,
                        value_id: index,
                        value_type: 'list',
                        page_type: this.pageTopic || ''
                    }
                });
                if (isSwan) {
                    this.$api.navigateToSmartProgram({
                        appKey: data.appkey,
                        path: data.path
                    });
                }
                else {
                    navToBdBoxH5(data.h5Url);
                }
            }
            else if (data.tcUrl) {
                ubcSend({
                    page: this.page,
                    type: 'clk',
                    value: 'article',
                    ext: {
                        pd: 'bx',
                        city: this.city,
                        value_id: index,
                        value_type: 'list',
                        page_type: this.pageTopic || ''
                    }
                });
                navToBdBoxH5(data.tcUrl);
            } else {
                navigate({
                    url: data.url || data.path,
                    log: {
                        page: this.page,
                        type: 'clk',
                        value: 'article',
                        ext: {
                            pd: 'bx',
                            city: this.city,
                            value_id: index,
                            value_type: 'list',
                            page_type: this.pageTopic || ''
                        }
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.pcr-article {
    &-item {
        display: flex;
        justify-content: flex-start;
    }

    &-img {
        width: 33.3%;
        border-radius: 8px;
    }

    &-info {
        width: 66.6%;
        box-sizing: border-box;
        padding-left: 10px;
    }

    &-logo {
        width: 16px;
        height: 16px;
        border-radius: 100%;
        position: relative;
        top: 3px;
    }
}
</style>
