<template>
    <view v-if="data" class="consulting-service">
        <view
            v-if="data.banner"
            class="consulting-service__banner"
            @tap="onHandleMakePlan"
        >
            <image class="consulting-service__banner__img" :src="data.banner.imgUrl"/>
        </view>
        <view v-if="data.list && data.list.length && false" class="consulting-service__list">
            <view class="consulting-service__list__tips c-color-gray c-font-normal">
                {{ data.tips }}
            </view>
            <view
                v-for="(item, index) in data.list"
                :key="index"
                class="consulting-service__list__item"
            >
                <view v-if="item" class="base-infor">
                    <image class="base-infor__head-picture" :src="item.headPicture"/>
                    <view class="base-infor__right">
                        <view class="base-infor__right__name-company c-width">
                            <text class="name c-font-medium c-color-title c-font-wb">{{ item.name }}</text>
                            <text class="company c-color-titl">{{ item.company }}</text>
                        </view>
                        <view class="base-infor__right__label">
                            <c-icon
                                name="like"
                                font-size="15px"
                                color="#525252"
                            />
                            <text class="base-infor__right__label__satisfied c-font-normal c-color-gray	">满意度</text>
                            <text class="c-font-normal c-color-main	">{{ item.satisfied }}分</text>
                            <view class="divider-line"/>
                            <text class="c-font-normal c-color-gray	">服务</text>
                            <text class="c-font-normal c-color-main	">{{ item.peopleNum }}</text>
                            <text class="c-font-normal c-color-gray	">人</text>
                            <view class="divider-line"/>
                            <text class="c-font-normal c-color-gray	">从业</text>
                            <text class="c-font-normal c-color-main	">{{ item.workingTime }}</text>
                            <text class="c-font-normal c-color-gray	">年</text>
                        </view>
                    </view>
                </view>
                <view v-if="item" class="extra-infor">
                    <view class="extra-infor__des c-color c-font-medium-less">
                        {{ item.des }}
                    </view>
                    <view class="extra-infor__op c-tac c-font-normal">
                        {{ item.btnText }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 保险商城定向咨询
 * @author yinlejia
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
    },
    props: {
        /* 数据 */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /** 日志 */
        log: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {

        };
    },
    methods: {
        onHandleMakePlan() {
            ubcSend({
                type: 'clk',
                value: 'consult',
                ext: {
                    pd: 'bx',
                    page_type: 'bx-home'
                }
            });
            this.$emit('onHandleMakePlan', this.data);
        }
    }
};
</script>

<style lang="less" scoped>
.consulting-service {
    padding: 0 0.13rem 0.12rem 0.13rem;
    &__banner {
        height: 1.42rem;
        border-radius: 0.06rem;
        overflow: hidden;
        margin-top: -0.04rem;
        &__img {
            width: 100%;
            height: 100%;
        }
    }
    &__list {
        &__tips {
            margin: 0.17rem 0 0.11rem 0;
        }
        &__item {
            display: inline-block;
            margin-bottom: 0.15rem;
            .base-infor {
                display: flex;
                height: 0.52rem;
                &__head-picture {
                    width: 0.52rem;
                    height: 0.52rem;
                    margin-right: 0.08rem;
                    flex: 1 0 0.52rem;
                }
                &__right {
                    display: flex;
                    flex-wrap: wrap;
                    align-content: center;
                    &__name-company {
                        margin-bottom: 0.02rem;
                        .name {
                            margin-right: 0.09rem;
                        }
                    }
                    &__label {
                        display: flex;
                        align-items: center;
                        &__satisfied {
                            margin: 0 0.03rem;
                        }
                    }
                }
                
            }
            .extra-infor {
                float: right;
                margin-left: 0.6rem;
                &__des {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    /*! autoprefixer: off */
                    -webkit-box-orient: vertical;
                }
                &__op {
                    background-color: #00C8C8;
                    width: 0.76rem;
                    height: 0.28rem;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 0.28rem;
                    border-radius: 0.14rem;
                    margin-top: 0.05rem;
                }
            }
        }
    }
}
.divider-line {
    width: 0.01rem;
    height: 0.14rem;
    background-color: #eee;
    margin: 0 0.05rem;
}
</style>
