\<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :is-back="false"
                :background="{ backgroundColor: '#ffcb57' }"
                :border-bottom="false"
                title="我的"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <u-card :show-head="false" margin="30rpx 30rpx 15rpx 30rpx">
                <view slot="body">
                    <view class="hdMsg">
                        <view class="left">
                            <u-avatar :src="curUserinfo.avator || wxDetail.userInfo.avatarUrl" size="120"></u-avatar>
                        </view>
                        <view class="right">
                            <view class="subline">
                                <view class="top">
                                    {{ curUserinfo.name }}
                                    <span class="tag">{{ curUserinfo.userType }}</span>
                                </view>
                                <view class="down">账号：{{ curUserinfo.phone }}</view>
                                <u-icon name="more-circle-fill" size="50" @click="openAccout"></u-icon>
                            </view>
                            <view class="split-line"></view>
                            <view class="subline">
                                <view class="top">账户余额（元）</view>
                                <view class="down">¥ {{ curUserinfo.balance }}</view>
                                <u-icon name="more-circle-fill" size="50" @click="openWallet"></u-icon>
                            </view>
                        </view>
                    </view>
                </view>
            </u-card>
            <u-card
                :show-head="false"
                padding="0"
                margin="0 30rpx 15rpx 30rpx"
                v-if="curUserinfo.isManager && curUserinfo.userType === '企业用户'"
            >
                <view slot="body">
                    <u-cell-group>
                        <u-cell-item title="申请管理" @click="goApplyJoin"></u-cell-item>
                        <u-cell-item title="企业成员" @click="goMembers"></u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
            <u-card :show-head="false" padding="0" margin="0 30rpx 15rpx 30rpx">
                <view slot="body">
                    <u-cell-group>
                        <!-- <u-cell-item title="售后管理"></u-cell-item> -->
                        <u-cell-item title="商品模板" @click="goTemplates"></u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
            <u-card title="账号安全" :body-style="{ padding: 0 }" margin="0 30rpx 15rpx 30rpx">
                <view slot="body">
                    <u-cell-group>
                        <u-cell-item title="手机号码" @click="settingPhone"></u-cell-item>
                        <u-cell-item title="登录密码" @click="settingLoginPsw"></u-cell-item>
                        <u-cell-item
                            title="支付密码"
                            @click="settingPayPsw"
                            v-if="(curUserinfo.isManager && curUserinfo.userType === '企业用户') || curUserinfo.userType === '个人'"
                        ></u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
            <u-card :show-head="false" padding="0" margin="0 30rpx 15rpx 30rpx">
                <view slot="body">
                    <u-cell-group>
                        <u-cell-item title="在线客服" :arrow="false">
                            <!-- <u-button
                                class="normalText"
                                size="mini"
                                @click="() => this.showCustomerModal = true"
                            >点击联系</u-button> -->
                            <u-button class="normalText" size="mini" open-type="contact">点击联系</u-button>
                        </u-cell-item>
                        <u-cell-item title="合作热线" value="4009965012" :arrow="false"></u-cell-item>
                        <u-cell-item title="疑难问题" @click="goQA"></u-cell-item>
                        <u-cell-item title="意见反馈" @click="goFeedback"></u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
            <u-card :show-head="false" padding="0" margin="0 30rpx 30rpx 30rpx">
                <view slot="body">
                    <u-cell-group>
                        <u-cell-item title="我要接单" @click="goOtherMiniprogram"></u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
        </view>
        <u-popup v-model="showCustomerModal" mode="center" border-radius="16">
            <view class="qrcode" @longpress.stop="saveImg(qrcode)">
                <image mode="aspectFit" class="qrcode-img" :src="qrcode" />
                <view class="text">长按保存到相册</view>
            </view>
        </u-popup>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            phone: '',
            showCustomerModal: false,
            qrcode: '',
        };
    },
    onLoad() {
        this.phone = this.curUserinfo.phone;
        this.getQRCode();
    },
    computed: {
        ...mapGetters({
            curUserinfo: 'user/displayUserInfo',
            wxDetail: 'user/wxDetail',
            userDetail: 'user/userDetail',
        }),
    },
    methods: {
        reachBottom() {},
        openAccout() {
            this.$u.route('/pages/account/index');
        },
        openWallet() {
            this.$u.route('/pages/wallet/index');
        },
        settingLoginPsw() {
            this.$u.route('/pages/password/login/index');
        },
        settingPayPsw() {
            this.$u.route('/pages/password/pay/index');
        },
        settingPhone() {
            this.$u.route('/pages/change-phone/index');
        },
        goTemplates() {
            this.$u.route('/pages/good-template/index');
        },
        goFeedback() {
            this.$u.route('/pages/feedback/index');
        },
        goQA() {
            request.get('/api/HelpCenter/GetSHHelpUrl').then((res) => {
                this.$u.route(`/pages/qa/index?url=${res.result.helpUrl}`);
            });
            // this.$u.route('/pages/qa/index');
        },
        goOtherMiniprogram() {
            uni.navigateToMiniProgram({
                appId: 'wx6e2d664687c88632',
                path: 'pages/index/index',
                success(res) {
                    // 打开成功
                },
            });
        },
        goApplyJoin() {
            this.$u.route('/pages/applyjoin/index');
        },
        goMembers() {
            this.$u.route('/pages/company-members/index');
        },
        getQRCode() {
            request.get('/api/BaseData/KFQRCode').then((res) => {
                const { code, message, result } = res;
                if (code === 0) {
                    this.qrcode = result[0].fileurl;
                } else {
                    this.$refs.uToast.show({
                        title: message,
                    });
                }
            });
        },
        saveImg(qrcode) {
            let that = this;
            uni.authorize({
                scope: 'scope.writePhotosAlbum',
                success() {
                    uni.getImageInfo({
                        src: qrcode,
                        success: (image) => {
                            debugger;
                            uni.saveImageToPhotosAlbum({
                                filePath: image.path,
                                success: () => {
                                    that.showCustomerModal = false;
                                    that.$refs.uToast.show({
                                        title: '已保存至相册',
                                    });
                                },
                                fail: (err) => {
                                    if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
                                        that.handleOpenSetting();
                                    }
                                },
                            });
                        },
                    });
                },
                fail() {
                    that.handleOpenSetting();
                },
            });
        },
        handleOpenSetting() {
            uni.showModal({
                title: '提示',
                content: '请到设置中打开保存到相册',
                success: (res) => {
                    if (res.confirm) {
                        uni.openSetting({
                            success(res) {
                                console.log(res.authSetting);
                            },
                        });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                },
            });
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .hdMsg {
            position: relative;
            display: flex;
            align-items: flex-start;
            .right {
                padding-left: 24rpx;
                width: 100%;
                .subline {
                    position: relative;
                    .top {
                        display: flex;
                        align-items: center;
                        font-size: 32rpx;
                        color: #262626;
                        .tag {
                            display: inline-block;
                            margin-left: 12rpx;
                            padding: 4rpx 24rpx;
                            font-size: 20rpx;
                            background-color: #ffcb57;
                            color: #472d21;
                            border-radius: 6rpx;
                        }
                    }
                    .down {
                        margin-top: 10rpx;
                        font-size: 24rpx;
                        color: #434343;
                    }
                    /deep/u-icon {
                        display: inline;
                        .u-icon {
                            position: absolute;
                            top: 20rpx;
                            right: 10rpx;
                        }
                    }
                }
                .split-line {
                    margin: 16rpx 0;
                    border-bottom: 1rpx dashed #8c8c8c;
                }
            }
        }
    }
    .qrcode {
        width: 400rpx;
        box-sizing: border-box;
        padding: 20rpx;
        text-align: center;
        &-img {
            width: 360rpx;
            height: 360rpx;
        }
        .text {
            margin-top: 10rpx;
            font-size: 20rpx;
        }
    }
    .normalText {
        /deep/ .u-btn {
            background-color: #1890ff;
            color: #ffffff;
        }
        /deep/.u-hairline-border {
            &::after {
                display: none;
            }
        }
    }
}
</style>
