<template>
    <navigate
        :url="url"
        :path="path"
        :open-type="openType"
        :extra="extra"
        class="b-ghhistory"
        @tap="point"
    >
        <view :style="barStyle" class="b-ghhistory-wrap">
            <view class="b-ghhistory-left">
                <view
                    v-if="micon"
                    :style="{
                        color: iconColor,
                        fontSize: iconSize,
                    }"
                    class="m-icon"
                    :class="icon"
                />
                <c-icon
                    v-else
                    :name="icon"
                    font-size="16px"
                    :style="{
                        color: iconColor,
                    }"
                    class="icon"
                />
                <view :style="textStyle" class="left-text c-gap-left c-color-normal c-line-clamp1">
                    {{ text }}
                </view>
            </view>
            <view class="b-ghhistory-right">
                <view class="c-gap-right-small c-color-gray c-font-13">{{ moreText }}</view>
                <c-icon
                    v-if="showArrow"
                    name="play"
                    font-size=".13rem"
                    :style="{
                        color: '#BBB',
                    }"
                />
            </view>
        </view>
    </navigate>
</template>

<script>
/**
 * @file 历史记录、信息展示灰色bar
 * @author zhangeryi@baidu.com
 */

import Icon from '@baidu/med-ui/components/Icon/Icon';
import Navigate from './navigate';
import {ubcSend} from '@utils/log';

export default {
    mounted() {},
    config: {
        component: true
    },
    props: {
        barStyle: {
            type: Object
        },
        // 是否使用医疗icon
        micon: {
            type: Boolean,
            default: true
        },
        icon: {
            type: String
        },
        iconColor: {
            type: String
        },
        iconSize: {
            type: String,
            default: '16px'
        },
        text: {
            type: String
        },
        textStyle: {
            type: Object
        },
        url: {
            type: String
        },
        path: {
            type: String
        },
        openType: {
            type: String,
            default: 'navigate'
        },
        extra: {
            type: Object,
            default() {
                return {};
            }
        },
        moreText: {
            type: String,
            default: '查看'
        },
        showArrow: {
            type: Boolean,
            default: true
        },
        ubc: {
            type: Object,
            default: () => {
                return {
                    page: '',
                    type: '',
                    value: '',
                    ext: {
                        pd: '',
                        'value_type': '',
                        'value_id': ''
                    }
                };
            }
        }
    },
    components: {
        navigate: Navigate,
        'c-icon': Icon
    },
    options: {
        addGlobalClass: true
    },
    methods: {
        point() {
            ubcSend({
                ...this.ubc,
                ext: {
                    ...this.ubc.ext
                }
            });
        }
    }
};
</script>

<style lang="less">
.b-ghhistory {
    &-wrap {
        padding: 0 0.15rem 0 0.15rem;
        height: 0.44rem;
        line-height: 0.44rem;
        display: flex;
        justify-content: space-between;
        background-color: #f6f6f6;
        border-radius: 0.1rem;
        overflow: hidden;
    }
    .b-ghhistory-left,
    .b-ghhistory-right {
        display: flex;
        align-items: center;
        .left-text {
            white-space: nowrap;
            font-size: 14px;
        }
    }
    .b-ghhistory-right {
        flex: none;
        white-space: nowrap;
    }
    .b-ghhistory-left {
        overflow: hidden;
        image {
            width: 0.16rem;
        }
    }
}
</style>
