<template>
	<view style="background-color: #00be8c;width: 100%;height: 100%;">
		<view style="width: 100%;height: 160rpx;">
			<view class="middles_top" v-if="list.headimg">
				<image class="middles_top_1" :src="list.headimg"></image>
			</view>
			<view class="middles_top" v-else>
				<image class="middles_top_1" src="/static/images/home/tixing.png"></image>
			</view>
			<view class="middles_top1" @click="showActionSheet(1)">
				<view class="middles_top1_1">
					昵称：{{username}}
				</view>
			</view>
			<fui-actionsheet :show="show" :tips="tips" :itemList="itemList" :isCancel="isCancel" :theme="theme"
				@click="itemClick" @cancel="cancel"></fui-actionsheet>
		</view>
		<view class="Topping" v-if="drug" @click="editreminder">
			<view class="Topping_1">置顶提醒：{{drug}}</view>
			<view class="Topping_2" style="position: relative;left: 85%;top: -95%;">
				<fui-icon name="arrowright" :size="60"></fui-icon>
			</view>
		</view>
		<view class="Topping" v-else>
			<view class="Topping_1">置顶提醒：{{drug}}</view>
			<view class="Topping_2" style="position: relative;left: 85%;top: -95%;">
				<fui-icon name="arrowright" :size="60"></fui-icon>
			</view>
		</view>
		<view class="Medication">
			<fui-row margin-bottom="24rpx">
				<fui-col :span="8">
					<view class="fui-col__item">
						<view style="margin-top: 40rpx;border-right: 1px #d4d4d4 solid;height: 120rpx;">
							<view style="padding-top: 20rpx;">
								用药数量 <br> {{pharmacy}}
							</view>
						</view>
					</view>
				</fui-col>
				<fui-col :span="8">
					<view class="fui-col__item">
						<view style="margin-top: 40rpx;border-right: 1px #d4d4d4 solid;height: 120rpx;">
							<view style="padding-top: 20rpx;">
								提醒 <br> {{remind}}
							</view>
						</view>
					</view>
				</fui-col>
				<!-- <fui-col :span="6">
					<view class="fui-col__item">
						<view style="margin-top: 40rpx;border-right: 1px #d4d4d4 solid;height: 120rpx;">
							<view style="padding-top: 20rpx;">
								参与活动 <br> {{activity}}
							</view>
						</view>
					</view>
				</fui-col> -->
				<fui-col :span="8">
					<view class="fui-col__item">
						<view style="margin-top: 40rpx;height: 120rpx;">
							<view style="padding-top: 20rpx;">
								作品数量 <br> {{works}}
							</view>
						</view>
					</view>
				</fui-col>
			</fui-row>
		</view>
		<view class="below">
			<view style="height: 17rpx;width: 100%;"></view>
			<fui-list-cell :bottomBorder="false" arrow :highlight="false" @click="collect">
				<view class="fui-align__center">
					<fui-icon name="home"></fui-icon>
					<text class="below_text">我的收藏</text>
				</view>
			</fui-list-cell>
<!-- 			<fui-list-cell :bottomBorder="false" arrow :highlight="false">
				<view class="fui-align__center">
					<fui-icon name="message"></fui-icon>
					<text class="below_text">参与的活动</text>
				</view>
			</fui-list-cell> -->
			
			<button open-type="share" style="padding: 0rpx;">
				<fui-list-cell :bottomBorder="false" arrow :padding="['-45rpx', '30rpx']">
					 <view class="fui-align__center">
						<fui-icon name="principal"></fui-icon>
						<text class="below_text">邀请好友</text>
					</view>
				</fui-list-cell> 
			</button>
			
			<fui-list-cell :bottomBorder="false" arrow :highlight="false" @click="help">
				<view class="fui-align__center">
					<fui-icon name="link"></fui-icon>
					<text class="below_text">帮助中心</text>
				</view>
			</fui-list-cell>
			<fui-list-cell :bottomBorder="false" arrow :highlight="false" @click="personal">
				<view class="fui-align__center">
					<fui-icon name="setup"></fui-icon>
					<text class="below_text">设置</text>
				</view>
			</fui-list-cell>
			<view style="height: 27rpx;width: 100%;"></view>
		</view>
	</view>
</template>

<script>
	import user1 from '@/api/user.js';
	import medication from '@/api/medication.js';
	import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
	import fuiRow from "@/components/firstui/fui-row/fui-row.vue"
	import fuiCol from "@/components/firstui/fui-col/fui-col.vue"
	import fuiList from "@/components/firstui/fui-list/fui-list.vue"
	import fuiListCell from "@/components/firstui/fui-list-cell/fui-list-cell.vue"
	import fuiActionsheet from "@/components/firstui/fui-actionsheet/fui-actionsheet.vue"
	export default {
		components: {
			fuiIcon,
			fuiRow,
			fuiCol,
			fuiList,
			fuiListCell,
			fuiActionsheet
		},
		data() {
			return {
				username: '',
				show: false,
				tips: '',
				itemList: [],
				isCancel: true,
				theme: 'light', 
				drug: '',
				uptodatedata: [],
				pharmacy: 0,
				remind: 0,
				activity: 0,
				works: 0,
				list:[],
				shareimage: '',
				sharename: ''
			}
		},
		onLoad() {
			const um_id = uni.getStorageSync('um_id');
			this.um_id = um_id
			if (um_id == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			const user = uni.getStorageSync('user');
			this.username = user.user
			this.fetchData(this.um_id)
			
			medication.shareimage().then(res => {
				if(res.status == "200"){
					console.log(res)
					this.shareimage = res.data
					this.sharename = res.token
				}
			});
		},
		onShareAppMessage(e) {
			medication.shareimage().then(res => {
				if(res.status == "200"){
					console.log(res)
					this.shareimage = res.data
					this.sharename = res.token
				}
			});
			return {
				title: this.sharename,
				path: '/page/my/my',
				imageUrl: this.shareimage
			}
		},
		methods: {
			fetchData(um_id) {
				medication.getuptodate({
					um_id: um_id
				}).then(res => {
					if (res.status == 200) {
						this.drug = res.data.drug
						this.uptodatedata = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
				user1.getuserinfo({
					um_id: um_id
				}).then(res => {
					if (res.status == 200) {
						this.list = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
				user1.mycount({
					um_id: um_id
				}).then(res => {
					if (res.status == 200) {
						this.pharmacy = res.data.pharmacy
						this.remind = res.data.remind
						this.activity = res.data.activity
						this.works = res.data.works
					}
				});
			},
			onPullDownRefresh(){
				this.fetchData(this.um_id)
			},
			showActionSheet(type) {
				this.tips = '';
				this.isCancel = true;
				this.theme = 'light';
				switch (type) {
					case 1:
						this.tips = '退出后不会删除任何历史数据，下次登录依然可以使用本账号。';
						this.itemList = [{
							
							text: '退出登录',
							color: '#FF2B2B'
						}]
						break;
					default:
						break;
				}
				setTimeout(() => {
					this.show = true
				}, 50)
			},
			itemClick(e) {
				// this.fui.toast(e.text)
				uni.removeStorageSync('user');
				uni.removeStorageSync('um_id');
				uni.redirectTo({
					url: '/pages/login/login'
				})
				this.cancel()
			},
			cancel() {
				this.show = false
			},
			editreminder() {
				uni.setStorageSync('uptodatedata', this.uptodatedata);
				uni.navigateTo({
					url: '/pages/remind/edit'
				})
			},
			collect() {
				uni.navigateTo({
					url: '/pages/my/collect'
				})
			},
			help() {
				uni.navigateTo({
					url: '/pages/my/help'
				})
			},
			personal(){
				uni.navigateTo({
					url: '/pages/my/personal'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-list__cell-background{
		height: 80rpx !important;
	}
	
	.below_text {
		font-size: 35rpx;
		font-weight: bold;
		margin-left: 30rpx;
		color: #333333;
	}

	.below {
		width: 95%;
		// height: 780rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: auto;
	}

	.fui-section__title {
		margin-left: 32rpx;
	}

	.fui-col__item {
		// height: 230rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		text-align: center;
		// line-height: 230rpx;
	}

	.fui-color__black {
		background-color: #333333;
	}

	.fui-color__yellow {
		background-color: #FFB703;
	}

	.Medication {
		width: 95%;
		height: 200rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto 20rpx;
	}

	.middles_top {
		display: inline-block;
	}

	.middles_top1 {
		display: inline-block;
		width: 70%;
		height: 100rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 30rpx;
		position: relative;
		top: -22%;
		font-size: 35rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.middles_top_1 {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100rpx;
		margin: 30rpx 0 0 30rpx;
	}

	.Topping {
		margin: 20rpx auto;
		width: 95%;
		height: 130rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 35rpx;
		text-align: left;
		padding-left: 30rpx;
		line-height: 130rpx;
	}

	.fui-list__icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}

	.fui-section__title1 {
		margin-left: 32rpx;
	}
</style>