{extend name="public/container"}
{block name="title"}客服工作台{/block}
{block name="head"}
<style>
    @import "/static/css/google.min.css";

    .head-box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        height: 45px;
        background: linear-gradient(85deg, #3875ea 0%, #1890fc 100%);
    }

    .head-box span {
        position: absolute;
        width: 45px;
        height: 100%;
        left: 0;
        top: 0;
        text-align: center;
        line-height: 45px;
    }

    .chat-box {
        display: flex;
        flex-direction: column;
        height: 100%;
        height: 100vh;
        background: #f0f1f2;
    }

    .chat-box .head-box {
        background: linear-gradient(85deg, #3875ea 0%, #1890fc 100%);
    }

    .chat-box .head-box .title-hd {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 43px;
        padding: 0 0.3rem;
        color: #fff;
    }

    .chat-box .head-box .title-hd .icon-fanhui {
        position: absolute;
        left: 0.3rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .chat-box .head-box .title-hd .icon-gengduo2 {
        /* #ifdef MP */
        position: absolute;
        right: 2.1rem;
        top: 50%;
        transform: translateY(-50%);
        /* #endif */
    }

    .chat-box .scroll-box {
        flex: 1;
    }

    .chat-box .footer-box {
        display: flex;
        align-items: center;
        height: 1rem;
        padding: 0 0.3rem;
        color: rgba(0, 0, 0, 0.8);
        background: #f7f7f7;
    }

    .chat-box .footer-box .words .iconfont {
        font-size: 0.5rem;
    }

    .chat-box .footer-box .input-box {
        display: flex;
        align-items: center;
        width: 4.92rem;
        height: 0.64rem;
        padding-right: 0.05rem;
        margin-left: 0.18rem;
        background-color: #fff;
        border-radius: 0.32rem;
        overflow: hidden;
    }

    .chat-box .footer-box .input-box input {
        flex: 1;
        padding-left: 0.2rem;
        height: 100%;
        border: transparent !important;
    }

    .chat-box .footer-box .input-box .ivu-input,
    .chat-box .footer-box .input-box .ivu-input:hover,
    .chat-box .footer-box .input-box .ivu-input:focus {
        border: transparent;
        box-shadow: none;
    }

    .chat-box .footer-box .input-box .iconfont {
        font-size: 0.5rem;
        color: #ccc;
        font-weight: normal;
    }

    .chat-box .footer-box .input-box .isSend {
        color: #3875ea;
    }

    .chat-box .footer-box .emoji .iconfont {
        margin-left: 0.18rem;
        font-size: 0.5rem;
    }

    .chat-box .footer-box .more .iconfont {
        margin-left: 0.18rem;
        font-size: 0.5rem;
    }

    .tool-wrapper {
        display: flex;
        justify-content: space-between;
        padding: 0.45rem 0.6rem;
        background: #fff;
        font-size: 0.24rem;
    }

    .tool-wrapper .tool-item {
        text-align: center;
    }

    .tool-wrapper .tool-item img {
        width: 1.04rem;
        height: 1.04rem;
    }

    .slider-banner {
        padding-bottom: 0.25rem;
        background: #fff;
    }

    .slider-banner .em {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        margin: 0.4rem 0 0 0.5rem;
    }

    .words-mask {
        z-index: 50;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    .words-mask .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 1.14rem;
        bottom: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 0.06rem 0.06rem 0px 0px;
    }

    .words-mask .content .title-box {
        padding: 0 0.3rem 0.3rem;
        position: relative;
        border-bottom: 1px solid #f5f6f9;
    }

    .words-mask .content .title-box .tab-box {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 0.4rem 2.2rem 0.3rem;
        font-size: 0.32rem;
        color: #9f9f9f;
    }

    .words-mask .content .title-box .tab-box .on {
        color: #3875ea;
        font-weight: bold;
    }

    .words-mask .content .title-box .tab-box .right-icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .words-mask .content .title-box .tab-box .right-icon .iconfont {
        margin-left: 0.2rem;
        font-size: 0.48rem;
        color: #c8cad0;
    }

    .words-mask .content .title-box .input-box {
        display: flex;
        align-items: center;
        width: 6.9rem;
        height: 0.64rem;
        padding-right: 0.05rem;
        margin-left: 0.18rem;
        border-radius: 0.32rem;
        overflow: hidden;
    }

    .words-mask .content .title-box .input-box .ivu-input {
        background: #f5f6f9;
    }

    .words-mask .content .title-box .input-box .ivu-input,
    .words-mask .content .title-box .input-box .ivu-input:hover,
    .words-mask .content .title-box .input-box .ivu-input:focus {
        border: transparent;
        box-shadow: none;
    }

    .words-mask .content .title-box .icon-cha1 {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .words-mask .content .scroll-box {
        flex: 1;
        display: flex;
        overflow: hidden;
    }

    .words-mask .content .scroll-box .scroll-left {
        width: 1.76rem;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background: #f5f6f9;
    }

    .words-mask .content .scroll-box .scroll-left .left-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 1.09rem;
        color: #282828;
        font-size: 0.26rem;
    }

    .words-mask .content .scroll-box .scroll-left .left-item.active {
        color: #3875ea;
        background: #fff;
    }

    .words-mask .content .scroll-box .scroll-left .left-item.active:after {
        content: ' ';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0.06rem;
        height: 0.46rem;
        background: #3875ea;
    }

    .words-mask .content .scroll-box .scroll-left .left-item.add_cate {
        color: #9f9f9f;
        font-size: 0.26rem;
    }

    .words-mask .content .scroll-box .scroll-left .left-item.add_cate .iconfont {
        margin-right: 0.1rem;
        font-size: 0.24rem;
    }

    .words-mask .content .scroll-box .right-box {
        flex: 1;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .words-mask .content .scroll-box .msg-item {
        padding: 0.25rem 0.3rem;
        color: #888;
        font-size: 0.28rem;
    }

    .words-mask .content .scroll-box .msg-item .title {
        margin-right: 0.2rem;
        color: #282828;
    }

    .words-mask .content .scroll-box .msg-item.add-mg {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 0.28rem;
        padding: 0.15rem 0.3rem;
    }

    .words-mask .content .scroll-box .msg-item.add-mg .iconfont {
        font-size: 0.36rem;
        margin-right: 0.1rem;
    }

    .chat-scroll-box {
        flex: 1;
        overflow: hidden;
    }

    .chat-scroll-box .day-box {
        margin-bottom: 0.2rem;
        font-size: 0.24rem;
        color: #999;
        text-align: center;
    }

    .chat-scroll-box .chat-item {
        display: flex;
        margin-bottom: 0.36rem;
        font-size: 0.28rem;
    }

    .chat-scroll-box .chat-item .avatar {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
    }

    .chat-scroll-box .chat-item .msg-box {
        display: flex;
        align-items: center;
        max-width: 4.52rem;
        margin-left: 0.22rem;
        padding: 0.1rem 0.24rem;
        background: #fff;
        border-radius: 0.14rem;
        word-break: break-all;
        color: #333;
    }

    .chat-scroll-box .chat-item .img-box {
        width: 2.7rem;
        margin-left: 0.22rem;
    }

    .chat-scroll-box .chat-item .img-box img {
        width: 2.7rem;
        border-radius: 6px;
    }

    .chat-scroll-box .chat-item .product-box {
        width: 4.52rem;
        background-color: #fff;
        border-radius: 0.14rem;
        overflow: hidden;
        margin-left: 0.22rem;
    }

    .chat-scroll-box .chat-item .product-box img {
        width: 4.52rem;
    }

    .chat-scroll-box .chat-item .product-box .info {
        padding: 0.16rem 0.26rem;
    }

    .chat-scroll-box .chat-item .product-box .info .price {
        font-size: 0.36rem;
        color: #f74c31;
    }

    .chat-scroll-box .chat-item .product-box .info .price text {
        font-size: 0.28rem;
    }

    .chat-scroll-box .chat-item .order-box {
        width: 4.52rem;
        margin-left: 0.22rem;
        background-color: #fff;
        border-radius: 0.14rem;
    }

    .chat-scroll-box .chat-item .order-box .title {
        padding: 0.15rem 0.2rem;
        font-size: 0.26rem;
        color: #282828;
        border-bottom: 1px solid #eceff8;
    }

    .chat-scroll-box .chat-item .order-box .info {
        display: flex;
        padding: 0.2rem;
    }

    .chat-scroll-box .chat-item .order-box .info img {
        width: 1.24rem;
        height: 1.24rem;
        border-radius: 0.06rem;
    }

    .chat-scroll-box .chat-item .order-box .info .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 0.16rem;
    }

    .chat-scroll-box .chat-item .order-box .info .product-info .name {
        font-size: 0.26rem;
    }

    .chat-scroll-box .chat-item .order-box .info .product-info .price {
        font-size: 0.3rem;
        color: #f74c31;
    }

    .chat-scroll-box .chat-item.right-box {
        flex-direction: row-reverse;
    }

    .chat-scroll-box .chat-item.right-box .msg-box {
        margin-left: 0;
        margin-right: 0.22rem;
        background-color: #9cec60;
    }

    .chat-scroll-box .chat-item.right-box .img-box {
        margin-left: 0;
        margin-right: 0.22rem;
    }

    .chat-scroll-box .chat-item.right-box .product-box {
        margin-left: 0;
        margin-right: 0.22rem;
    }

    .chat-scroll-box .chat-item.right-box .order-box {
        margin-left: 0;
        margin-right: 0.22rem;
    }

    .chat-scroll-box .chat-item .em {
        margin: 0;
    }

    .transfer-mask {
        z-index: 30;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .transfer-mask .content {
        position: absolute;
        left: 0;
        bottom: 0;
        transform: translateY(100%);
        top: 2.5rem;
        right: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 0.16rem 0.16rem 0px 0px;
    }

    .transfer-mask .content.on {
        animation: up 0.2s linear;
        animation-fill-mode: forwards;
    }

    .transfer-mask .content .title {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.1rem;
        font-size: 0.32rem;
        font-weight: bold;
        color: #282828;
    }

    .transfer-mask .content .title .iconfont {
        position: absolute;
        right: 0.3rem;
        top: 50%;
        transform: translateY(-50%);
        color: #c8cad0;
        font-size: 0.44rem;
    }

    .transfer-mask .content .list-wrapper {
        flex: 1;
        padding-left: 0.3rem;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .transfer-mask .content .list-wrapper .list-item {
        display: flex;
        align-items: center;
        padding: 0.16rem 0;
        border-bottom: 1px solid #f0f2f7;
    }

    .transfer-mask .content .list-wrapper .list-item .check-box {
        width: 0.72rem;
    }

    .transfer-mask .content .list-wrapper .list-item .avatar-box img {
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 0.06rem;
    }

    .transfer-mask .content .list-wrapper .list-item .nickName {
        margin-left: 0.28rem;
        color: #282828;
        font-size: 0.3rem;
        font-weight: bold;
    }

    .transfer-mask .content .btn {
        width: 6.9rem;
        height: 0.86rem;
        margin: 0.5rem auto;
        color: #fff;
        background: #3875ea;
        font-size: 0.3rem;
        border-radius: 0.43rem !important;
    }

    @keyframes up {
        0% {
            transform: translateY(100%);
        }

        100% {
            transform: translateY(0);
        }
    }

    .emoji-outer {
        position: absolute;
        right: .5rem;
        bottom: .3rem;
        width: .5rem;
        height: .5rem;
    }
</style>
<script>
    document.documentElement.style.fontSize = "calc(100vw/7.5)";
</script>
{/block}
{block name="content"}
<div class="chat-box" id="app" v-cloak>
    <div class="head-box">
        <div class="back" @click="goBack"><span class="iconfont iconfanhui"></span></div>
        <div class="title">{{nickname}} - 对话详情</div>
    </div>
    <div class="chat-scroll-box">
        <vue-scroll :ops="ops" ref="scrollBox" @refresh-activate="handleActivate" @refresh-start="handleStart" @refresh-before-deactivate="handleBeforeDeactivate" @refresh-deactivate="handleDeactivate">
            <div class="slot-refresh" slot="refresh-deactive"></div>
            <div class="slot-refresh" slot="refresh-beforeDeactive"></div>
            <div id="chatBox" class="chat" ref="chat" style="padding: .3rem .3rem 0;">
                <div v-for="(item,index) in records" :key="index" :id="`chat_${item.id}`">
                    <div class="day-box" v-if="item.show">{{item.time}}</div>
                    <div class="day-box" v-if="item.msn_type == 24 && item.kefu_info">已将用户转接到{{item.kefu_info.nickname}}</div>
                    <div class="chat-item" :class="{'right-box': item.is_kefu_send && item.uid == kefuInfo.id}" v-else-if="item.msn_type != 24">
                        <img class="avatar" :src="item.avatar" mode="">
                        <!-- 消息 -->
                        <div class="msg-box" v-if="item.msn_type==1" v-html="item.msn"></div>
                        <!-- 图片 -->
                        <div class="img-box" v-if="item.msn_type==3" v-viewer><img :src="item.msn" mode="widthFix"></div>
                        <!-- 商品 -->
                        <div class="product-box" v-if="item.msn_type==5">
                            <img :src="item.productInfo.image" mode="widthFix">
                            <div class="info">
                                <div class="price"><span>￥</span>{{item.productInfo.price}}</div>
                                <div class="name line2">{{item.productInfo.store_name}}</div>
                            </div>
                        </div>
                        <!-- 订单 -->
                        <div class="order-box" v-if="item.msn_type==6">
                            <div class="title">订单ID: {{item.orderInfo.order_id}}</div>
                            <div class="info">
                                <img :src="item.orderInfo.cartInfo[0].productInfo.image">
                                <div class="product-info">
                                    <div class="name line2">{{item.orderInfo.cartInfo[0].productInfo.store_name}}</div>
                                    <div class="price">¥{{item.orderInfo.cartInfo[0].productInfo.price}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </vue-scroll>
    </div>
    <div class="footer-box">
        <!-- <div class="words" @click="showWords"><span class="iconfont iconhuashu1"></span></div> -->
        <div class="input-box">
            <i-input v-model="con" placeholder="请输入内容" style="font-size: .28rem"></i-input>
            <span class="iconfont iconfasong" @click="sendText" :class="{isSend:isSend}"></span>
        </div>
        <div class="emoji" @click="openBox(1)"><span class="iconfont iconbiaoqing2"></span></div>
        <div class="more" @click="openBox(2)"><span class="iconfont icongengduozhankai1"></span></div>
    </div>
    <!-- 工具 -->
    <div class="tool-wrapper" v-if="isTool">
        <div class="tool-item">
            <Upload :show-upload-list="false" class="mr10 mb10" :before-upload="beforeUpload" :format="['jpg','jpeg','png','gif']" style="margin-top: 1px;display: inline-block">
                <img src="/kefu-assets/assets/images/tool-01.png" mode="">
                <div>图片</div>
            </Upload>

        </div>
        <div class="tool-item" @click="goTransfer">
            <img src="/kefu-assets/assets/images/tool-02.png" mode="">
            <div>转接</div>
        </div>
        <div class="tool-item" @click="goAdminOrder">
            <img src="/kefu-assets/assets/images/tool-03.png" mode="">
            <div>交易订单</div>
        </div>
        <!-- <div class="tool-item" @click="goodsInfo">
            <img src="/kefu-assets/assets/images/tool-04.png" mode="">
            <div>商品信息</div>
        </div> -->
    </div>
    <!-- 表情 -->
    <div class="banner slider-banner" v-show="isSwiper">
        <swiper class="swiper-wrapper" ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="(emojiList, index) in emojiGroup" :key="index">
                <i class="em" :class="emoji" v-for="emoji in emojiList" :key="emoji" @click="addEmoji(emoji)"></i>
            </swiper-slide>
        </swiper>
    </div>
    <!-- 常用语 -->
    <!-- <words :isWords="isWords" @closeBox="closeBox" @selectMsg="selectMsg"></words> -->
    <!-- 转接 -->
    <div class="transfer-mask" v-if="isTransfer">
        <div class="content" :class="{on:isTransfer}">
            <div class="title">转接客服<span class="iconfont iconcha" @click="closeTransfer"></span></div>
            <div class="list-wrapper">
                <radio-group v-model="activeKF">
                    <Radio class="list-item" v-for="(item,index) in transferList" :label="item.id" :key="index">
                        <div class="avatar-box">
                            <img :src="item.avatar" alt="">
                        </div>
                        <p class="nickName">{{item.nickname}}</p>
                    </Radio>
                </radio-group>
            </div>
            <i-button class="btn" @click="confirm">确定</i-button>
        </div>

    </div>
</div>
{/block}
{block name="script"}
<script>
    window.$P = JSON.parse.bind(JSON);

    const mp3 = new Audio("/kefu-assets/assets/audio/notice.wav");

    const chunk = function(arr, num) {
        num = num * 1 || 1;
        var ret = [];
        arr.forEach(function(item, i) {
            if (i % num === 0) {
                ret.push([]);
            }
            ret[ret.length - 1].push(item);
        });
        return ret;
    };

    require([
        "vue",
        "kefu-assets/api/kefu",
        "kefu-assets/libs/socket",
        "iview",
        "dayjs",
        "v-viewer",
        "happy-scroll",
        "vue-scroll",
        "kefu-assets/components/empty/index",
        "kefu-assets/components/mobile/words/index",
        "kefu-assets/libs/emoji",
        "vue-awesome-swiper",
    ], (Vue, kefuApi, Socket, iView, dayjs, VueViewer, happyScroll, vueScroll, empty, words, emojiList, vueAwesomeSwiper) => {
        Vue.use(vueAwesomeSwiper);
        Vue.use(happyScroll.default);
        Vue.use(vueScroll);
        Vue.use(iView);
        Vue.use(VueViewer.default);

        Vue.prototype.bus = new Vue();
        Vue.prototype.$socket = Socket;

        const kefuInfo = $P(`{$kefuInfo}`);
        const userInfo = $P(`{$userInfo}`);

        new Vue({
            el: "#app",
            data() {
                return {
                    ops: {
                        vuescroll: {
                            mode: 'slide',
                            enable: false,
                            auto: false,
                            autoLoadDistance: 0,
                            pullRefresh: {
                                enable: true,
                                auto: false,
                                autoLoadDistance: 0,
                                tips: {
                                    deactive: '',
                                    active: '上拉加载更多',
                                    start: 'Loading...',
                                    beforeDeactive: ' '
                                },
                            },
                            pushLoad: {
                                enable: false,

                            }
                        },
                        bar: {
                            background: '#393232',
                            opacity: '.5',
                            size: '2px'
                        }
                    },
                    swiperOptions: {},
                    status: false,
                    loading: false,
                    isTool: false,
                    isSwiper: false,
                    isWords: false,
                    autoplay: false,
                    circular: true,
                    interval: 3000,
                    duration: 500,
                    emojiGroup: chunk(emojiList, 21),

                    con: '',
                    toUid: "{$userInfo.uid}",
                    limit: 15,
                    upperId: 0,
                    chatList: [],
                    kefuInfo,
                    userInfo,
                    scrollTop: 0,
                    active: true,
                    isScroll: true,
                    oldHeight: 0,
                    selector: '',
                    transferList: [], //转接列表
                    isTransfer: false,
                    uploadData: {}, // 上传参数
                    header: {},
                    fileUrl: '',
                    tourist: 0,
                    activeKF: ''
                }
            },
            components: {
                words
            },
            computed: {
                isSend() {
                    if (this.con.length == 0) {
                        return false
                    } else {
                        return true
                    }
                },
                records() {
                    return this.chatList.map((item, index) => {
                        item.time = dayjs(item.add_time * 1000).format('MMMDo h:mm')
                        if (index) {
                            if (
                                item.add_time -
                                this.chatList[index - 1].add_time >=
                                300
                            ) {
                                item.show = true;
                            } else {
                                item.show = false;
                            }
                        } else {
                            item.show = true;
                        }
                        return item;
                    });
                },
            },
            created() {
                this.toUid = "{$userInfo.uid}";
                this.nickname = "{$userInfo.nickname}";

                window.document.title = `${this.nickname} - 对话详情`;
                this.getChatList();

                this.getToken()
                    .then(token => {
                        if (!token) return;
                        this.$socket.then(ws => {
                            ws.send({
                                type: "kefu_login",
                                data: token
                            });
                            // 消息接收
                            ws.$on(["reply", "chat"], data => {
                                if (!data.is_kefu_send &&
                                    data.uid != "{$userInfo.uid}") return;

                                if (data.msn_type == 1 || data.msn_type == 2) {
                                    data.msn = this.replace_em(data.msn)
                                }
                                if (data.msn_type == 5) return
                                this.chatList.push(data)

                                this.$refs["scrollBox"].refresh();
                                this.$nextTick(() => {
                                    this.scrollBom()
                                })
                            });

                            ws.$on("socket_error", () => {
                                this.$util.Tips({
                                    title: '连接失败'
                                })
                            });

                            ws.$on("request_transfer", (data) => {
                                this.$Modal.confirm({
                                    title: "请求转接用户",
                                    content: data.nickname + "请求将用户转接给您，是否同意？",
                                    cancelText: "拒绝",
                                    onOk: () => {
                                        ws.send({
                                            type: "accept_transfer",
                                            data: {
                                                kefu_id: data.kefu_id,
                                                uid: data.uid
                                            }
                                        });
                                    },
                                    onCancel: () => {
                                        ws.send({
                                            type: "reject_transfer",
                                            data: {
                                                kefu_id: data.kefu_id,
                                                uid: data.uid
                                            }
                                        })
                                    }
                                });
                            });

                            ws.$on("accept_transfer", (data) => {
                                this.$Notice.success({
                                    title: "同意转接通知",
                                    desc: data.nickname + "已同意您的转接请求"
                                });
                                ws.send({
                                    type: "chat",
                                    data: {
                                        msn_type: 24,
                                        msn: data.kefu_id,
                                        to_uid: data.uid,
                                    }
                                });
                            });
                            ws.$on("reject_transfer", (data) => {
                                this.$Notice.error({
                                    title: "拒绝转接通知",
                                    desc: data.nickname + "已拒绝您的转接请求"
                                });
                            });
                        });
                    });
            },
            methods: {
                async getToken() {
                    try {
                        const res = await kefuApi.getToken();
                        return res.data.token;
                    } catch (err) {
                        this.$Message.error(err.msg);
                        return false;
                    }
                },
                goBack() {
                    window.history.length > 1 ? window.history.back() : (window.location.href = "{:Url('index')}");
                },
                update(e) {
                    // 上传照片
                    let file = e;
                    let param = new FormData(); // 创建form对象
                    param.append("filename", "file"); // 通过append向form对象添加数据进去
                    param.append("file", file); // 通过append向form对象添加数据进去

                    kefuApi.uploadImg(param)
                        .then(res => {
                            if (res.code === 200) {
                                this.$Message.success("上传成功!");
                                this.sendMsg(res.data.url, 3);
                            } else {
                                this.$Message.error(res.msg);
                            }
                        })
                        .catch(err => {

                        });
                },
                // 上传之前
                beforeUpload(e) {
                    this.update(e);
                    return false;
                },
                // 滚动到底部
                scrollBom() {
                    setTimeout(res => {
                        let num = parseFloat(document.getElementById('chatBox').offsetHeight)
                        if (this.$refs["scrollBox"]) {
                            this.$refs["scrollBox"].scrollTo({
                                    y: num
                                },
                                300
                            );
                        }

                    }, 300)
                },
                // 底部功能区打开
                openBox(key) {
                    if (key == 1) {
                        this.isTool = false
                        this.isSwiper = !this.isSwiper
                    } else {
                        this.isSwiper = false
                        this.isTool = !this.isTool
                    }
                    this.$refs["scrollBox"].refresh();
                    this.$nextTick(() => {
                        this.scrollBom();
                    })
                },
                showWords() {
                    this.isWords = true
                },
                // 转接
                goTransfer() {
                    this.isTransfer = true;
                    this.getTransferList();
                },
                // 转接关闭
                closeTransfer() {
                    this.isTransfer = false
                },
                // 转接确认
                confirm() {
                    if (this.activeKF) {
                        this.$socket.then(ws => {
                            ws.send({
                                data: {
                                    kefu_id: this.activeKF,
                                    uid: this.toUid
                                },
                                type: "request_transfer"
                            });
                        });

                        this.isTransfer = false;
                    } else {
                        this.$Message.error('请选择转接客服')
                    }
                },
                // 表情点击
                addEmoji(item) {
                    let val = `[${item}]`
                    this.con += val
                },
                // 聊天表情转换
                replace_em(str) {
                    str = str.replace(/\[em-([a-z_]*)\]/g, "<span class='em em-$1'/></span>");
                    return str;
                },
                // 获取聊天列表
                getChatList() {
                    kefuApi.serviceList({
                        limit: this.limit,
                        uid: this.toUid,
                        upper_id: this.upperId,
                        is_tourist: 0
                    }).then(res => {
                        var sH = 0
                        res.data.forEach(el => {
                            if (el.msn_type == 1 || el.msn_type == 2) {
                                el.msn = this.replace_em(el.msn)
                            }
                        })
                        let selector = ''
                        if (this.upperId == 0) {
                            selector = `chat_${res.data[res.data.length - 1].id}`;
                        } else {
                            selector = `chat_${this.chatList[0].id}`;
                        }
                        this.selector = selector
                        this.chatList = [...res.data, ...this.chatList];
                        this.loading = false
                        this.isScroll = res.data.length >= this.limit
                        this.$nextTick(() => {
                            this.$refs["scrollBox"].refresh();
                            if (this.upperId == 0) {
                                setTimeout(res => {
                                    let num = parseFloat(document.getElementById(selector).offsetTop) - 60
                                    this.$refs["scrollBox"].scrollTo({
                                            y: num
                                        },
                                        0
                                    );
                                }, 300)
                            }
                        })
                    })
                },
                // 发送消息
                sendText() {
                    if (!this.isSend) {
                        return this.$Message.error('请输入内容')
                    }
                    this.sendMsg(this.con, 1);
                    this.con = ''
                },
                // ws发送
                sendMsg(msn, msn_type) {
                    let obj = {
                        type: 'chat',
                        data: {
                            msn,
                            msn_type,
                            to_uid: this.toUid
                        }
                    }
                    this.$socket.then(ws => {
                        ws.send(obj);
                    })
                },
                // 图片上传
                uploadImg() {
                    let self = this
                    self.$util.uploadImageOne('upload/image', function(res) {
                        if (res.status == 200) {
                            self.sendMsg(res.data.url, 3)
                        }
                    });
                },
                // 常用于选择
                selectWords(item) {
                    this.isWords = false
                    this.sendMsg(item.message, 1)
                },
                // 管理员订单
                goAdminOrder() {
                    window.location.href = "{:Url('mobile_order')}?uid=" + this.toUid;
                },
                // 滚动到底部
                height() {
                    let self = this
                    var scrollTop = 0
                    let info = uni.createSelectorQuery().select(".chat");
                    setTimeout(res => {
                        info.boundingClientRect(function(data) { //data - 各种参数
                            scrollTop = data.height
                            if (self.active) {
                                self.scrollTop = parseInt(scrollTop) + 500
                            } else {
                                self.scrollTop = parseInt(scrollTop) + 100
                            }
                        }).exec()
                    }, 1000)
                },
                // 转接列表
                getTransferList() {
                    kefuApi.transferList({
                        uid: this.toUid
                    }).then(res => {
                        this.transferList = res.data;
                    })
                },
                // 关闭常用语
                closeBox() {
                    this.isWords = false
                },
                // 选择话术
                selectMsg(data) {
                    this.con += data
                    this.isWords = false
                },
                handleActivate(vm, refreshDom) {
                    this.upperId = this.chatList[0].id
                },
                handleStart(vm, refreshDom, done) {
                    setTimeout(() => {
                        // load finished
                        done();
                    }, 2000)
                },
                handleBeforeDeactivate(vm, refreshDom, done) {
                    this.getChatList()

                    this.$on('change', data => {
                        if (data) done();
                    })
                },
                handleDeactivate(vm, refreshDom) {
                    let num = parseFloat(document.getElementById(this.selector).offsetTop) - 60
                    this.$refs["scrollBox"].scrollTo({
                            y: num
                        },
                        0
                    );
                }
            }
        });
    });
</script>
{/block}