<!--
 * @Description: 科普专题
 * @Author: yantingxi
 * @Date: 2019-08-20 14:12:36
 * @LastEditors: yantingxi
 * @LastEditTime: 2019-09-11 00:16:31
 -->
<template>
    <b-navigate
        :url="url"
        :extra="{
            mod: module
        }"
    >
        <view
            :style="{
                background: background,
                borderRadius: borderRadius,
                color: color
            }"
            class="spe-topic__show-more c-gap-top"
            @tap="onClick($event)"
        >
            <text>{{ text }}</text>
            <view class="spe-topic__show-more__icon m-icon m-icon-rightMore" :style="{color: iconColor}"></view>
        </view>
    <b-navigate/>
</template>

<script>
import Icon from "@baidu/med-ui/components/Icon/Icon";
import Button from "@baidu/med-ui/components/Button/Button";
import Navigate from '../../components/common/navigate';
import {navToBdBoxH5} from '../../utils/navigate';
import {send} from '../../utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        text: {
            type: String,
            default: '查看详情'
        },
        background: {
            type: String,
            default: '#F5F5F5'
        },
        borderRadius: {
            type: String,
            default: '19px'
        },
        color: {
            type: String,
            default: '#000'
        },
        url: {
            type: String,
            default: ''
        },
        outLink: {
            type: String,
            default: ''
        },
        module: {
            type: String,
            default: ''
        },
        iconColor: {
            type: String,
            default: '#00C8C8'
        }
    },
    components: {
        'c-icon': Icon,
        'c-button': Button,
        'b-navigate': Navigate
    },
    computed: {
        extra() {
            return {
                mod: this.module
            };
        }
    },
    methods: {
        onClick(e) {
            if (this.outLink) {
                if (process.env.MARS_ENV === 'h5') {
                    window.location.href = this.outLink;
                }
                navToBdBoxH5(this.outLink, {
                    module: 'browser',
                    action: 'open',
                    parameters: {
                        simple: '1'
                    }
                });
                send({
                    type: 't',
                    action: 'click',
                    extra: this.extra
                });
            }
        }
    }
};
</script>

<style lang="less">
.spe-topic__show-more {
    display: inline-block;
    padding: .08rem .186rem;
    margin-left: 50%;
    transform: translateX(-50%);

    &__icon {
        display: inline-block;
        // color:#00C8C8;
        font-size: 15px;
        margin-left: 7px;
    }
}
</style>