<template>
    <c-popup
        row-tile
        :show="show"
        :z-index="'921'"
        :show-close="true"
        :show-close-handler="false"
        :title="title"
        border-radius="15px"
        close-icon="close-circle"
        stop-scroll-through
        max-height="auto"
        height="auto"
        @close="handlePopupClose"
        @masktap="handlePopupClose"
    >
        <view class="service">
            <view
                v-for="(item, index) in list"
                :key="index"
                class="service__item"
            >
                <view v-if="item.type === 'workingTime'" class="service__time border c-font-15 c-gap-inner-top-large c-gap-inner-left-xll c-gap-inner-right-xll">
                    <view
                        v-for="(text, index) in item.data"
                        :key="index"
                        :class="{'c-gap-top-small': index !== 0}"
                    >{{ text }}</view>
                </view>
                <view
                    v-if="item.type === 'onlineService'"
                    class="service-text border c-font-17"
                    @tap="onOnline(item.data)"
                >
                    <view>{{ item.data.text || item.data[0].text }}</view>
                </view>
                <view v-if="item.type === 'telephones'">
                    <view
                        v-for="(phone,index) in item.data"
                        :key="index"
                        class="service-text border"
                        @tap="onPhone(phone)"
                    >{{ phone.text }}</view>
                </view>
            </view>
            <!-- 取消 -->
            <view class="service__cancel border c-font-17 c-gap-top" @tap="handlePopupClose">取消</view>
        </view>
    </c-popup>
</template>
<script>
/**
 * @file 更多门店popup
 * @author mayifan02@baidu.com
 * @categories 业务组件
 * @tags [component]
*/
/* global Page swan  getApp */
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import {navigate} from '@utils/navigate';
import {send} from '@utils/log';
export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    components: {
        CPopup
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            'type': Boolean,
            'default': false
        },
        /**
         * 标题
         */
        title: {
            'type': String,
            'default': '联系客服'
        },
        /**
         * 数据
         */
        list: {
            'type': Array,
            'default':() => {
                return [];
            }
        },
        /**
         * 日志
         */
        extra: {
            'type': Object,
            'default': () => {
                return {
                    type: 'vacc-storeinfo'
                };
            }
        },
    },
    data() {
        return {
            screenHeight: 0,
            maxHeight: 0
        };
    },
    methods: {
        handlePopupClose() {
            /**
             * 关闭弹窗
             *
             * @event close
             */
            this.$emit('onPopupShow', false);
        },
        // 在线客服
        onOnline(item) {
            /**
             * 关闭弹窗
             */
            if (Array.isArray(item)) {
                item = item[0];
            }
            this.$emit('onPopupShow', false);
            navigate({
                url: item.url, 
                extra: {
                    type: Object.assign({itemType: 'onlineService'}, this.extra)
                }
            });
        },
        // 拨打电话
        onPhone(item) {
            send({
                type: 'b',
                action: 'service-item',
                extra: Object.assign({itemType: 'phone', tel: item.tel}, this.extra)
            });
            this.$api.makePhoneCall({
                phoneNumber: item.tel
            });
        }
    }
};
</script>
<style lang="less" scoped>
.border {
    position: relative;
    &::after{
        content: '';
        position: absolute;
        background-color: #f1f1f1;
        display: block;
        width: 100%;
        height: 1px; /*no*/
        transform: scale(1, 0.5);
        top: 0;
        left: 0;
    }
}
.service {
    margin-top: 0.03rem;
    text-align: center;
    background: #f5f5f5;
    &__item {
        background: #fff;
    }
    &__time {
        color: #525252;
        padding-bottom: 0.12rem;
    }
    &-text {
        font-size: 0.17rem;
        line-height: 0.27rem;
        padding: 0.12rem 0;
        color: #4E6EF2;
    }
    &__cancel {
        text-align: center;
        color: #999;
        line-height: 0.48rem;
        height: 0.48rem;
        background: #fff;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>
