<template>
	<view class="">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title-color="#000000" :is-back="true" title="我要报名"></u-navbar>
		<!-- #endif -->

		<view class="add-media" @click="handleUploadWork">
			<view class="flex-direction flex justify-center" style="align-items: center;" v-show="!showUrl">
				<u-icon name="plus-circle-fill" color="#E72226" size="90"></u-icon>
				<text v-text="activeType == 'VIDEO_TEXT'?'上传视频作品':'上传图片作品'"
					style="margin-top: 26rpx; color: #010101; font-size: 24rpx; font-weight: bold;">上传作品(图片或视频)</text>
			</view>
			<video v-if="activeType == 'VIDEO_TEXT' && showUrl" :src="showUrl"></video>
			<image v-if="activeType == 'IMAGE_TEXT' && showUrl" :src="showUrl" mode=""></image>
		</view>

		<view class="fill-info">
			<text class="info-title" style="font-weight: bold; color: #010101; font-size: 34rpx;">填写信息</text>
			<view v-if="activeType == 'VIDEO_TEXT'" style="margin-bottom: 64rpx;">
				<text style="color: #010101; font-size: 28rpx; font-weight: bold;">作品封面</text>
				<view style="padding: 5rpx 0 20rpx; border-bottom: 1rpx solid #E3E3E3;">
					<upload-img ref="uploadImg" :count="1" col="4" @click="uploadCover"></upload-img>
				</view>
			</view>

			<view style="margin-bottom: 64rpx;">
				<text style="color: #010101; font-size: 28rpx; font-weight: bold;">标题</text>
				<view style="padding: 32rpx 0 0; border-bottom: 1rpx solid #E3E3E3;">
					<u-input placeholder="请输入标题内容" v-model="applyInfo.title"></u-input>
				</view>
			</view>

			<view style="margin-bottom: 64rpx;">
				<text style="color: #010101; font-size: 28rpx; font-weight: bold;">详细介绍</text>
				<view style="padding: 32rpx 0 0; border-bottom: 1rpx solid #E3E3E3;">
					<u-input placeholder="请输入详细介绍" v-model="applyInfo.content"></u-input>
				</view>
			</view>

			<view style="margin-bottom: 64rpx;">
				<text style="color: #010101; font-size: 28rpx; font-weight: bold;">联系方式</text>
				<view style="padding: 32rpx 0 0; border-bottom: 1rpx solid #E3E3E3;">
					<u-input placeholder="请输入手机号码" v-model="applyInfo.phone"></u-input>
				</view>
			</view>
			<u-button shape="circle" :custom-style="customStyle" @click="submit">确定提交</u-button>
		</view>
	</view>
</template>

<script>
	import uploadImg from "@/components/uploadImg/uploadImg.vue"
	import config from "@/assets/http/config.js"
	export default {
		name: '',
		components: {
			uploadImg
		},
		data() {
			return {
				customStyle: {
					color: 'white',
					background: "#E72226",
					fontSize: '32rpx',
					width: '340rpx',
					margin: '25rpx auto 0'
				},
				//显示的url，有可能是图文，也有可能是视频
				showUrl: '',

				applyInfo: {},
				activeType: '', //活动类型: VIDEO_TEXT视频图文 IMAGE_TEXT图片文本
			};
		},
		onLoad(options) {
			if (this.$isEmpty(this.vuex_userId)
				||this.$isEmpty(options.activeType)
				||this.$isEmpty(options.activeId)) {
				uni.switchTab({
					url:"/pages/index/home"
				})
				return
			}
			this.initData(options)
		},
		methods: {
			/**
			 * 初始化数据
			 */
			initData(options) {
				this.activeType = options.activeType;
				// this.activeType = 'IMAGE_TEXT';
				this.applyInfo = {
					userId: this.vuex_userId,
					phone: this.vuex_phone,
					activeId: options.activeId,
					title: "",
					imgUrl: "",
					videoUrl: "",
					content: "",
				}
			},
			/**
			 * 上传封面
			 */
			uploadCover(e) {
				this.applyInfo.imgUrl = e[0]
			},
			/**
			 * 上传文件
			 * 图文存进imgUrl
			 */
			async uploadFile(params) {
				let res = await this.$api.uploadFile(params)
				if (this.activeType == 'VIDEO_TEXT') {
					this.applyInfo.videoUrl = res.data.data.link;
				} else {
					this.applyInfo.imgUrl = res.data.data.link
				}
			},
			/**
			 * 上传作品
			 */
			handleUploadWork() {
				if (this.activeType == 'VIDEO_TEXT') {
					//上传视频作品
					this.uploadVideoWork()
				} else {
					//上传图片作品
					this.uploadImageWork()
				}
			},
			/**
			 * 上传图文作品
			 */
			async uploadImageWork() {
				let resp = await this.$mpi.chooseImage()
				let res = await this.$api.uploadFile(resp[0])
				this.applyInfo.imgUrl = res.data.data.link
				//显示的是图文链接
				this.showUrl = this.applyInfo.imgUrl
			},
			/**
			 * 上传视频作品
			 */
			async uploadVideoWork() {
				this.$dialog.showLoading('正在上传中..')
				let resp = await this.chooseVideo()
				//上传视频链接
				let videoRes = await this.$api.uploadFile(resp.tempFilePath)
				this.applyInfo.videoUrl = videoRes.data.data.link
				//上传视频封面链接
				let coverRes = await this.$api.uploadFile(resp.thumbTempFilePath)
				this.applyInfo.imgUrl = coverRes.data.data.link
				this.$refs.uploadImg.imgList = [this.applyInfo.imgUrl]
				//显示的是视频链接
				this.showUrl = this.applyInfo.videoUrl
				uni.hideLoading()
			},
			/**
			 * 选择视频
			 */
			chooseVideo() {
				var that = this;
				return new Promise((resolve, reject) => {
					uni.chooseVideo({
						count: 1,
						sourceType: ['album'],
						success: function(res) {
							console.log("视频大小", res)
							resolve(res)
						},
						fail() {
							uni.hideLoading()
						}
					});
				})
			},
			/**
			 * 压缩视频
			 */
			compressVideo() {
				uni.compressVideo({
					src: tempFilePath,
					quality: 'high', //'low':低，'medium':中，'high':高  
					bitrate: 0,
					fps: 0,
					resolution: 0,
					success: function(csRes) {
						// 未进入                        
						console.log('压缩后大小')
						console.log(csRes.size)

					},
					fail: function(cfRes) {
						console.log(cfRes)
						uni.showToast({
							title: '视频压缩失败',
							icon: 'none'
						})
					}
				});
			},
			submit() {
				if (this.activeType == 'VIDEO_TEXT') {
					//视频
					if (this.$isEmpty(this.applyInfo.videoUrl)) {
						this.$u.toast('请上传视频作品')
						return
					}
					if (this.$isEmpty(this.applyInfo.imgUrl)) {
						this.$u.toast('请上传作品封面')
						return
					}
				} else {
					//图文
					if (this.$isEmpty(this.applyInfo.imgUrl)) {
						this.$u.toast('请上传图文作品')
						return
					}
				}
				if (this.$isEmpty(this.applyInfo.title)) {
					this.$u.toast('请输入标题内容')
					return
				}
				if (this.$isEmpty(this.applyInfo.content)) {
					this.$u.toast('请输入详情内容')
					return
				}
				if (this.$isEmpty(this.applyInfo.phone)) {
					this.$u.toast('请输入手机号')
					return
				}
				this.$api.activity.submitForm(this.applyInfo).then(res => {
					if (res.data.success) {
						this.$dialog.showModalAndBack('添加成功', this.vuex_theme.bgColor)
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.add-media {
		width: 700rpx;
		height: 428rpx;
		border-radius: 14rpx;
		background: #FFFFFF;
		margin: 40rpx auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.fill-info {
		width: 700rpx;
		border-radius: 14rpx;
		background: #FFFFFF;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		padding: 40rpx 54rpx 50rpx;
		margin-bottom: 88rpx;

		.info-title {
			position: relative;
			margin-bottom: 60rpx;

			&:before {
				content: '';
				width: 8rpx;
				height: 32rpx;
				background: #E72226;
				position: absolute;
				left: -18rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
</style>
