<template>
    <view class="contact-wrap">
        <slot></slot>
        <!-- #ifdef MP-ALIPAY -->
        <view class="contact-button" @click="contactServicer">
            <contact-button :tnt-inst-id="config.instid" :scene="config.scene" size="1000rpx" v-if="config.type == 'aliapp'"/>
        </view>
        <!-- #endif -->
        <!-- #ifndef MP-ALIPAY -->
        <button
            type="default"
            hover-class="none"
            :open-type="openType"
            class="contact-button"
            @click="contactServicer"
            :send-message-title="sendMessageTitle"
            :send-message-path="sendMessagePath"
            :send-message-img="sendMessageImg"
            :show-message-card="true"></button>
        <!-- #endif -->
        <uni-popup ref="servicePopup" type="center">
            <view class="service-popup-wrap">
                <view class="head-wrap" @click="$refs.servicePopup.close()">
                    <text>联系客服</text>
                    <text class="iconfont icon-close"></text>
                </view>
                <view class="body-wrap">{{ siteInfo.site_tel ? '请联系客服，客服电话是' + siteInfo.site_tel : '抱歉，商家暂无客服，请线下联系' }}</view>
            </view>
        </uni-popup>
    </view>
</template>

<!-- 客服组件 -->
<script>
    export default {
        name: 'ns-contact',
        props: {
            niushop: {
                type: Object,
                default: function() {
                    return {};
                }
            },
            sendMessageTitle: {
                type: String,
                default: ''
            },
            sendMessagePath: {
                type: String,
                default: ''
            },
            sendMessageImg: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                config: null,
                openType: ''
            };
        },
        created() {
            if (this.servicerConfig) {
                // #ifdef H5
                this.config = this.servicerConfig.h5;
                // #endif

                // #ifdef MP-WEIXIN
                this.config = this.servicerConfig.weapp;
                if (this.config.type == 'weapp') this.openType = 'contact';
                // #endif

                // #ifdef MP-ALIPAY
                this.config = this.servicerConfig.aliapp;
                if (this.config.type == 'aliapp') this.openType = 'contact';
                // #endif
            }
        },
        methods: {
            /**
             * 联系客服
             */
            contactServicer() {
                if (this.config.type == 'none') {
                    this.$refs.servicePopup.open();
                }
                if (this.openType == 'contact') return;

                switch (this.config.type) {
                    case 'wxwork':
                        this.openWxWorkServiceChat();
                        break;
                    case 'third':
                        location.href = this.config.third_url;
                        break;
                    case 'niushop':
                        this.$util.redirectTo('/pages_tool/chat/room', this.niushop);
                        break;
                    default:
                        this.makePhoneCall();
                }
            },
            /**
             * 打开企业微信客服
             * @param {boolean} useOpenCustomerServiceChat 是否使用原有客服方式
             */
            openWxWorkServiceChat(useOpenCustomerServiceChat = false) {                
                // #ifdef MP-WEIXIN
                if (this.wxworkConfig?.enable && this.wxworkConfig?.contact_url && !useOpenCustomerServiceChat) {
                    // 直接使用活码链接跳转
                    wx.navigateToMiniProgram({
                        appId: 'wxeb490c6f9b154ef9', // 是企业微信官方小程序的AppID（固定值, 由腾讯企业微信团队维护, 不需要修改，用于展示"添加企业微信联系人"的官方页面）
                        path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(this.wxworkConfig.contact_url)}`,
                        success: () => {
                            console.log('跳转企业微信成功');
                        },
                        fail: (err) => {
                            console.error('跳转企业微信失败:', err);
                            // 降级处理：使用原有客服方式
                            this.fallbackToOriginalService();
                        }
                    });
                } else {
                    // 使用原有的客服会话方式
                    wx.openCustomerServiceChat({
                        extInfo: { url: this.config.wxwork_url },
                        corpId: this.config.corpid,
                        showMessageCard: true,
                        sendMessageTitle: this.sendMessageTitle,
                        sendMessagePath: this.sendMessagePath,
                        sendMessageImg: this.sendMessageImg
                    });
                }
                // #endif
                
                // #ifdef H5
                if (this.wxworkConfig?.enable && this.wxworkConfig?.contact_url) {
                    // H5环境直接跳转活码链接
                    window.location.href = this.wxworkConfig.contact_url;
                } else {
                    location.href = this.config.wxwork_url;
                }
                // #endif
            },
            
            /**
             * 降级处理：使用原有客服方式
             */
            fallbackToOriginalService() {
                uni.showModal({
                    title: '提示',
                    content: '无法直接添加企业微信客服，是否使用其他方式联系客服？',
                    success: (res) => {
                        if (res.confirm) {
                            console.log('降级处理：使用原有客服方式');
                            this.openWxWorkServiceChat(true);
                        }
                    }
                });                
            },
            /**
             * 店铺联系方式
             */
            makePhoneCall() {
                this.$api.sendRequest({
                    url: '/api/site/shopcontact',
                    success: res => {
                        if (res.code == 0 && res.data.mobile) uni.makePhoneCall({
                            phoneNumber: res.data
                                .mobile
                        });
                    }
                });
            }
        }
    };
</script>

<style lang="scss">
    .contact-wrap {
        width: 100%;
        height: 100%;
        position: relative;

        .contact-button {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 5;
            padding: 0;
            margin: 0;
            opacity: 0;
            overflow: hidden;
        }
    }

    .service-popup-wrap {
        width: 600rpx;

        .head-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30rpx;
            height: 90rpx;
        }

        .body-wrap {
            text-align: center;
            padding: 30rpx;
            height: 100rpx;
        }
    }
</style>