<template>
    <view v-if="listItem && listItem.name && listItem.section && listItem.section.length" class="insurance">
        <view
            class="c-container insurance-title"
            :style="{'padding-top': paddingTop}"
            @tap="onJumpTap(listItem.url)"
        >
            <text>{{ listItem.name }}</text>
            <c-icon v-if="listItem.url" name="right"/>
            <view
                v-else-if="listItem.feedback"
                class="insurance-feedback c-font-13"
                @tap.stop="onJumpTap(listItem.feedback.url)"
            >
                <c-icon
                    name="edit"
                    font-size="16px"
                    class="c-gap-right-small insurance-feedback-icon"
                />
                {{ listItem.feedback.text }}
            </view>
        </view>
        <slot></slot>
    </view>
    <view
        v-else
        class="insurance"
        :style="{'padding-top': paddingTop}"
    >
        <slot></slot>
    </view>
</template>

<script>
/**
* @file 保险
* @author xuhailong
*/
import {navigate} from '@utils/navigate';

import Icon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    props: {
        paddingTop: {
            'type': String,
            'default': '0.25rem'
        },
        listItem: {
            type: Object,
            default: () => {}
        },
        extra: {
            'type': Object,
            'default': () => {}
        }
    },
    components: {
        'c-icon': Icon
    },
    data() {
        return {
            
        };
    },
    methods: {
        onJumpTap(url) {
            if (url) {
                navigate({
                    url: url,
                    extra: this.extra
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
    .insurance {
        background: #fff;

        .insurance-title {
            position: relative;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: .25rem;
            padding-bottom: .05rem;
            font: 19px/29px 'PingFangSC-Medium', Arial, Helvetica, sans-serif;
        }

        .insurance-cont {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            /*padding: 0 .17rem;*/
        }

        .insurance-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            height: .8rem;
            width: calc(33.3% - 4px);
            border-radius: 8px;
            color: #fff;
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 100% 100%;

            .insurance-item-tit {
                font: 17px/27px 'PingFangSC-Medium', Arial, Helvetica, sans-serif;
            }

            .insurance-item-sub {
                font: 13px/23px 'PingFangSC-Regular', Arial, Helvetica, sans-serif;
            }
        }
        
        .insurance-feedback {
            position: absolute;
            right: 0;
            color:#fff;
            background: rgba(0, 0, 0, .4);
            padding: 3px 8px;
            border-top-left-radius: 33px;
            border-bottom-left-radius: 33px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>

