<template>
	<view class="mine-pages-setting">
		<view class="flex-center flex-column pd-lg fill-base">
			<view class="space-lg"></view>
			<view class="space-lg"></view>
			<image class="avatar radius" :src="user_info.avatarUrl"></image>
			<view class="f-title c-caption mt-md" v-if="user_info.phone"> {{user_info.split_phone}} </view>
		</view>
		<view class="flex-between pd-lg fill-base f-paragraph" v-for="item in userInfoList">
			<view>{{item.text}}</view>
			<view class="c-caption">{{user_info[item.key]}}</view>
		</view>
		<view class="space-md"></view>
		<view @tap.stop="goDetail(index,'infoList')" class="flex-between pd-lg fill-base f-paragraph"
			v-for="(item,index) in infoList" :key="index">
			<view>{{item.text}}</view>
			<i class="iconfont icon-right"></i>
		</view>
		<view class="space-md"></view>
		<view @tap.stop="goDetail(index,'aboutUsList')" class="flex-between pd-lg fill-base f-paragraph"
			v-for="(item,index) in aboutUsList" :key="index">
			<view>{{item.text}}</view>
			<i class="iconfont icon-right"></i>
		</view>
		<view class="space-max-footer"></view>

		<fix-bottom-button @confirm="toLoginOut" :text="[{ text: '退出登录', type: 'confirm' }]" bgColor="#fff">
		</fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	export default {
		data() {
			return {
				isLoad: false,
				options: {},
				userInfoList: [{
					text: '昵称',
					key: 'nickName'
				}, {
					text: '注册时间',
					key: 'create_date'
				}],
				infoList: [{
					text: '用户隐私协议',
					url: 1
				}, {
					text: '个人信息保护指引',
					url: 2
				}],
				aboutUsList: [{
					text: '关于我们',
					url: '/mine/pages/about-us'
				}],
				user_info: {}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		async onLoad() {
			this.initIndex()
		},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateConfigItem', 'updateUserItem']),
			async initIndex() {
				this.user_info = this.$util.deepCopy(this.userInfo)
			},
			goDetail(index, key) {
				let {
					siteroot
				} = siteInfo
				let {
					url
				} = this[key][index]
				if (key == 'infoList') {
					let href = siteroot.split('index.php')[0]
					let page = url == 1 ? 'protocol' : 'information'
					url = `${href}${page}.html`
				}
				this.$util.goUrl(key == 'infoList' ? {
					url,
					openType: 'web'
				} : {
					url
				})
			},
			toLoginOut() {
				let arr = ['autograph', 'userInfo', 'appLogin']
				arr.map(key => {
					uni.setStorageSync(key, '')
					this.updateUserItem({
						key,
						val: ''
					})
				})
				this.$util.showToast({
					title: `退出登录`
				})
				this.updateUserItem({
					key: 'isShowLogin',
					val: true
				})
				setTimeout(() => {
					this.$util.goUrl({
						url: `/pages/login`,
						openType: `reLaunch`
					})
				}, 1000)
			}

		}
	}
</script>


<style lang="scss">
	.mine-pages-setting {
		.iconfont {
			color: #999
		}
	}
</style>
