<template>
	<view>
		<view class="fabu" @click="fabu">
			<u-icon name="edit-pen-fill" color="#fff" size="50"></u-icon>
		</view>
		
		<tui-bottom-popup :show="openFabu" zIndex="998" @close="close">
			<view class="fabu-box">
				<view class="title">
					<text>发布动态</text>
					<view class="close-span" @click="close">
						<u-icon name="close-circle" color="#98a2a1" size="50"></u-icon>
					</view>
				</view>
				
				<view class="menu-box" v-if="!edit">
					<view class="menu-btn" @click="pubText(0)">
						<view class="menu-icon red">
							<u-icon name="photo" size="50"></u-icon>
						</view>
						<view>图文</view>
					</view>
					<view class="menu-btn" @click="pubText(1)">
						<view class="menu-icon">
							<u-icon name="mic" size="50"></u-icon>
						</view>
						<view>声音</view>
					</view>
					<view class="menu-btn" @click="pubText(2)">
						<view class="menu-icon blue">
							<u-icon name="play-circle-fill" size="50"></u-icon>
						</view>
						<view>视频</view>
					</view>
				</view>
				
				<view class="post-box" v-if="edit">
					<view class="input-box">
						<u-input type="textarea" placeholder="请输入动态内容" v-model="form.content" />
					</view>
					<form-image v-if="form.fileType == 0" :number="6" v-model="imgList"></form-image>
					<form-voice v-if="form.fileType == 1"  @sec="toSec" v-model="form.file"></form-voice>
					<form-video v-if="form.fileType == 2" v-model="form.file"></form-video>
					<form-city @select="selectClerk"></form-city>
					<view class="btn-box">
						<view class="btn" @click="submit">立即发布</view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
		
		<clerk-popup ref="clerk"></clerk-popup>
	</view>
</template>

<script>
	import FormImage from '@/pages/tabbar/components/trend/formImage.vue';
	import FormVideo from '@/pages/tabbar/components/trend/formVideo.vue';
	import FormVoice from '@/pages/tabbar/components/trend/formVoice.vue';
	import formCity from '@/pages/tabbar/components/trend/formCity.vue';
	import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
	import ClerkPopup from "@/pages/tabbar/components/trend/clerk-popup.vue";
	import TrendApi from '@/sheep/api/worker/trend'; 
	import { showAuthModal } from '@/sheep/hooks/useModal';
	import { WxaSubscribeTemplate } from '@/sheep/util/const';
	import sheep from '@/sheep';
	export default {
		components: {
			FormImage,
			FormVideo,
			FormVoice,
			formCity,
			tuiBottomPopup,
			ClerkPopup,
		},
		props:{
			btnType: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: String,
				default(){
					return 'fabu'
				}
			},
		},
		data() {
			return {
				openFabu: false,
				
				edit: false,
				
				form: {
					workerClerkId: null,
					content: '',
					seconds: 0,
					file: '',
					fileType: 0,
				},
				imgList: [],
			}
		},
		computed: {
			authType() {
				return sheep.$store('modal').auth;
			},
			clerk() {
				return sheep.$store('sys').currentClerk;
			},
		},
		methods: {
			fabu() {
				this.init();
				
				const isLogin = sheep.$store('user').isLogin;
				if(!isLogin) {
					showAuthModal();
					return;
				}
				
				const userInfo = sheep.$store('user').userInfo;
				// 如果用户已经有头像和昵称,不要每次登录都要重新上传头像。
				if(userInfo.visible) {
					this.openFabu = true;
					return;
				}
				// 触发小程序授权信息弹框
				// #ifdef MP-WEIXIN
				showAuthModal('mpAuthorization');
				// #endif
				
				// #ifndef MP-WEIXIN
				showAuthModal('h5Authorization');
				// #endif
			},
			init() {
				this.edit = false;
				this.form.content = '';
				this.form.file = '';
				this.imgList = [];
			},
			selectClerk() {
				this.$refs.clerk.showPopup();
			},
			close() { 
				this.openFabu = false;
			}, 
			pubText(fileType) {
				this.edit = true;
				this.form.fileType = fileType;
			},
			toSec(e) {
				this.form.seconds = e;
			},
			submit() {
				// #ifdef MP
				// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
				this.subscribeMessage();
				// #endif
				
				if(!this.form.content){
					sheep.$helper.toast('请输入动态内容');
					return;
				}
				if(this.form.fileType == 0){
					if(this.imgList.length < 1){
						sheep.$helper.toast('请上传图片');
						return;
					}else{
						this.form.file = this.imgList.join(',');
					}
				}else if(this.form.fileType == 1){
					if(!this.form.file){
						sheep.$helper.toast('请上传录音');
						return;
					}
				}else if(this.form.fileType == 2){
					if(!this.form.file){
						sheep.$helper.toast('请上传视频');
						return;
					}
				}
				
				if(this.clerk.id > 0){
					this.form.workerClerkId = this.clerk.id;
				}
				TrendApi.createTrend(this.form).then((res) => {
					if(res.data){
						this.close();
					}
				});
			},
			subscribeMessage() {
			  const event = [WxaSubscribeTemplate.TREND_APPLY_SUCCESS];
			  event.push(WxaSubscribeTemplate.CLERK_BLIND);
			  event.push(WxaSubscribeTemplate.CLERK_ORDER);
			  sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
			    // 订阅后记录一下订阅状态
			    uni.removeStorageSync(WxaSubscribeTemplate.TREND_APPLY_SUCCESS);
			    uni.setStorageSync(WxaSubscribeTemplate.TREND_APPLY_SUCCESS, '已订阅');
			  });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fabu {
		background-color: var(--ui-BG-Main);
		position: fixed;
		bottom: 220rpx;
		right: 25rpx;
		border-radius: 100%;
		height: 90rpx;
		width: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 48rpx;
		color: black;
		box-shadow: 0 0 10px #cccccc;
	}
	.fabu-box {
		padding: 30rpx;
		
		.title {
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			border-bottom: 1rpx solid #f5f5f5;
			padding-bottom: 30rpx;
			
			.close-span {
				position: absolute;
				right: 5px;
				top: 5px;
				width: 70rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		.menu-box {
			display: flex;
			padding: 30px 55px;
			justify-content: space-between;
			
			.menu-btn {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 12px;
				
				.menu-icon {
					width: 110rpx;
					height: 110rpx;
					background-color: var(--ui-BG-Main);
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 100%;
					margin-bottom: 10px;
				}
				
				.red {
					background-color: #dd6161;
				}
				
				.blue {
					background-color: #37c0fe;
				}
			}
		}
		
		.close-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #909399;
			height: 60rpx;
		}
	}
	
	.post-box {
		
		.input-box {
			padding: 10rpx;
		}
		
		.btn-box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;
			padding-bottom: 20rpx;
			
			.btn {
				background-color: var(--ui-BG-Main);
				color: #fff;
				border-radius: 40px;
				font-size: 28rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 80rpx;
			}
		}
	}
</style>
