<template>
	<view class="account_safe">

		<view class="avatar">
			<u-image @click="show = true" width="190rpx" height="190rpx" shape="circle"
				:src="avatarUrl? `${vuex_ossUrlPubilc}/${avatarUrl}`:wxAvatarUrl" />
		</view>

		<view class="cell top">
			<u-cell-group>
				<u-cell title="登录账号" :isLink="true" url="/pages/main/my/editAccount/editAccount" arrow-direction="right"
					:rightIconStyle="{fontSize:'26rpx'}" :title-style="{color:'#909097', fontSize:'28rpx'}">
					<text slot="value" class="u-slot-value">{{accountName}}</text>
				</u-cell>
				<u-cell title="姓名" arrow-direction="right" :rightIconStyle="{fontSize:'26rpx'}"
					:title-style="{color:'#909097', fontSize:'28rpx'}">
					<text slot="value" class="u-slot-value">{{teacherName}}</text>
				</u-cell>
				<u-cell title="手机号" :isLink="true" url="/pages/main/my/editMobile/editMobile" arrow-direction="right"
					:rightIconStyle="{fontSize:'26rpx'}" :title-style="{color:'#909097', fontSize:'28rpx'}">
					<text slot="value" class="u-slot-value">{{getPhone}}</text>
				</u-cell>
				<u-cell title="工号" arrow-direction="right" :rightIconStyle="{fontSize:'26rpx'}"
					:title-style="{color:'#909097', fontSize:'28rpx'}">
					<text slot="value" class="u-slot-value">{{jobNumber}}</text>
				</u-cell>
				<u-cell title="院系专业" arrow-direction="right" :rightIconStyle="{fontSize:'26rpx'}"
					:title-style="{color:'#909097', fontSize:'28rpx'}">
					<text slot="value" class="u-slot-value">{{departmentName}}</text>
				</u-cell>
			</u-cell-group>
		</view>

		<u-action-sheet :actions="list" @select="chooseImg" :show="show"></u-action-sheet>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'

	import {
		getOssInitApi,
		updateAvatarUrlApi,
	} from '@/config/api.js';

	import {
		replaceTextToStar
	} from '@/common/commonUtil.js'

	export default {
		data() {
			return {
				show: false,
				list: [{
					name: '拍照'
				}, {
					name: '从手机相册选择'
				}],
				ossInit: {},
				picList: [],
			}
		},

		onLoad() {
			getOssInitApi({
				"uploadFileType": "other"
			}).then(res => {
				this.ossInit = res
			})
		},



		computed: {
			...mapState({
				wxAvatarUrl: (state) => state.vuex_weixinUserInfo.avatarUrl ? state.vuex_weixinUserInfo.avatarUrl : '',
				avatarUrl: (state) => state.vuex_user.teacher.avatarUrl ? state.vuex_user.teacher.avatarUrl : '',
				accountName: (state) => state.vuex_user.username ? state.vuex_user.username : '',
				teacherName: (state) => state.vuex_user.teacher.name ? state.vuex_user.teacher.name : '',
				jobNumber: (state) => state.vuex_user.teacher.number ? state.vuex_user.teacher.number : '',
				departmentName: (state) => state.vuex_user.teacher.departments && state.vuex_user.teacher.departments
					.length > 0 && state.vuex_user.teacher.departments[0].name ? state.vuex_user.teacher
					.departments[0].name : '',

				getPhone(state) {
					let phone = state.vuex_user.phone;
					return phone ? replaceTextToStar(phone) : '';
				},

			}),
		},

		methods: {
			
			...mapActions('user', {
				getUserInfo: 'getUserInfo',
			}),
			
			chooseImg(item) {
				var _this = this
				console.log(item)
				if (item.name == '拍照') { //拍照
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera'], //从相机选择
						success: function(res) {
							console.log("chooseImage...", JSON.stringify(res.tempFilePaths));
							_this.picList = res.tempFilePaths
							_this.uploadImages()
						}
					});
				} else if (item.name == '从手机相册选择') { //相册
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							console.log("chooseImage...", JSON.stringify(res.tempFilePaths));
							_this.picList = res.tempFilePaths
							_this.uploadImages()
						}
					});
				}
			},

			uploadImages() { //上传图片
				var _this = this
				console.log('begin', this.picList)
				for (var i = 0; i < this.picList.length; i++) {
					uni.uploadFile({
						url: _this.ossInit.host,
						filePath: _this.picList[i],
						name: 'file',
						formData: {
							'key': `${_this.ossInit.dir}${new Date().getTime()}/` + '${filename}',
							'action': `${_this.ossInit.host}`,
							'OSSAccessKeyId': _this.ossInit.accessId,
							'policy': _this.ossInit.policy,
							'signature': _this.ossInit.signature,
							'callback': _this.ossInit.callback,
						},
						success: (uploadFileRes) => {
							console.log("--", uploadFileRes)

							let avatarObj = JSON.parse(uploadFileRes.data)
							_this.avatarUrl = avatarObj.object;

							updateAvatarUrlApi({
								id: this.vuex_user.teacher.id,
								avatarUrl: avatarObj.object,
							}).then(data => {
								if (data) {
									_this.getUserInfo()
								}
							})

						},
						fail: (error) => {
							console.log("-error-", error)
						},
						
						complete: (res) => {
							this.show = false;
						}
						
					});
				}
			},

			link(type) {

				switch (type) {
					case 'account':
						this.$u.route('/pages/student/my/edit-account/edit-account');
						break;

					case 'password':
						this.$u.route('/pages/student/my/edit-password/edit-password');
						break;
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.account_safe {
		width: 100%;
		height: 100%;
		background-color: #F7F7F7;
		padding: 20rpx 0 0 0;

		.avatar {
			width: 190rpx;
			margin: 0 auto;
			padding: 50rpx 0;
		}

		.top {
			margin: 0 0 20rpx 0;
		}

		.cell {
			background-color: #FFFFFF;

			.u-slot-value {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #202131;
			}
		}

		.cell /deep/ .u-cell {
			padding: 12rpx 0;

			.u-cell__value {
				font-size: 34rpx;
				color: rgba(0, 0, 0, 0.5);
			}
		}
	}
</style>