<template>
    <view class="pad-x180">
        <status-nav-slot :backgroudColor="backgroudColor">
            <!-- <view slot="leftContent"><i class="icon icon-return fon40" :style="{color:newColor}"></i></view> -->
            <view slot="leftContent" style="width: 30rpx;"></view>
            <view slot="centerContent">
                <view :style="{color:newColor}">个人中心</view>
            </view>
            <!-- #ifdef APP-PLUS -->
            <view slot="rightContent" @tap="goSetUp"><i class="icon icon-sandian fon40" :style="{color:newColor}"></i>
            </view>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <view slot="rightContent" @tap="goSetUp"><i class="icon icon-sandian fon40" :style="{color:newColor}"></i>
            </view>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <view slot="rightContent" style="width: 30rpx;"></view>
            <!-- #endif -->
        </status-nav-slot>
        <view class="posir"
            style="background: url(/static/public/icon-my-logo.png) no-repeat;background-size: 100% auto;"
            :style="{paddingTop: newHeight + 'px'}">
            <!-- <image src="/static/public/icon-my-logo.png" class="width100" mode="widthFix" lazy-load></image> -->
            <view class="mar-zy40">
                <view
                    style="background: url(../../../static/public/icon-my-head.png) no-repeat;height: 400rpx;background-size: 100% 100%;">
                    <view class="disjbac" style="padding: 60rpx 80rpx 60rpx 60rpx;">
                        <view class="disac">
							<!-- 用户头像 -->
                            <image class="flexs mar-y10 radius_100" @tap="replaceImg" :src="userInfo.avatar || '/static/public/icon-my-headimg.png'" mode="aspectFill" style="width: 91rpx;height: 91rpx;" lazy-load></image>
                            <view class="disjb fc" style="height: 91rpx;">
								<!-- 用户手机号 -->
                                <view class="fon34 bold">{{tel(userInfo.username)}}</view>
								<!-- 是否实名认证 -->
                                <view class="fon22" style="color: #717171;">未实名认证</view>
                            </view>
                        </view>
						<!-- 等级图标 -->
                        <image src="/static/public/icon-my-level.png" mode="aspectFill"
                            style="width: 49rpx;height: 76rpx;" lazy-load></image>
                    </view>
                    <!-- 信用分、项目数量、未评价 -->
                    <view class="disja pad-zy40">
                        <view v-for="(item,index) in headList" :key="index" class="disjcac fc">
                            <view style="height: 50rpx;" class="disjcac">
                                <image :src="item.imgsrc"
                                    :style="{width: [49,49,46][index] + 'rpx',height: [50,50,42][index] + 'rpx'}"
                                    mode="widthFix" lazy-load></image>
                            </view>
                            <view class="fon24 col9 mar-sx10">{{item.title}}</view>
                            <view class="fon36 bold">{{item.num}}</view>
                        </view>
                    </view>
                </view>
                <!-- 预约及时率、上门准时率、项目报修率 -->
                <view class="disja mar-s20">
                    <view v-for="(item,index) in percentageList" :key="index" class="disjcac fc col3">
                        <!-- <cmd-progress type="circle" :percent="item.num" :width="60" :stroke-color="['#00a2e9','#e87c00','#0b56ec'][index]" :circleStrokeColor="['#c6e6f5','#f4dfc6','#c8d7f5'][index]" :strokeShape="'square'"></cmd-progress> -->
                        <arprogress :percent="item.num" :inactiveColor="['#c6e6f5','#f4dfc6','#c8d7f5'][index]"
                            :activeColor="['#00a2e9','#e87c00','#0b56ec'][index]" :borderWidth="7.8" :width="120"
                            :duration="500" bgColor="transparent"><text :style="{color: ['#00a2e9','#e87c00','#0b56ec'][index]}">{{item.num}}%</text>
                        </arprogress>
                        <view class="fon24 mar-s20">{{item.title}}</view>
                    </view>
                </view>
                <!-- 六宫格 -->
                <view class="disjbac fw bacf" style="margin: 30rpx -20rpx 0rpx -20rpx;">
                    <view @tap="chooseGridEv(index)" class="disjcac fc width50 pad-sx40"
                        v-for="(item,index) in gridList" :key="index"
                        :class="[`${(index%2!=0) ? 'bleft' : ''} ${(index < gridList.length-2) ? 'bbot' : ''}`]"
                        style="box-sizing: border-box;">
                        <image :src="item.imgsrc" mode="widthFix" lazy-load
                            :style="{width: [52,52,46,50,46,52][index] + 'rpx',height: [48,45,52,52,53,52][index] + 'rpx'}">
                        </image>
                        <view class="fon26 col3 mar-s20">{{item.title}}</view>
                    </view>
                </view>
                <!-- 退出登录 -->
                <view class="my-exit-btn" @tap="logOutEv">退出登录</view>
            </view>
        </view>
        <!-- 底部tab -->
        <foot-tab :current='4'></foot-tab>
    </view>
</template>

<script>
    import statusNavSlot from '@/components/status-navs/status-nav-slot.vue';
    // 进度条
    import cmdProgress from '@/components/cmd-progress/cmd-progress.vue';
    // 底部组件
    import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
    import arprogress from '@/components/ar-circle-progress/index.vue'
    export default {
        components: {
            statusNavSlot,
            cmdProgress,
            'foot-tab': footTabOne,
            arprogress
        },
        data() {
            return {
                newHeight: uni.getSystemInfoSync().statusBarHeight + 50,
                backgroudColor: 'rgba(255,255,255,0)',
                newColor: 'rgba(255,255,255,1)',
                headList: [{
                        imgsrc: '/static/public/icon-my-creditScore.png',
                        title: '信用分',
                        num: 0
                    },
                    {
                        imgsrc: '/static/public/icon-my-projectNum.png',
                        title: '项目数量',
                        num: 0
                    },
                    {
                        imgsrc: '/static/public/icon-my-notEvaluated.png',
                        title: '未评价',
                        num: 0
                    },
                ],
                percentageList: [{
                        title: '预约及时率',
                        num: 0
                    },
                    {
                        title: '上门准时率',
                        num: 0
                    },
                    {
                        title: '项目报修率',
                        num: 0
                    },
                ],
                gridList: [{
                        imgsrc: '/static/public/icon-my-information.png',
                        title: '个人信息'
                    },
                    {
                        imgsrc: '/static/public/icon-my-certificates.png',
                        title: '电子证件'
                    },
                    {
                        imgsrc: '/static/public/icon-my-service.png',
                        title: '服务范围'
                    },
                    {
                        imgsrc: '/static/public/icon-my-evaluate.png',
                        title: '我要评价'
                    },
                    {
                        imgsrc: '/static/public/icon-my-account.png',
                        title: '我的账户'
                    },
                    {
                        imgsrc: '/static/public/icon-my-set.png',
                        title: '设置'
                    },
                ],
                userInfo: {}
            }
        },
        onShow() {
            // 查询用户信息
            this.checkInfo();
        },
        onPageScroll(e) {
            let navHeight = uni.getSystemInfoSync().statusBarHeight + 50;
            this.backgroudColor = `rgba(255,255,255,${e.scrollTop/navHeight})`;
            if (e.scrollTop / navHeight < 0.5) {
                this.newColor = `#FFFFFF`;
            } else {
                this.newColor = `#000000`;
            }
        },
        onLoad() {
            // 禁止分享
            this.$toolAll.tools.disableShareEv();
        },
        methods: {
			// 更换头像
			replaceImg(){
				uni.chooseImage({
					count: 1,
					sourceType:['album','camera'],
					success: (res) => {
						this.userInfo.avatar = res.tempFilePaths[0];
					}
				})
			},
            // 退出登录
            logOutEv() {
                this.$requst.post('/universal/api.login/signout').then(res => {
                    if (res.code == 1) {
                        this.$toolAll.tools.showToast('退出成功');
                        // 清除所有缓存
                        uni.clearStorageSync();
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '/pages/login/login'
                            })
                        }, 1000)
                    }
                })
            },
            // 手机加星号
             tel(tel="0000000000") {
                const telNum = tel.toString();  
                const reg = /^(\d{3})\d{4}(\d{4})$/;
                return telNum.replace(reg, '$1****$2')
            },
            //用户中心信息
            checkInfo() {
                this.$requst.get('/universal/api.user/user_center').then(res => {
                    if (res.code == 1 && res.data.length != 1) {
                        this.userInfo = res.data;
                        this.headList[0].num = this.userInfo.credit
                        this.headList[1].num = this.userInfo.project_number
                        this.headList[2].num = this.userInfo.evaluate
                       this.percentageList[0].num= this.userInfo.reserve_rate-0
                        this.percentageList[1].num= this.userInfo.visit_rate-0
                         this.percentageList[2].num= this.userInfo.repair_rate-0
                    }
                })
            },
            // 六宫格选择事件
            chooseGridEv(index) {
                let urls = [
                    '/pagesB/personal-information/personal-information',
                    '/pagesB/electronic-certificate/electronic-certificate',
                    '/pagesB/service-range/service-range',
                    '/pages/workOrder/workOrderLlsit?status=已完成',
                    '/pagesB/my-account/my-account?index=0',
                    '/pagesB/set-up/set-up',
                ];
                uni.navigateTo({
                    url: urls[index]
                })
            },
            // 前往设置页面
            goSetUp() {
                uni.navigateTo({
                    url: '/pagesB/set-up/set-up'
                })
            }
        }
    }
</script>

<style>
    page {
        background-color: #f7f7f7;
    }
</style>