<template>
	<view>
		<view class="dynamicList">
			<far-bottom></far-bottom>
			<scroll-view :style="{ height: scrollHeight }" :scroll-y="true" @scrolltolower="load" :lower-threshold="0">
				<nonemores v-if="total == 0"></nonemores>
				<view class="mbPackage" v-if="total != 0">
					<!-- 循环模板 -->
					<view class="listMb" v-for="(item, index) in dynamicList">
						<view class="listMbPackage">
							<view class="listMbTitle">
								<view class="titleLeft">
									<view>
										<image :src="item.logo" />
									</view>
									<span>{{ item.storename }}</span>
								</view>
								<view class="titleRight">
									<span>{{ statusList[item.status] }}</span>
								</view>
							</view>
							<view :class="textList.indexOf(index) !== -1 ? 'fullText' : 'postListTextMain'">
								<span>{{ item.content }}</span>
							</view>
							<view class="qw" @click.stop="fullText(index)" v-if="item.content.length > 50">
								<span>{{ textList.indexOf(index) !== -1 ? '收起' : '全文' }}</span>
							</view>
							<view class="imgView">
								<block v-for="(items, indexs) in item.imgs">
									<image :src="items"></image>
								</block>
							</view>
							<view class="listMbFoot">
								<span>{{ item.datetime }}</span>
								<view @click="deletMb(item)"><span>删除</span></view>
							</view>
						</view>
					</view>
					<!-- 循环模板 -->
				</view>
				<view class="tips" v-if="total != 0">
					<loadmore :isMore="isMore"></loadmore>
				</view>
			</scroll-view>
			<!--  #ifdef  MP-WEIXIN -->
			<view class="addButtom" @click="goSend" v-if="hideadd == 0"><span>发布动态</span></view>
			<!-- #endif -->
			<!--  #ifdef H5 -->
			<view class="addButtom" @click="goSend" v-if="hideadd === 0"><span>发布动态</span></view>
			<!-- #endif -->
			
		</view>
	</view>
</template>
<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo';
	import nonemores from '@/components/template/nonemores.vue';
	import loadmore from '@/components/template/loadmore.vue';
	// import TabBars from '@/components/template/tabBar.vue'
	export default {
		data() {
			return {
				textList: [],
				statusList: ['待审核', '待推送', '已推送', '被驳回'],
				scrollHeight: null,
				storeid: null,
				page: 1,
				dynamicList: [],
				total: null,
				scdpText: '',
				textTips: '全文',
				isMore: true,
				hideadd: ""
			};
		},
		components: {
			Loadlogo,
			nonemores,
			loadmore
			// TabBars
		},
		computed: {},
		onShow(e) {
			let _this = this;
			_this.init();
		},
		mounted() {},
		methods: {
			init() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.phoneHight = res.windowHeight;
						_this.scrollHeight = _this.phoneHight + 'px';
					}
				});
				// _this.getStoreDynamic();
				uni.getStorage({
					key: 'checkStoreid',
					success: function(res) {
						_this.storeid = res.data;
						_this.getStoreDynamic(res.data);
					}
				});

			},
			// 展开全文
			fullText(index) {
				let _this = this;
				if (_this.textList.indexOf(index) == -1) {
					_this.textList.push(index);
					_this.textTips = '收起';
				} else {
					_this.textTips = '展开全文';
					for (let i = 0; i < _this.textList.length; i++) {
						if (_this.textList[i] == index) {
							_this.textList.splice(i, 1);
						}
					}
				}
			},
			load() {
				let _this = this;
				if (_this.page == _this.total) {
					_this.isMore = true;
				} else {
					_this.isMore = false;
					_this.page++;
					let data = {
						storeid: _this.storeid,
						page: _this.page
					};
					App._post_form('&p=store&do=dynamicList', data, res => {
						_this.dynamicList = [..._this.dynamicList, ...res.data.list];
						_this.total = res.data.total;
						_this.isMore = true;
					});
				}
			},
			goSend() {
				let _this = this;
				App.navigationTo({
					url: 'pages/subPages/merchant/sendDynamic/sendDynamic'
				});
			},
			getStoreDynamic(storeid = '') {
				let _this = this;
				_this.isMore = false;
				_this.page = 1;
				let data = {
					storeid: _this.storeid || storeid,
					page: _this.page
				};
				App._post_form('&p=store&do=dynamicList', data, res => {
					_this.dynamicList = res.data.list;
					_this.total = res.data.total;
					_this.hideadd = res.data.hideadd;
					_this.isMore = true;
				});
			},

			deletMb(item) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确认删除，数据将无法恢复',
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: item.id
							};
							App._post_form('&p=store&do=deleteDynamic', data, res => {
								for (let i = 0; i < _this.dynamicList.length; i++) {
									if (item.id == _this.dynamicList[i].id) {
										_this.dynamicList.splice(i, 1);
									}
								}
								uni.showToast({
									icon: 'none',
									title: '删除成功',
									duration: 2000
								});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>

<style lang="less">
	.tips {
		height: 80upx;
		text-align: center;

		>span {
			line-height: 80upx;
			font-size: 28upx;

			color: black;
		}
	}

	.addButtom {
		left: 263upx;
		position: fixed;
		bottom: 20upx;
		text-align: center;
		width: 224upx;
		height: 90upx;
		background: rgba(51, 136, 255, 1);
		box-shadow: 0px 2upx 10upx 0px rgba(51, 136, 255, 0.4);
		border-radius: 45upx;

		>span {
			line-height: 90upx;
			font-size: 28upx;
			color: rgba(255, 255, 255, 1);
		}
	}

	.listMbFoot {
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;

		>span {
			line-height: 37upx;
			font-size: 24upx;
			color: rgba(153, 153, 153, 1);
		}

		>view {
			display: inline-block;
			width: 76upx;
			height: 37upx;
			background: rgba(51, 136, 255, 1);
			border-radius: 4upx;
			text-align: center;

			>span {
				line-height: 37upx;
				font-size: 24upx;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.imgView {
		margin-top: 20upx;

		>image {
			margin: 0 10upx 10upx 0;
			width: 202upx;
			height: 202upx;
		}
	}

	.qw {
		margin-top: 20upx;

		>span {
			font-size: 28upx;

			color: rgba(51, 136, 255, 1);
		}
	}

	.listMbText {
		margin-top: 20upx;

		>span {
			font-size: 26upx;

			color: rgba(51, 51, 51, 1);
		}
	}

	.titleLeft {
		>view {
			display: inline-block;
			vertical-align: middle;
			width: 54upx;
			height: 54upx;
			border-radius: 50%;
			overflow: hidden;

			>image {
				width: 54upx;
				height: 54upx;
			}
		}

		>span {
			margin-left: 10upx;
			vertical-align: middle;
			font-size: 28upx;

			color: rgba(51, 51, 51, 1);
		}
	}

	.titleRight {
		>span {
			line-height: 54upx;
			font-size: 24upx;

			color: rgba(255, 68, 68, 1);
		}
	}

	.listMbTitle {
		display: flex;
		justify-content: space-between;

		>view {
			display: inline-block;
		}
	}

	page {
		font-size: 0;
		background: #f8f8f8;
	}

	.mbPackage {
		padding: 10upx 30upx 30upx 30upx;
	}

	.listMb {
		margin-top: 20upx;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.listMbPackage {
		padding: 30upx;
	}

	.fullText {
		word-wrap: break-word;
		font-size: 26upx;

		color: rgba(51, 51, 51, 1);
	}

	.postListTextMain {
		font-size: 26upx;

		color: rgba(51, 51, 51, 1);
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
