<template>
    <view @touchmove.prevent class="im-poster">
        <view @touchmove.prevent class="im-poster-mask"></view>
        <view class="im-poster-cont">
            <image @tap.stop="onJump" class="im-poster-img" :src=" data.content.img" />
            <view class="c-gap-top-large im-poster-icon">
                <c-icon @tap.stop="onClose"  class="im-poster-close" name="close-circle" font-size="32px"/>
            </view>
        </view>
    </view>
</template>
<script>
/**
 * @file components/im/im-poster-modal
 * @author chenshuo04
 */
import * as log from '../../utils/log';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    components: {
        'c-icon': Icon
    },
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    methods: {
        onJump() {
            this.$emit('hide');
            navigate({url: this.data.content.path});
        },
        onClose() {
            this.$emit('hide');
        }
    }
};
</script>

<style lang="less" scoped>
.im-poster {
    z-index: 921;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    &-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .7);
    }
    &-cont {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: calc(50% - 4vh);
    }
    &-img {
        width: 45vh;
        height: 84vh;
        margin-top: 9vh;
    }
    &-icon {
        width: 100%;
        text-align: center;
    }
    &-close {
        color: #fff;
    }
}
</style>