<template>
	<view>
		<loadlogo v-if="!isWxaudit" />
		<far-bottom></far-bottom>
		<view class="sendDynamic">
			<view class="sendDynamicPackage">
				<view class="sendInput">
					<view class="sendInputPackage">
						<view class="sendInputTitle"><span>动态内容</span></view>
						<view>
							<textarea class="inputView" placeholder="内容描述，请尽量避免使用特殊符号，字体表情，颜文字等特殊文本，防止无法储存造成内容空白。" v-model="content"></textarea>
						</view>
					</view>
				</view>
				<view class="tips">
					<span>
						有图有真相
						<span>(最多上传6张图片)</span>
					</span>
				</view>

				<view class="imgView">
					<!-- 图片预览循环模板 -->
					<view class="imgPreview" v-for="(item, index) in picArr" :key="index">
						<image :src="item" />
						<image :src="imgfixUrls + 'merchant/close.png'" class="close" @click="close(item,index)" />
					</view>
					<!-- 图片预览循环模板 -->
					<view class="userImgUpdata" @click="uploadFiles(picArr.length)" v-if="picArr.length<6">
						<image :src="imgfixUrls + 'merchant/addImg.svg'" />
					</view>
				</view>
			</view>
			<view class="subnitBitton" @click="addDynamic"><span>确认发布</span></view>
		</view>
	</view>
</template>
<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo';
	// import TabBars from '@/components/template/tabBar.vue'
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif

	export default {
		data() {
			return {
				storeid: null,
				content: '',
				pic: [],
				picArr: [],
			};
		},
		components: {
			Loadlogo
			// TabBars
		},
		computed: {
			isWxaudit() {
				return this.$store.state.isWxAudit
			}
		},
		onLoad() {
			let _this = this;
			_this.init();
		},
		onShow(e) {},
		mounted() {},
		methods: {
			close(item,index){
				this.picArr.map((items,indexs)=>{
					if(items == item){
						this.picArr.splice(indexs,1)
					}
				})
			},
			init() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.phoneHight = res.windowHeight;
						_this.scrollHeight = _this.phoneHight - 125 + 'px';
					}
				});
				uni.getStorage({
					key: 'checkStoreid',
					success: function(res) {
						_this.storeid = res.data;
						App._post_form('&p=store&do=addDynamicPage', {
							storeid: res.data
						}, res => {
							if (res.data.status === 1) {
								uni.navigateBack({
									delta: 1
								})
							}
						});
					}
				});
				// #ifdef H5
				wxApi.wxRegister();
				// #endif
			},

			// 商家发布动态
			addDynamic() {
				let _this = this;
				let data = {
					storeid: _this.storeid,
					content: _this.content,
					pic: _this.pic
				};
				data.content = _this.content.replace(/\n/g,"\<br\/\>").replace(/\r/g,"\<br\/\>")
				App._post_form('&p=store&do=addDynamic', data, res => {
					uni.navigateBack({
						delta: 1
					});
				});
			},
			// 文件上传接口
			async uploadFiles(num) {
				let _this = this;
				// #ifdef H5
				if(App.getClientType() == 2){
					let res = await App.browser_upload(6);
				    for (let i = 0; i < res.tempFilePaths.length; i++) {
				    	let aa = await App._upLoad(res.tempFilePaths[i])
				    	_this.pic.push(aa.data.image);
				    	_this.picArr.push(aa.data.img);
				    }
					return
				}
				wxApi.choseImage(res => {
					wxApi.uoloadIg(res.localIds[0], data => {
						if (data.errMsg === 'uploadImage:ok') {
							uni.showLoading({});
							let requestData = {
								upload_type: 2,
								id: data.serverId
							};
							App._post_form(
								'&do=uploadFiles',
								requestData,
								res => {
									if (res.errno === 0) {
										_this.picArr.push(res.data.img);
										_this.pic.push(res.data.image);
									}
								},
								false,
								() => {
									uni.hideLoading();
								}
							);
						} else {
							uni.hideLoading();
							App.showError('上传失败');
						}
					});
				});
				// #endif
				// #ifndef H5
				wx.chooseImage({
					count: 6-num,
					sourceType: ['album', 'camera'],
					success: async function(res) {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let aa = await App._upLoad(res.tempFilePaths[i])
							_this.pic.push(aa.data.image);
							_this.picArr.push(aa.data.img);
						}
					}
				})
				// #endif
			}
		}
	};
</script>

<style lang="less">
	.subnitBitton {
		bottom: 0;
		position: fixed;
		text-align: center;
		width: 750upx;
		height: 98upx;
		background: rgba(51, 136, 255, 1);

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


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

	.userImgUpdata {
		width: 157upx;
		height: 157upx;
		background: rgba(246, 246, 246, 1);
		border: 1upx solid rgba(204, 204, 204, 1);
		border-radius: 10upx;
		text-align: center;

		>image {
			margin-top: 53upx;
			width: 53upx;
			height: 53upx;
		}
	}

	.imgPreview {
		display: inline-block;
		overflow: hidden;
		width: 157upx;
		height: 157upx;
		background: gray;
		margin-right: 37upx;
		margin-bottom: 10upx;
		border-radius: 10upx;

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

	.close {
		width: 32upx !important;
		height: 32upx !important;
		position: relative;
		bottom: 150upx;
		left: 120upx;
		z-index: 30;
	}

	.tips {
		margin-top: 30upx;

		>span {
			font-size: 24upx;


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

			>span {
				color: #999999;
			}
		}
	}

	.sendInputTitle {
		>span {
			font-size: 24upx;


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

	.sendInputPackage {
		padding: 30upx;
		background: rgba(248, 248, 248, 1);
	}

	.sendDynamic {
		width: 750upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

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

	.sendDynamicPackage {
		padding: 30upx;
	}

	.inputView {
		margin-top: 30upx;
		height: 160upx !important;
		font-size: 24upx;


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

	.imgView {
		margin-top: 30upx;
	}
</style>
