<template>
    <view>
        <view class="calendarEntry c-flex between alignCenter" @tap="goCalendar(calendar)">
            <view class="c-flex alignCenter">
                <c-image
                    has-compress
                    width="20px"
                    height="20px"
                    src="https://med-fe.cdn.bcebos.com/zb/live-calendar.png"
                    mode="widthFix"
                    :extra="{
                        column: 1
                    }"
                />
                <text>{{ calendar.text }}</text>
            </view>
            <view class="c-flex alignCenter c-font-normal c-color-b5">
                <text class="calendarEntry__text">{{ calendar.subText }}</text>
                <c-icon class="c-font-normal" name="right"/>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 诊播日历入口
 * @author yantingxi
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CImage from '@components/common/image';
import {navigate} from '@utils/navigate';
import {ubcSend} from '@utils/log';
export default {
    config: {
        component: true
    },
    props: {
        calendar: {
            type: Object,
            default: () => ({})
        }
    },
    components: {
        CIcon,
        CImage
    },
    methods: {
        goCalendar(info) {
            navigate({
                url: info.url
            });

            ubcSend({
                type: 'clk',
                value: 'live',
                ext: Object.assign({
                    pd: 'live',
                    value_type: 'index-page-calendarentry'
                })
            });
        }
    }
};
</script>

<style lang="less" scoped>
.calendarEntry {
    border-radius: .1rem;
    padding: .11rem .13rem;
    background: #fff;

    &__text {
        margin-right: .01rem;
        margin-bottom: .01rem;
    }
}

.c-flex {
    display: flex;

    &.between {
        justify-content: space-between;
    }

    &.alignCenter {
        align-items: center;
    }
}

.c-color-b5 {
    color: #b5b5b5;
}
</style>
