<template>
	<view class="page">
		<movable-area class="movable-area">
			<!-- 编辑按钮 -->
		    <movable-view :x="touchX" :y="touchY" direction="all" style="z-index: 10;width: 136rpx;height: 136rpx;position: fixed;">
				<image @click="toEditPersonnal" class="edit-btn" :src="imgfixUrls + 'dating/bd_dynamics_edit.svg'" mode=""></image>
			</movable-view>
			
			<loadlogo v-if="!loadlogo" />
			<navbar :navbarList="navbar" :isfix="true" :topHeight="35" @navbarChange="handleNavbarItemClcik"></navbar>
			<scroll-view scroll-y="true" class="content" @scrolltolower="scrolltolower">
				<view v-for="item in dynamicList" :key="item.id">
					<view class="line"></view>
					<personnal-item 
						:dynamicInfo="item" 
						:isShowUserInfo="false" 
						:isModular="true" 
						:isShowFooterInfo="false" 
						@delete="handleDeleteClick" 
						@edit="handleEditClick"
						@toDetail="toDynamicDetail"
						>
					</personnal-item>
				</view>
			</scroll-view>
			<nonemores v-if="dynamicList.length == 0"></nonemores>
		</movable-area>
		<TabBars :tabBarAct="0" pageType="16"></TabBars>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import personnalItem from '../template/personalItem.vue';
	import TabBars from '@/components/template/tabBar.vue';
	import navbar from '../template/navbar.vue';
	import nonemores from '@/components/template/nonemores.vue';
	// import personnalItem from '../template/personalItem.vue';
	export default {
		data() {
			return {
				loadlogo: false,
				currentPage: 1,
				totalPage: 1,
				dynamicList: [],
				navbar: ['全部','审核中','未通过','显示中'],
				status: 0,
				touchX: 300,
				touchY: 400
			}
		},
		components: {
			Loadlogo,
			personnalItem,
			TabBars,
			navbar,
			nonemores
		},
		onLoad() {
			this.getDynamicList()
		},
		methods: {
			// 获取动态列表
			getDynamicList() {
				let _this = this
				App._post_form(
					`&p=dating&do=myDynamicList`,
					{
						page: _this.currentPage,
						status: _this.status
					},
					res => {
						_this.dynamicList = [..._this.dynamicList,...res.data.list]
						_this.totalPage = res.data.total
						_this.currentPage ++
					},
					false,
					() => {
						_this.loadlogo = true
					}
				);
			},
		
			// 删除动态
			handleDeleteClick(id) {
				let _this = this
				App._post_form(
					`&p=dating&do=delMyDynamic`,
					{
						id: id
					},
					res => {
						if(res.errno == 0) {
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
							_this.currentPage = 1
							_this.dynamicList = []
							_this.getDynamicList()
						}
					},
					false,
					() => {
					}
				);
			},
			
			// navbar点击
			handleNavbarItemClcik(index) {
				this.status = index
				this.currentPage = 1
				this.dynamicList = []
				this.getDynamicList()
			},
			
			// 编辑动态
			handleEditClick(id) {
				App.navigationTo({
					url: `pages/subPages2/blindDate/dynamics/edit?id=${id}`
				})
			},
			
			toEditPersonnal() {
				App.navigationTo({
					url: `pages/subPages2/blindDate/dynamics/edit?id=0`
				})
			},
			
			// 去动态详情
			toDynamicDetail(id,type) {
				if(!type) {
					App.navigationTo({
						url: `pages/subPages2/blindDate/dynamics/detail?id=${id}`
					})
				}
			},
		
			// 触底加载更多
			scrolltolower() {
				if(this.currentPage <= this.totalPage) {
					this.getDynamicList()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.movable-area {
		min-height: 100vh;
		width: 100vw;
	}
	
	.page {
		min-height: 100vh;
		min-width: 100vw;
		background-color: #F8F8F8;
		padding-bottom: 120rpx;
	}
	
	.content {
		padding-top: 90rpx;
		// height: calc(100vh - 90rpx);
	}
	
	.line {
		width: 690rpx;
		height: 20rpx;
		background-color: #F8F8F8;
		margin: auto;
		border-radius: 4rpx;
	}
	
	.edit-btn {
		width: 136rpx;
		height: 136rpx;
		z-index: 10;
	}
</style>
