<template>
	<view class="content">
    <view style="background: #317dfa;">
      <view class="c-top" style="padding-top: 50px">
        <view style="width: 10%; height: 1px;"></view>
        <view class="X-title">个人中心</view>
        <view style="width: 10%;font-size: 18px;font-weight: bold;color: white">···</view>
      </view>

      <view style="justify-content: space-between;display: flex; align-items: center; margin-bottom: 20px;padding-bottom: 80px;">
        <view class="touxiang-left">
          <view class="touxiang">
            <u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
                      :maxCount="1" width="60" height="60">
              <image src="http://www.nuoyunr.com/lananRsc/detection/touxiang.png" class="tximg" mode=""
                     v-if="!userinfo.avatar"></image>
              <image :src=" baseUrl +userinfo.avatar  " class="tximg" mode="" v-if="userinfo.avatar"></image>
            </u-upload>
          </view>
          <view class="c-title" v-if="!userinfo" @click="gologin">立即登录</view>
          <view class="c-title" v-else>
            <view style="display: flex; align-items: center;">
              <text>{{ userinfo.nickname || '用户昵称'}}</text>
            </view>
            <text style="font-size: 14px;font-weight: normal;color: #88b4fb">{{userinfo.phonenumber || '未填写手机号码'}}</text>
          </view>
        </view>

        <view class="user-edit" @click="show = true">
          <u-icon  name="../../static/my/Compose.png" color="#ffffff" size="28" ></u-icon>
          <text style="color: #9b9b9b;font-size: 18px;font-weight: normal">编辑</text>
        </view>
      </view>
    </view>

		<view class="ail">
      <view class="back-car">
        <image style="width: 45px;height: 35px" src="../../static/my/位图@2x.png" mode=""></image>
        <view class="back-car-logo">
          <image style="width: 90px;height: 22px" src="../../static/my/一键还车@2x.png" mode=""></image>
          <text class="back-car-text">添加车辆，查看更多救援信息</text>
        </view>
        <view class="back-button" @click="goHuanche">去还车</view>
      </view>

      <view class="bai-box" v-if="role === 'user'">
				<view class="b-title">我的订单</view>
        <image class="sanjiao" src="../../static/my/sanjiao.png"/>
				<view class="sige">
          <view class="s-box" @click="goorder(2)">
            <view class="simg">
              <u-icon name="../../static/my/待支付payment@2x.png" color="#133490" size="35"></u-icon>
            </view>
            <view class="zi">待支付</view>
          </view>

          <view class="s-box" @click="goorder(3)">
            <view class="simg">
              <u-icon name="../../static/my/4出场车辆@2x.png" color="#133490" size="35"></u-icon>
            </view>
            <view class="zi">待取车</view>
          </view>
					<view class="s-box" @click="goorder(1)">
						<view class="simg">
							<u-icon name="../../static/my/救援力量@2x.png" color="#133490" size="35"></u-icon>
						</view>
						<view class="zi">救援中</view>
					</view>
					<view class="s-box" @click="goorder(5)">
						<view class="simg">
							<u-icon name="../../static/my/303正确、完成-线性圆框@2x.png" color="#133490" size="35"></u-icon>
						</view>
						<view class="zi">已完成</view>
					</view>
				</view>
			</view>

			<view class="dai-box">
        <view class="vinput" @click="goAssess()" v-if="role === 'user'">
          <view class="dix">
            <view class="d-img">
              <image src="../../static/my/编组 18@2x.png" mode=""></image>
            </view>
            <view class="zq">评价管理</view>
          </view>
          <view class="">
            <uni-icons type="right" size="20" color="#000000"></uni-icons>
          </view>
        </view>
				<view class="vinput" @click="gogogog()" v-if="role === 'user'">
					<view class="dix">
						<view class="d-img">
							<image src="../../static/my/编组 19@2x.png" mode=""></image>
						</view>
						<view class="zq">车辆管理</view>
					</view>
					<view class="">
						<uni-icons type="right" size="20" color="#000000"></uni-icons>
					</view>
				</view>
				<view class="vinput" @click="gocarlist()">
					<view class="dix">
						<view class="d-img">
							<image src="../../static/my/编组 17@2x.png" mode=""></image>
						</view>
						<view class="zq">扣车管理</view>
					</view>
					<view class="">
						<uni-icons type="right" size="20" color="#000000"></uni-icons>
					</view>
				</view>
				<view class="vinput" @click="gosj()" v-if="role === 'user'">
					<view class="dix">
						<view class="d-img">
							<image src="../../static/my/编组 20@2x.png" mode=""></image>
						</view>
						<view class="zq">数据统计</view>
					</view>
					<view class="">
						<uni-icons type="right" size="20" color="#000000"></uni-icons>
					</view>
				</view>
				<view class="vinput" @click="dialogToggle()" style="border-bottom: none">
					<view class="dix">
						<view class="d-img">
							<image src="../../static/my/编组 21@2x.png" mode=""></image>
						</view>
						<view class="zq">退出登录</view>
					</view>
					<view class="">
						<uni-icons type="right" size="20" color="#000000"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- <uni-popup ref="inputDialog" type="dialog">
						<uni-popup-dialog ref="inputClose"  mode="input" title="修改昵称" value=""
							placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup> -->
		<u-modal :show="show" :title="title" :showCancelButton="true" @cancel="show = false" :buttonReverse="true"
			@confirm="confirms" ref="uModal" :asyncClose="true">
			<view class="slot-content">
				<u--input placeholder="请输入内容" border="surround" v-model="realName" @change="change"></u--input>
			</view>
		</u-modal>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您确认退出吗"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<view style="width: 100%; height: 50px;"></view>
		<tabBar :msg="msg"></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request'
	import {
		getToken
	} from '@/utils/auth'
	import config from '@/config'
	import upload from '@/utils/upload.js'
	import tabBar from '../../components/tabBar/tabBar.vue'
	export default {
		data() {
			return {
        role: 'user',
				show: false,
				title: '修改昵称',
				indicatorDots: false,
				openRz: "0",
				autoplay: true,
				interval: 5000,
				duration: 100,
				msgType: 'success',
				realName: '',
				userinfo: {},
				carlist: [],
				fileList6: [],
				carobj: {
					nextInspectionDate: '',
					nextMaintenanceDate: ''
				},
				msg: '4',
				value: '',
				baseUrl: this.$baseUrl
			}
		},
		mounted() {
      this.role = uni.getStorageSync('identity');
		},
		onShow() {
			console.log('what?', uni.getStorageSync('userInfo'));
			this.userinfo = uni.getStorageSync('userInfo')

			// this.getmy()
			// this.getcarlist()
		},
		components: {
			tabBar,
		},
		methods: {
			change(e) {
				console.log('change', e);
			},
			dialogInputConfirm(val) {
				console.log(val);
				this.realName = val
				this.updateProfile()
				this.$refs.inputDialog.close()
			},

			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			inputDialogToggle() {
				console.log('?');
				this.$refs.inputDialog.open()
			},

			confirms() {
				this.updateProfile()
				this.show = false;
			},

			async getUserinfo() {
				await request({
					url: '/getAppInfo',
					method: 'get',
				}).then((res) => {
					if (res.code == 200) {
						this.userinfo = res.user
						uni.setStorageSync('userInfo', res.user)
					}

				})
			},
			async getcarlist() {
				if (!getToken()) {
					return
				}
				const res = await request({
					url: '/appInspection/userOwn/getCars',
					method: 'get',
				})

				this.carlist = res.data
				console.log(this.carlist);
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,

					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url);
				upload({
					url: '/common/upload',
					filePath: url,
				}).then((res) => {

					console.log(res.fileName);
					this.onChooseavatar(res.fileName)
					// this.releasebox.imageList.push(res.fileName)
					// console.log(this.releasebox.imageList);
				})

			},
			// 头像选择与上传
			onChooseavatar(e) {
				uni.uploadFile({
					url: this.baseUrl + '/system/user/profile/avatar',
					filePath: e,
					name: 'avatarfile',
					header: {
						Authorization: 'Bearer ' + getToken()
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						if (uploadFileRes.statusCode == 200) {
							this.getUserinfo()
						}
					}
				});
			},
			// 修改昵称
			async updateProfile() {
				if (this.realName == "") {
					return uni.showToast({
						icon: 'error',
						title: '请填写昵称'
					})
				}
				const res = await request({
					method: 'PUT',
					url: '/system/user/profile/updateNickName',
					data: {
						realName: this.realName
					}
				})
				if (res.code == 200) {
					uni.showToast({
						title: '昵称修改成功'
					})
					this.getUserinfo()
				}
			},
      goAssess(){
        uni.navigateTo({
          url: '/pages/rescue/historylist?id=4'
        })
      },
      goHuanche(){
        uni.navigateTo({
          url: '/pages/my/carlist?id=3'
        })
      },
			gogogog() {
				uni.navigateTo({
					url: '/pages/my/carManage'
				})
			},
			gosj() {
				uni.navigateTo({
					url: '/pages/my/StatisticsInfo'
				})
			},
			// 退出登陆
			outoflogin() {
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},

			async getmy() {
				if (!getToken()) {
					return
				}
				let res = await request({
					url: '/getAppInfo',
					method: 'get',
				})
				console.log('个人信息', res);
				this.userinfo = res.user
				this.realName = res.user.realName
				this.openRz = res.openRz
				let carres = await request({
					url: '/system/userCar/getUserCar',
					method: 'get',
				})
				this.carobj = carres.data
				console.log('车辆信息', this.carobj);
			},
			goorder(id) {
				uni.navigateTo({
					url: '/pages/rescue/historylist?id=' + id
				})
			},
			gocarlist() {
				uni.navigateTo({
					url: '/pages/my/carlist'
				})
			},
			goshang() {
				uni.navigateTo({
					url: '/pages/ruzhu/ruzhu'
				})
			},
			gologin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			gowei() {
				uni.navigateTo({
					url: '/pages/contract/contract'
				})
			},
			//去收藏
			gocollect() {
				uni.navigateTo({
					url: '/pages/detection/my-collect'
				})
			},
			gocarinfo(id) {
				uni.navigateTo({
					url: '/pages/detection/my-carinfo?id=' + id
				})
			},
			//行驶证
			gousers() {
				console.log('11');
				uni.navigateTo({
					url: '/pages/detection/my-user'
				})
			},
			//身份证
			gosfz() {
				if (this.userinfo.idCard != null) {
					uni.showToast({
						title: '已上传身份证'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/detection/my-card'
				})
			},
			//我的优惠券
			goyhq() {
				uni.navigateTo({
					url: '/pages/detection/my-coupon'
				})
			},
			//vip
			govip() {
				uni.navigateTo({
					url: '/pages/detection/my-vip'
				})
			},
			//

			dialogConfirm() {
				console.log('点击确认')
				this.outoflogin()
				this.$refs.alertDialog.close()
			},
			dialogClose() {
				this.$refs.alertDialog.close()

			},

		}
	}
</script>

<style lang="scss" scoped>
.sanjiao{
  width: 17px;
  height: 17px;
  position: relative;
  top: -14px;
  left: 64px;
}
.touxiang-left{
  width: calc(100% - 120px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.back-car{
  background-color: white;
  padding: 20px;
  height: 60px;
  box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.back-car-logo{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  width: calc(100% - 150px);
}
.back-car-text{
  font-size: 13px;
  color: #9B9B9B;
}
.back-button{
  width: 80px;
  height: 34px;
  line-height: 34px;
  border-radius: 18px;
  background: #317cfa;
  color: white;
  text-align: center;
  font-weight: bold;
}
.user-edit{
  width: 115px;
  height: 40px;
  background: white;
  border-radius: 20px 0 0 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
	.aa-box {
		margin-top: 15px;
		width: 100%;
		height: 152px;
		background-color: white;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 20px;
		// display: flex;
		// align-items: center;
		// justify-content: center;
	}

	.swiper {
		height: 170px;
	}

	.content {
		width: 100%;
		height: calc(100vh);
		background-size: 100% 100%;
		box-sizing: border-box;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
    background-color: #317dfa;
	}

	.c-title {
		width: 50%;
		font-size: 18px;
		color: white;
		font-weight: bold;
	}

	.X-title {

		font-size: 18px;
		color: white;

	}

	.sbai {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: white;
		font-weight: bold;
		margin-top: 5px;

		image {
			width: 17px;
			height: 17px;
			margin-right: 5px;
		}
	}

	.on-input {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.t-sb {
		width: 50%;
		display: flex;
		align-items: center;

	}

	.xhui {
		color: #D9D9D9;
		font-size: 16px;
	}

	.dix {
		display: flex;
		align-items: center;
	}

	.dixx {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.touxiang {
		width: 55px;
		height: 55px;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 15px 0 20px;
	}

	.tximg {
		width: 55px;
		height: 55px;
		border-radius: 50%;
	}

	.ail {
		box-sizing: border-box;
		padding: 15px;
    margin-top: -82px;
	}

	.top-xia {
		width: 100%;
		height: 50px;
		border-radius: 8px;
		background: linear-gradient(180deg, #373737 0%, #070707 100%);
		// background: linear-gradient(180deg, #F0DFCB 0%, #E6BC97 100%);
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top-left {
		width: 15%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		.imgtop {
			width: 30px;
			height: 30px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.top-right {
		width: 85%;
		height: 100%;
		border-radius: 8px;
		background: linear-gradient(180deg, #F0DFCB 0%, #E6BC97 100%);
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		padding: 0px 15px;
	}

	.hai {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.zong {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		text-align: center;
		background-color: #373737;
	}

	.gx {
		font-size: 13px;
		font-weight: 400;
		color: #835530;
	}

	.bai-box {
		box-sizing: border-box;
		padding: 15px;
		background-color: white;
		border-radius: 8px;
		margin-top: 15px;
    box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.1);
	}

	.dai-box {
		box-sizing: border-box;
		padding: 15px;
		border-radius: 8px;
		margin-top: 15px;
		background: white;
    box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.1);
	}

	.b-title {
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    margin-top: 5px;
	}

	.sige {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.s-box {
		width: 25%;
		text-align: center;
    height: 70px;
    margin-top: 10px;
	}

	.zi {
		margin-top: 5px;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.simg {
		width: 35px;
		height: 35px;
		margin: 0 auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.x-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-bottom: 10px;
	}

	.x-left {
		display: flex;
		align-items: center;
	}

	.chebiao {
		width: 70px;
		height: 70px;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.dh-title {
		font-size: 20px;
		font-weight: 400;
		color: #333333;
		line-height: 20px;
		margin-bottom: 15px;
	}

	.xh-title {
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 15px;
	}

	.x-right {
		display: flex;
		align-items: center;
	}

	.x-xia {
		margin-top: 15px;
	}

	.x-icon {
		width: 18px;
		height: 18px;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.vinput {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 10px;
		margin-top: 10px;
	}

	.d-img {
		width: 32px;
		height: 32px;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.zq {
		font-size: 18px;
		font-weight: 400;
		color: #333333;
	}

	.vipimg {
		width: 86px;
		height: 24px;
		margin-left: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.avatar-wrapper {
		height: 100%;
		height: 100%;
		margin: 0;
		background-color: 0;
		background: 0;
		padding: 0;
		border-radius: 0;
		border-radius: 0;
		border: 0;
		overflow: hidden;
	}

	.avatar-wrapper::after {
		border: none;
	}

	.wdadada {
		width: 100%;
		text-align: center;
		margin-top: 40px;
		font-size: 30px;
	}
</style>
