<template>
    <view @touchmove.prevent.stop>
        <modal-contianer :z-index="zIndex" :is-show="isShow">
            <!-- content -->
            <view class="msg-modal">
                <view class="msg-modal__wrap">
                    <swiper
                        v-if="messageTips && messageTips.length"
                        :circular="messageTips.length > 1 ? true : false"
                        class="msg-list__swiper"
                        @change="onSwiperChange"
                    >
                        <swiper-item
                            v-for="(item, i) in messageTips"
                            :key="i"
                            class="msg-list__swiper__item"
                        >
                            <view class="msg-item" @tap="onTap(item, i)">
                                <view class="msg-item__opacity" />
                                <view class="msg-item__header">
                                    <image
                                        class="msg-item__header__img"
                                        :src="item.content.avatar"
                                        lazy-load
                                    />
                                    <!-- eslint-disable max-len -->
                                    <view
                                        v-if="item.unreadCount"
                                        class="msg-item__header__news"
                                        :class="{
                                            numpaddingstyle: item.unreadCount >= 10 || item.unreadCount === '...',
                                        }"
                                    >
                                        <text
                                            :class="{numpositionstyle: item.unreadCount === '...'}"
                                        >
                                            {{ item.unreadCount }}
                                        </text>
                                    </view>
                                </view>
                                <view class="msg-item__cont">
                                    <view
                                        v-if="item.content.title"
                                        class="c-line-clamp1 c-color-333 msg-item__cont__name"
                                    >
                                        {{ item.content.title }}
                                    </view>
                                    <view
                                        v-if="item.content.department"
                                        class="c-line-clamp1 msg-item__cont__department"
                                    >
                                        {{ item.content.expertLevel }} {{ item.content.department }}
                                    </view>
                                    <view class="c-line-clamp1 msg-item__cont__hospital">
                                        <text v-if="item.content.hospital" class="c-gap-right-middle">
                                            {{ item.content.hospital }}
                                        </text>
                                        <c-label
                                            v-if="item.content.hospitalLevel"
                                            :text="item.content.hospitalLevel"
                                            color="green"
                                            :disable-sanjia="false"
                                        />
                                        <c-icon
                                            color="#1F1F1F "
                                            font-size="13px"
                                            name="right"
                                            class="msg-item__cont__hospital__arrowone arrowopacitytransformone"
                                        />
                                        <c-icon
                                            color="#1F1F1F "
                                            font-size="13px"
                                            name="right"
                                            class="msg-item__cont__hospital__arrowtwo arrowopacitytransformtwo"
                                        />
                                    </view>
                                    <view class="msg-item__cont__msg">
                                        <view class="c-line-clamp1">{{ item.content.desc }}</view>
                                    </view>
                                    <view class="msg-item__cont__indicator">
                                        <c-btn
                                            type="primary"
                                            primary-color="#3c76ff"
                                            background="linear-gradient(134deg, #00CFA3 0%, #00D3EA 100%)"
                                            border-radius="9px"
                                        >
                                            <text>立即查看</text>
                                        </c-btn>
                                    </view>
                                </view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
                <view class="section-indicator">
                    <indicator
                        v-if="messageTips.length > 1"
                        :length="messageTips.length"
                        :cur-index="selectIndex"
                        :selected-color="'#00C8C8'"
                        :color="'#E0E0E0'"
                    />
                </view>
                <!-- close -->
                <view class="msg-modal__position" @tap.stop="closeMessages">
                    <c-icon
                        color="#fff"
                        font-size="40px"
                        name="coupon-close"
                    />
                </view>
            </view>
        </modal-contianer>
    </view>
</template>

<script>
/**
 * @file 消息弹窗
 * @author v_caobaoing
 * @categories 通用组件
 * @tags [component]
 */

/* global getCurrentPages swan */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CLabel from '@baidu/med-ui/components/Label/Label';
import CBtn from '@baidu/med-ui/components/Button/Button';
import {request} from '../../utils/request';
import ModalContianer from './ModalContainer';
import Indicator from './indicator';
import * as conf from '../../utils/conf';

export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        CLabel,
        CBtn,
        ModalContianer,
        Indicator
    },
    props: {
        /**
         * 显示层级
         */
        zIndex: {
            type: Number,
            default: 921
        },
        /**
         * 消息列表
         */
        messageTips: {
            type: Array,
            default: () => []
        },
        /**
         * 是后显示组件
         */
        isShow: {
            type: Boolean,
            default: true
        }
    },

    data() {
        return {
            actIndex: 0,
            // 当前展示index
            selectIndex: 0
        };
    },

    methods: {
        closeMessages() {
            this.$emit('closeMessages');
        },

        onSwiperChange(e) {
            const index = e.detail.current;
            this.selectIndex = index;
        },

        onTap(section, index) {
            request({
                url: conf.apiHost + section.clickUrl,
                isNeedLogin: false,
                isFirstScreen: false
            }).then(res => {
                this.$emit('messageReadEvents', section);
            });
        }
    }
};
</script>

<style lang="less" scoped>
.msg-modal {
    position: relative;
    width: calc(100% - 83px);

    .msg-list__swiper {
        height: 334px;

        &__item {
            box-sizing: border-box;

            .msg-item {
                position: relative;

                &__opacity {
                    width: 100%;
                    height: 41px;
                    opacity: 0;
                }

                &__header {
                    position: absolute;
                    left: 50%;
                    top: 0;
                    transform: translateX(-50%);
                    width: 70px;
                    height: 70px;
                    padding: 4px;
                    border-radius: 50%;
                    background: #fff;

                    &__img {
                        width: 70px;
                        height: 70px;
                        border-radius: 50%;
                    }

                    &__news {
                        position: absolute;
                        right: 2px;
                        bottom: 2px;
                        min-width: 16px;
                        height: 16px;
                        background-color: #ff4242;
                        border-radius: 8px;
                        text-align: center;
                        text-indent: 1px;
                        line-height: 16px;
                        color: #fff;
                        font-size: 12px;
                    }

                    .numpaddingstyle {
                        padding: 0 4px;
                    }

                    .numpositionstyle {
                        position: absolute;
                        top: 0px;
                        left: 1px;
                        right: 0px;
                        bottom: 0px;
                        line-height: 9px;
                    }
                }

                &__cont {
                    text-align: center;
                    color: #555;
                    padding: 50px 25px 29px;
                    background: #fff;
                    border-radius: 21px;

                    &__name {
                        font-size: 18px;
                        font-weight: bold;
                        margin-bottom: 10px;
                    }

                    &__department {
                        color: #555;
                        margin-bottom: 2px;
                        font-size: 14px;
                    }

                    &__hospital {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        margin-bottom: 12px;
                        font-size: 14px;
                        color: #555;

                        &__arrowone {
                            position: absolute;
                            right: 20px;
                            font-weight: 700;
                        }

                        &__arrowtwo {
                            position: absolute;
                            right: 14px;
                            font-weight: 700;
                        }

                        .arrowopacitytransformone {
                            animation: myfirst 1s ease-in infinite normal;
                        }

                        .arrowopacitytransformtwo {
                            animation: mytwo 1s ease-in infinite normal;
                        }
                    }

                    &__msg {
                        padding: 18px 0;
                        background: #f8f8f8;
                        margin-bottom: 20px;
                        border-radius: 6px;
                        color: #555;
                        text-align: center;

                        &__time {
                            color: #ff6f61;
                        }
                    }
                }
            }
        }
    }

    &__position {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0%);
        bottom: -66px;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }

    .section-indicator {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0%);
        bottom: 22px;
    }
}

@keyframes myfirst {
    from {
        opacity: 0;
        transform: translate(0);
    }

    to {
        opacity: 0.12;
        transform: translate(5px, 0);
    }
}
@keyframes mytwo {
    from {
        opacity: 0.12;
        transform: translate(0);
    }

    to {
        opacity: 0.25;
        transform: translate(5px, 0);
    }
}
</style>
