<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 my-content-box"
            :style="{paddingTop: newHeight + 'px'}">
            <!-- <image src="/static/public/icon-my-logo.png" class="width100" mode="widthFix" lazy-load></image> -->
            <view class="mar-zy40">
                <view class="my-head-box">
                    <view class="disjbac" style="padding: 60rpx 80rpx 60rpx 60rpx;">
                        <view class="disac">
							<!-- 用户头像 -->
                            <image class="flexs mar-y10 radius_100" @tap="replaceImg" :src="userHeadImg || '/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;" v-if="ifAuthentication">已认证</view>
                                <view class="fon22" style="color: #717171;" @tap="chooseGridEv(0)" v-else>未实名认证</view>
                            </view>
                        </view>
						<!-- 等级图标 -->
                        <image v-if="ifAuthentication" 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;">
						<view class="" style="height: 53rpx;">
							<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>
                        <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'
	import { uploadImg } from '@/jsFile/public-api.js';
    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: {},
				ifAuthentication:0,//是否认证
				userHeadImg:'',//用户头像
            }
        },
        onShow() {
			if(this.userHeadImg=='') {
				// 查询用户信息
				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.userHeadImg = res.tempFilePaths[0];
						uploadImg({path:this.userHeadImg}).then(res=>{
							if(res.code) {
								this.$toolAll.tools.showToast('修改成功');
								// this.temporaryImg[index] = res.data.id;
								this.$requst.post('/universal/api.user/avatar',{avatar:res.data.id}).then(res=>{
									if(res.code) {
										// 查询用户信息
										this.checkInfo();
									}
								})
							}
						})
					},fail:(err)=> {
						this.$toolAll.tools.checkQx(err.code);
                    }
				})
			},
            // 退出登录
            logOutEv() {
				this.$toolAll.tools.showToast('退出成功');
				// 清除所有缓存
				uni.clearStorageSync();
				setTimeout(() => {
				    uni.reLaunch({
				        url: '/pages/login/login'
				    })
				}, 1000)
                this.$requst.post('/universal/api.login/signout').then(res => {})
            },
            // 手机加星号
             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*1//预约及时率
                        this.percentageList[1].num= this.userInfo.visit_rate*1//上面准时率
						this.percentageList[2].num= this.userInfo.repair_rate*1//项目报修率
						this.userHeadImg = this.userInfo.avatar;//用户头像
						this.ifAuthentication = this.userInfo.is_check;//是否实名认证0：未认证	1：已认证
                    }
                })
            },
            // 六宫格选择事件
            chooseGridEv(index) {
                let urls = [
                    '/pagesB/personal-information/personal-information',
                    '/pagesB/electronic-certificate/electronic-certificate',
                    '/pagesB/service-range/service-range',
                    '/pagesA/workOrder/workOrderLlsit?status=待评价&statusId=9',
                    '/pagesB/my-account/my-account?index=0',
                    '/pagesB/set-up/set-up',
                ];
				if(index==3){
					if(uni.getStorageSync('type_id')==1 || uni.getStorageSync('type_id')==2){
						uni.navigateTo({
						    url: urls[index]
						})
					} else {
						this.$toolAll.tools.showToast('暂无权限');
					}
				} else {
					uni.navigateTo({
					    url: urls[index]
					})
				}
            },
			// 去设置页面事件
			goSetUp(){
				uni.navigateTo({
				    url: '/pagesB/set-up/set-up'
				})
			}
        }
    }
</script>

<style>
    page {
        background-color: #f7f7f7;
    }
	.my-content-box{background: url(/static/public/icon-my-logo.png) no-repeat;background-size: 100% auto;}
	.my-head-box{background: url(/static/public/icon-my-head.png) no-repeat;height: 400rpx;background-size: 100% 100%;}
</style>