<!--
 * @Description: 服务金刚位
 * @Author: wangye15
 * @Email: wangye15@baidu.com
 * @Date: 2021-11-09 11:10:21
 * @LastEditors: wangye15
 * @LastEditTime: 2021-11-17 18:01:04
-->
<template>
    <view class="service-info-wapper">
        <!-- 优势服务金刚位有数据的时候 -->
        <view
            v-if=" advantage && advantage.length"
            class="service-info"
            :class="{'service-info--flex': advantage.length === 2}"
        >
            <view
                v-for="(info, index) in advantage"
                :key="info.text + index"
                class="service-info--wrapper"
                :class="{
                    'service-info--wrapper-width': advantage.length === 2,
                    sign,
                }"
                :has-more="noMore"
                :style="{marginRight: index === 0 && advantage.length > 1 ? '.08rem' : ''}"
                @tap.stop="serviceNavigate(info)"
            >
                <view class="service-info--logo">
                    <c-image
                        has-compress
                        :src="info.icon"
                        :extra="{column: 2}"
                        width="0.48rem"
                        height="0.48rem"
                        mode="widthFix"
                        :hack-white-stroke="false"
                    />
                </view>
                <view class="service-info--text">
                    <view class="service-info--name">
                        {{ info.text }}
                    </view>
                    <view class="c-font-small service-info--desc c-line-clamp1">
                        {{ info.desc }}
                    </view>
                </view>
                <c-icon
                    v-if="advantage.length === 1"
                    name="right"
                    font-size="14px"
                    class="icon"
                />
            </view>
        </view>
        <!-- 弱势金刚位 -->
        <h-card
            v-if="serviceInfo && serviceInfo.length"
            :has-more="noMore"
            :class="sign"
        >
            <slot slot="content">
                <!-- 如果数据返回第1个数组的值里面是数组，则认为是翻页所需的二维数组 -->
                <!-- 其中有5~6，8+个的按钮数据，需要翻页 -->
                <!--
                    5~6的按钮样式
                    * * * *， * *

                    8+的按钮样式
                    * * * *， *
                    * * * *，
                -->
                <view v-if="serviceInfo && serviceInfo[0] && serviceInfo[0].length">
                    <swiper
                        :current="swiperCurrent"
                        :style="{height: serviceInfo[0].length < 8 ? '.61rem' : '1.37rem'}"
                        @change="swiperChangeCustom"
                    >
                        <swiper-item
                            v-for="(info, index) in serviceInfo"
                            :key="index + ''"
                        >
                            <view
                                class="service-info-more"
                                :class="{'service-info-more--row-gap': serviceInfo[0].length === 8}"
                            >
                                <view
                                    v-for="(i, itemIndex) in info"
                                    :key="index + itemIndex + ''"
                                    class="service-info-more--logo-text"
                                    @tap.stop="serviceNavigate(i)"
                                >
                                    <view class="service-info-more--logo">
                                        <c-avatar
                                            :src="i.icon"
                                            :size="30"
                                            border-radius="none"
                                        />
                                    </view>
                                    <view class="service-info-more--text">
                                        {{ i.text }}
                                    </view>
                                </view>
                            </view>
                        </swiper-item>
                    </swiper>
                    <view v-if="serviceInfo.length > 1" class="dots">
                        <view
                            v-for="(d, index) in serviceInfo"
                            :key="d + index + ''"
                            class="dot"
                            :class="{'active': index === swiperCurrent}"
                        />
                    </view>
                </view>
                <!-- 如果不是二维数组，则默认为一维数组 -->
                <!-- 其中有1~4和8个的按钮数据，都不需要翻页且样式不同 -->
                <!--
                    1个按钮  *
                    2个按钮  *     *
                    3个按钮  *  *  *
                    4个按钮  * * * *
                    7个按钮  * * * *
                            * * *
                    8个按钮  * * * *
                            * * * *
                -->
                <view v-else>
                    <view
                        v-if="serviceInfo.length <= 2"
                        class="service-info"
                        :class="{
                            'service-info--few-more': serviceInfo.length === 1,
                            'service-info--flex': serviceInfo.length === 2,
                        }"
                    >
                        <view
                            v-for="(info, index) in serviceInfo"
                            :key="info.text + index"
                            class="service-info--logo-text"
                            @tap.stop="serviceNavigate(info)"
                        >
                            <view class="service-info--logo">
                                <c-avatar
                                    :src="info.icon"
                                    :size="48"
                                    border-radius="none"
                                />
                            </view>
                            <view class="service-info--text">
                                <view class="service-info--name">
                                    {{ info.text }}
                                </view>
                                <view class="c-font-small service-info--desc c-line-clamp1">
                                    {{ info.desc }}
                                </view>
                            </view>
                            <c-icon
                                v-if="serviceInfo.length === 1"
                                name="right"
                                font-size="14px"
                                class="icon"
                            />
                        </view>
                    </view>
                    <view
                        v-if="serviceInfo.length === 3 || serviceInfo.length === 4 ||
                            serviceInfo.length === 7 || serviceInfo.length === 8"
                        class="service-info-more"
                        :class="{
                            'service-info-more--col3': serviceInfo.length === 3,
                            'service-info-more--row-gap': serviceInfo.length === 7 || serviceInfo.length === 8,
                        }"
                    >
                        <view
                            v-for="(info, index) in serviceInfo"
                            :key="info.text + index"
                            @tap.stop="serviceNavigate(info)"
                        >
                            <view class="service-info-more--logo">
                                <c-image
                                    has-compress
                                    :src="info.icon"
                                    :extra="{column: 1}"
                                    width="0.3rem"
                                    height="0.3rem"
                                    mode="widthFix"
                                    :hack-white-stroke="false"
                                    :is-round="false"
                                />
                            </view>
                            <view class="service-info-more--text">
                                {{ info.text }}
                            </view>
                        </view>
                    </view>
                </view>
            </slot>
        </h-card>
    </view>
</template>

<script>
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CImage from '@components/common/image';
import HCard from './Card';
import {navigate} from '@utils/navigate';
import * as Log from '../../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 优势金刚位数据
         */
        advantage: {
            type: Array,
            default: () => ([])
        },
        /**
         * 其他金刚位数据
         */
        serviceInfo: {
            type: Array,
            default: () => ([])
        },
        /**
         * 展现日志签名
         */
        sign: {
            type: String,
            default: ''
        }
    },
    components: {
        CAvatar,
        CIcon,
        HCard,
        CImage
    },
    data() {
        return {
            noMore: false,
            swiperCurrent: 0,
            isSwiper: false
        };
    },
    methods: {
        swiperChangeCustom(e) {
            this.swiperCurrent = e.detail.current;
        },
        serviceNavigate(service) {
            let url = '';
            let urlType = 0;
            if (service.swanUrl) { // 沧州市人民医院
                if (process.env.MARS_ENV === 'h5') {
                    url = service.link;
                    urlType = 2;
                } else {
                    url = service.swanUrl;
                    urlType = 1;
                }
            } else {
                url = service.link;
                urlType = service.urlType;
            }
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: service.tracedata
                }
            });
            navigate({
                url: url,
                urlType: urlType,
                log: {
                    type: 'clk',
                    value: service.tracedata
                }
            });
        },

    }
};
</script>

<style lang="less" scoped>
.service-info {
    margin: 0.08rem 0.1rem 0;

    &--wrapper {
        box-sizing: border-box;
        padding: 0.15rem 0.13rem;
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: .12rem;

        &-width {
            width: calc(50% - .04rem);
        }
    }

    &--flex {
        display: flex;
        justify-content: space-between;
    }

    &--few-more {
        margin: 0;
    }

    &--logo-text {
        display: flex;
        align-items: center;
    }

    &--logo {
        flex: 0 0 auto;
        margin-right: .08rem;
    }

    &--text {
        flex: 1;
    }

    &--name {
        font-size: .17rem;
        color: #333;
        font-weight: 500;
    }

    &--desc {
        color: #999;
    }
}

.service-info-more {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;

    &--logo-text {
        flex: 1;
    }

    &--logo {
        display: flex;
        justify-content: center;
    }

    &--text {
        margin-top: .06rem;
        color: #1f1f1f;
        font-size: .14rem;
    }

    &--row-gap {
        grid-row-gap: .15rem;
    }

    &--col3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.dots {
    display: flex;
    justify-content: center;
    margin-top: .06rem;

    .dot {
        width: .1rem;
        height: .03rem;
        background: #f5f6fa;
        border-radius: 4.5px;
    }

    .active {
        background: #4c71f1;
        border-radius: 6px;
    }
}
</style>
