<template>
    <nav-bar :navbar-data="navbarData" />
    <view :style="{ paddingTop: height +'px' }" class="question">
        <view class="img" :style="{ background: 'url(' + imgHost + '/images/icon/help.png) no-repeat', backgroundSize: '100% 100%' }">
        </view>
        <view class="title">
            <view class="icon"></view>
            <text>常见问题</text>
        </view>
        <view class="content">
            <van-cell :title="(index + 1) + '.' + item.descripts" is-link v-for="(item, index) in helpDetail" :key="index" @click="goToDetail(item.url)" />
        </view>
        <view class="button">
			<!-- #ifdef MP -->
            <van-button type="default" @tap="customerService">联系客服</van-button>
			<!-- #endif -->
            <van-button type="info" @tap="helpNav">我要反馈</van-button>
        </view>
    </view>
</template>

<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import navBar from '@/components/navBar/index'
import VanCell from '@/components/cell/index'
import VanButton from '@/components/button/index'
const app = getApp()
export default {
    components: {
        'nav-bar': navBar,
        'van-cell': VanCell,
        'van-button': VanButton
    },
    data() {
        return {
            imgHost: httpConfig && httpConfig.imgHost,
            height: app.globalData.height,
            navbarData: {
                isGoHome: true,
                homePath: '../../../pages/tabBar/index/index',
                isGoBack: true,
                title: "帮助与反馈",
                loading: false,
                loadingStaus: false,
            },
            helpDetail: [],
            platform: ''
        }
    },
    onReady: function () {
        this.gethelpDetail();
    },
    methods: {
        // 获取帮助信息
        gethelpDetail: function () {
            let data = {
                params: [{
                    type: 'P',
                }]
            }
            $http.post("urlS", this, {
                code: "03100102",
                data: data,
                namespace: 'Y',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({
                            helpDetail: res.result
                        });
                    } else {
                        this.setData({
                            helpDetail: []
                        });
                    }
                }
            });
        },
        // 跳反馈界面
        helpNav: function () {
            uni.navigateTo({
                url: '/pages/mine/help/helpFeedback',
            })
        },
        // 客服聊天
        customerService: function (e) {
            var userData = this.$cache.get('userData')
            let admid = ''
            let docImg = ''
            let patName = userData.patDesc;
            uni.navigateTo({
                url: "/pages/message/pages/im/room/room?" + "admID" + "=" + admid + "&userID" + "=" + userData.imUserID + "&toUser=userKF001" + "&docImg" + "=" + docImg + "&status=" + '' + "&toUserName=客服" + "&patName=" + patName
            })
        },
        goToDetail: Util.debounce(function (url) {
            if (this.loading) {
                return
            }
            let self = this;
            if (url != "") {
                console.log('platform==', this.platform)
                // #ifdef MP
                if ((this.platform != "") && (this.platform != "ios")) {
                    //非IOS设备打开文档
                    this.setData({
                        loading: true
                    }, () => {
                        this.openDocument(url);
                    })
                } else {
                    if (this.platform == "") {
                        //未获取到设备信息
                        uni.getSystemInfo({
                            success: function (res) {
                                console.log('getSystemInfo==', res)
                                self.setData({
                                    platform: res.platform
                                })
                                if (res.platform != 'ios') {
                                    self.setData({
                                        loading: true
                                    }, () => {
                                        self.openDocument(url);
                                    })
                                }
                            }
                        })
                    } else {
                        //IOS 设备
                        uni.navigateTo({
                            url: '../questionDetail/detail?url=' + url,
                        })
                    }
                }
                // #endif

                // #ifdef H5
                window.location.href = url
                // #endif

            } else {
                uni.showToast({
                    title: '无帮助文档',
                    icon: false,
                })
            }
        }),
        
        // 打开文档
        openDocument: function (url) {
            let self = this;
            uni.downloadFile({
                url: url,
                success: function (res) {
                    var Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
                    uni.openDocument({
                        filePath: Path,
                        success: function (res) {
                            self.setData({
                                loading: false,
                            })
                        }
                    })
                },
                fail: function (res) {
                    uni.showToast({
                        title: '文档加载失败',
                        icon: 'none',
                    })
                    self.setData({
                        loading: false,
                    })
                }
            })
        },
    }
}
</script>

<style lang="scss">
.question {
	box-sizing: border-box;
	overflow-y: auto;
	height: 100vh;
	padding-bottom: 20rpx;
    .img {
		position: sticky;
		top: 0;
		z-index: 10;
        width: 100%;
        height: 240rpx;
    }

    .title {
		position: sticky;
		z-index: 10;
		top: 240rpx;
        height: 90rpx;
        line-height: 90rpx;
        padding-left: 32rpx;
		background: #f7f7f7;
    }

    .button {
        display: flex;
        text-align: center;
        position: fixed;
		bottom: 0;
		/* #ifdef MP */
        bottom: calc(env(safe-area-inset-bottom) + 0rpx);
		/* #endif */
        left: 0;
        width: 100%;

        .van-button {
            flex: 1;
            height: 88rpx;
            line-height: 88rpx;
        }
    }

    .content {
        padding-bottom: 100rpx;
    }
}
</style>