<!--
 * @Description: 医院头图位置
 * @Author: wangye15
 * @Email: wangye15@baidu.com
 * @Date: 2021-11-09 11:10:21
 * @LastEditors: wangye15
 * @LastEditTime: 2021-11-17 18:05:25
-->
<template>
    <!-- 头图 -->
    <view
        v-if="media && media.srcList.length"
        class="settled-hospital-showcase-media"
        :style="{
            backgroundImage: 'url(' + media.srcList[0].image + ')',
            backgroundSize: '100% 3.1rem',
            paddingTop: isSwan ? statusBarHeight + 'px' : '',
        }"
        @tap.stop="navigateTo(media.srcList[0].link, media.srcList[0].type)"
    >
        <view class="settled-hospital-tips">
            <view class="settled-hospital-tips--text">
                <c-avatar
                    src="https://med-fe.cdn.bcebos.com/hospital/hospital_icon.png"
                    :size="15"
                    border-radius="none"
                    class="c-gap-right-middle icon"
                />
                <text>
                    信息由医院发布并对真实性及合法性负责
                </text>
            </view>
        </view>
        <view
            v-if="media.srcList[0].type === 'video'"
            class="settled-hospital-showcase-media--play"
        >
            <c-icon
                name="play"
                font-size=".36rem"
                class="icon"
                color="#fff"
            />
        </view>
        <view class="header-mark"/>
    </view>
</template>

<script>
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '@utils/navigate';
import * as Log from '../../../utils/log';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        component: true,
    },
    props: {
        /**
         * 媒体数据
         */
        media: {
            type: Object,
            default: () => ({}),
        },
    },
    components: {
        CIcon,
        CAvatar,
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        const systemInfo = getSystemInfo();
        return {
            isSwan,
            statusBarHeight: systemInfo.statusBarHeight,
        };
    },
    methods: {
        sendLog(type) {
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: `banner(${type})`,
                },
            });
        },
        navigateTo(url, type = '') {
            let urlType = type === 'video' ? 2 : 0;
            if (!url) {
                return;
            }
            this.sendLog(urlType);
            navigate({url, urlType});
        },
    },
};
</script>

<style lang="less" scoped>
.settled-hospital-showcase-media {
    position: relative;
    height: 3.1rem;
    background: 100% 3.1rem;

    &--play {
        display: flex;
        justify-content: center;
        padding-top: 0.42rem;
    }

    .header-mark {
        position: absolute;
        bottom: -.03rem;
        height: .5rem;
        width: 100%;
        background-image: linear-gradient(to bottom, rgba(244, 244, 244, 0), rgba(244, 244, 244, 1));
        z-index: 3;
    }

    .settled-hospital-tips {
        padding-top: .6rem;

        &--text {
            display: flex;
            align-items: center;
            justify-content: center;
            height: .38rem;
            margin: 0 .1rem;
            background: rgba(0, 0, 0, 0.5);
            border-radius: .09rem;
            color: #fff;

            .icon {
                margin-top: -0.03rem;
            }
        }
    }
}
</style>
