<!--
 * @Author: ch
 * @Date: 2022-03-28 15:38:23
 * @LastEditors: ch
 * @LastEditTime: 2022-04-13 14:45:56
 * @Description: file content
-->
<template>
	<view>
		<view class="userInfo">
			<u-upload  class="userInfo--upload" name="6" :fileList="fileList" @afterRead="headUpload" >
				<image class="userInfo--head" src="@/static/account/tx.png" ></image>
			</u-upload>
			<view>{{userInfo.nickname}}</view>
			<u-input type="file" value="xxx"/>
		</view>
		<UiCell class="cell" title="昵称" :value="userInfo.nickname" @click="$Router.push('/setNickname')"></UiCell>
		<UiCell class="cell cell--last" title="性别" :value="sexName" @click="sexShow = true"></UiCell>
		<u-picker :show="sexShow" :columns="sexData" :defaultIndex="sexDefault" 
			keyName="label" @cancel="sexShow = false" @confirm="sexChange"></u-picker>
	</view>
</template>
<script>
import UiButton from '@/components/UiButton.vue'
import UiCell from '@/components/UiCell.vue';
import {Request} from '@/common/utils';
import {ApiPutUser} from '@/common/api/account';
const OSS = {"accessId":"LTAI4GHRNb5Xn2w5NeHVbR4c","policy":"eyJleHBpcmF0aW9uIjoiMjAyMi0wNC0xM1QwOTozMDoxNC45MjNaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCJyZWZ1bmQtZXZpZGVuY2UiXV19","signature":"RDaMnKgLslcO8NX+WIwiJ5khYNc=","dir":"refund-evidence","host":"https://msb-edu-dev.oss-cn-beijing.aliyuncs.com","expire":1649842214,"callback":"eyJjYWxsYmFja0JvZHlUeXBlIjoiYXBwbGljYXRpb24veC13d3ctZm9ybS11cmxlbmNvZGVkIiwiY2FsbGJhY2tCb2R5IjoiZmlsZW5hbWU9JHtvYmplY3R9JnNpemU9JHtzaXplfSZtaW1lVHlwZT0ke21pbWVUeXBlfSZoZWlnaHQ9JHtpbWFnZUluZm8uaGVpZ2h0fSZ3aWR0aD0ke2ltYWdlSW5mby53aWR0aH0mc2VydmljZU5hbWU9bWFsbC10cmFkZSJ9","md5":null}
export default {
	components: { UiCell, UiButton },
	data(){
		return {
			fileList: [],
			sexShow : false,
			sexData : [[{label:'女',val:2},{label:'男',val:1}]]
		}
	},
	computed:{
		userInfo (){
			return this.$store.state.userInfo
		},
		sexName (){
			const curSex = this.sexData[0].find(i => i.val === this.userInfo.gender);
			return curSex ? curSex.label : '未知';
		},
		sexDefault (){
			return [this.sexData[0].findIndex(i => i.val === this.userInfo.gender)];
		}
	},
	methods:{
		/**
		 * 切换性别，发起性别修改请求
		 */
		async sexChange(val){
			const value = val.value[0].val;
			const {error, result} = await ApiPutUser({gender:value});
			if(error){
				ui.$u.totas(error.message);
				return false
			}
			this.$store.commit('SET_USER_INFO', {...this.userInfo, gender:value});
			this.sexShow = false;
		},
		headUpload(val){
			const file = val.file;
			// uni.getFileInfo({filePath:file.url,success(res){
			// 	console.log(res,'====');
			// }})
			uni.uploadFile({
				name : 'file',
				filePath : file.url,
				url : OSS.host,
				formData : {
					name : file.name,
					key : `${OSS.dir}${'${filename}'}`,
					policy : OSS.policy,
					OSSAccessKeyId : OSS.accessid,
					success_action_status : 200,
					signature : OSS.signature
				},
				success(res){
					// console.log(res,'-----');
				}
			})


		}
	}
	
}
</script>
<style lang="scss" scoped>
page{
	background: $color-grey1;
}
.userInfo{
	padding: 77rpx 0 60rpx;
	text-align: center;
	font-size: $font-size-base;
	color: $color-grey6;
	&--head,&--upload{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: 0 auto 13rpx;
	}
}
.cell{
	padding: 0 40rpx;
	&--last{
		border: 0;
	}
}
/deep/{
	.userInfo .uiCell--title{
		font-size: $font-size-lg;
	}
	.uiCell--value{
		color: $color-grey4;
	}
} 
</style>