<template>
	<view class="ios-bottom">
		<view class="info">
			<view class="item info-logo" @click="updImg('logo', '')">
				<label>企业LOGO</label>
				<image :src="logo" mode="aspectFill"></image>
				<uni-icons class="icon" color="#999" size="18" type="arrowright"></uni-icons>
			</view>
			<view class="item info-text">
				<label>企业简介</label>
				<textarea v-model="description" placeholder="输入企业简介" />
			</view>
			<view class="item info-text">
				<label>企业地址</label>
				<input v-model="address" placeholder="输入企业地址" />
			</view>
		</view>
		<block v-for="(module, moduleIndex) in modules" :key="moduleIndex">
			<view class="module-item" v-if="module.type === 1">
				<view class="module-title">
					<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
					<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
				</view>
				<view class="module-textarea">
					<textarea placeholder="输入文字内容" v-model="module.content.content" />
				</view>
			</view>
			<view class="module-item" v-if="module.type === 2">
				<view class="module-title">
					<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
					<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
				</view>
				<view class="module-imgs">
					<view
						class="item"
						v-for="(item, index) in module.content.image"
						:key="index"
					>
						<image
							class="cover"
							:src="item.showpath"
							mode="aspectFill"
							@click="openImg(module.content.image, index, 'imgs')"
							@longpress="removeImg('imgs', moduleIndex, index)"
						/>
						<view class="item-input">
							<input type="text" v-model="item.title" placeholder="输入标题" />
						</view>
					</view>
					<view class="item" @click="updImgs(moduleIndex)">
						<view class="item-upd cover">
							<uni-icons type="plus" size="20" color="#999"/>
							<view>上传图片</view>
						</view>
					</view>
				</view>
				<view class="module-hint">点击查看图片，长按删除图片</view>
			</view>
			<view class="module-item" v-if="module.type === 3">
				<view class="module-title">
					<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
					<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
				</view>
				<view class="module-videos">
					<view class="item">
						<block v-if="module.content.video_image.showpath != ''">
							<image
								class="cover"
								:src="module.content.video_image.showpath"
								mode="aspectFill"
								@click="openImg([module.content.video_image.showpath], 0, 'videos')"
								@longpress="removeImg('videoCover', moduleIndex, '')"
							/>
						</block>
						<block v-else>
							<view class="item-upd" @click="updImg('videoCover', moduleIndex)">
								<uni-icons type="plus" size="20" color="#999"/>
								<view>上传视频封面</view>
							</view>
						</block>
					</view>
					<view class="item">
						<video
							class="cover"
							v-if="module.content.video_url.showpath != ''"
							:src="module.content.video_url.showpath"
							@longpress="removeImg('video', moduleIndex, '')"
						/>
						<view class="item-upd" @click="updImg('video', moduleIndex)" v-else>
							<uni-icons type="plus" size="20" color="#999"/>
							<view>上传视频</view>
						</view>
					</view>
				</view>
				<view class="module-hint">点击查看封面/视频，长按删除封面/视频</view>
			</view>
		</block>
		<view class="add-modules" @click="addModule">
			<uni-icons class="icon" type="plus" size="18" color="#c82626"/> 添加展示模块
		</view>
	</view>
</template>

<script>
	import { basicsInfo, basicsConfig } from '@/apis/interfaces/store'
	import { uploads } from '@/apis/interfaces/uploading'
	export default {
		data() {
			return {
				logo		: '',
				description	: '',
				address		: '',
				modules		: [],
				modulesType	: []
			};
		},
		created() {
			Promise.all([basicsInfo('GET', {}), basicsConfig()]).then(res => {
				console.log(res)
				
				let info 	= res[0]
				this.logo	 	 = info.base.cover
				this.description = info.base.description
				this.modules	 = info.extends
				this.address	 = info.info.address
				this.modulesType = res[1]
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods:{
			// 图片预览
			openImg(paths, index, type){
				if(type === 'imgs'){
					paths = paths.map(val => {
						return val.showpath
					})
				}
				uni.previewImage({
					urls	 : paths,
					current	 : index,
					indicator: 'number'
				})
			},
			// 删除图片
			removeImg(type, moduleIndex, index){
				let modulesObj = this.modules[moduleIndex]
				if(type === 'videoCover'){
					modulesObj.content.video_image.showpath = ''
					modulesObj.content.video_image.path = ''
				}
				if(type === 'imgs'){
					modulesObj.content.image.splice(index, 1)
				}
				if(type === 'video'){
					modulesObj.content.video_url.showpath = ''
					modulesObj.content.video_url.path = ''
				}
				this.$set(this.modules, moduleIndex, modulesObj)
			},
			// 单图上传
			updImg(type, index){
				switch(type){
					case 'logo':
						uni.chooseImage({
							crop: {width: 300, height: 300},
							success: path=> {
								uploads([{
									name: 'logo',
									uri : path.tempFilePaths[0]
								}]).then(res => {
									this.logo = res.url[0]
								}).catch(err => {
									uni.showToast({
										title: err.message,
										icon : 'none'
									})
								})
							}
						})
						break
					case 'videoCover':
						uni.chooseImage({
							crop: {width: 500, height: 350},
							success: path=> {
								uploads([{
									name: 'logo',
									uri : path.tempFilePaths[0]
								}]).then(res => {
									let modulesObj = this.modules[index]
									modulesObj.content.video_image.showpath = res.url[0]
									modulesObj.content.video_image.path = res.path[0]
									this.$set(this.modules, index, modulesObj)
								}).catch(err => {
									uni.showToast({
										title: err.message,
										icon : 'none'
									})
								})
							}
						})
						break
					case 'video':
						uni.chooseVideo({
							success: path=> {
								uploads([{
									name: 'video',
									uri : path.tempFilePath
								}]).then(res => {
									let modulesObj = this.modules[index]
									modulesObj.content.video_url.showpath = res.url[0]
									modulesObj.content.video_url.path = res.path[0]
									this.$set(this.modules, index, modulesObj)
								}).catch(err => {
									uni.showToast({
										title: err.message,
										icon : 'none'
									})
								})
							}
						})
						break
				}
			},
			// 批量上传图片
			updImgs(index){
				uni.chooseImage({
					success: res=>{
						let path = res.tempFiles.map((val, index) => {
							return {
								name: 'uploads' + index,
								uri : val.path
							}
						})
						uploads(path).then(pathRes => {
							let modulesObj = this.modules[index],
								paths	   = []
							for(let i in pathRes.path){
								paths.push({
									showpath: pathRes.url[i],
									path	: pathRes.path[i],
									title	: ''
								})
							}
							modulesObj.content.image = [...modulesObj.content.image, ...paths]
							this.$set(this.modules, index, modulesObj)
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
					}
				})
			},
			// 添加展示模块
			addModule(){
				let modulesList = this.modulesType.map(val => {
					return val.value
				})
				
				uni.showActionSheet({
					itemList: modulesList,
					success : res => {
						let content
						switch(this.modulesType[res.tapIndex].id){
							case 1:
								content = {
									content: ''
								}
								break
							case 2:
								content = {
									image: []
								}
							break
							case 3:
								content = {
									video_image: {
										showpath: '',
										path	: ''
									},
									video_url  : {
										showpath: '',
										path	: ''
									}
								}
							break
						}
						
						this.modules.push({
							type	: this.modulesType[res.tapIndex].id,
							title	: '',
							content : content
						})
					}
				})
			},
			
			// 删除展示模块
			removeModule(index){
				this.modules.splice(index, 1)
			},
			
			// 保存基础信息
			onNavigationBarButtonTap(e){
				basicsInfo('PUT', {
					cover		: this.logo,
					description	: this.description,
					address		: this.address,
					extends		: this.modules
				}).then(res => {
					uni.showModal({
						title		: '提示',
						content		: '基本信息已保存',
						showCancel	: false,
						success		: modalRes=> {
							if(modalRes.confirm){
								this.$Router.back()
							}
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 基础信息
	.info{
		background: white;
		padding: 0 $padding;
		.item{
			position: relative;
			padding: $padding 0 $padding 200rpx;
			&::after{
				position: absolute;
				left: 0;
				bottom: 0;
				right: -$padding;
				content: " ";
				height: 1rpx;
				background: #eee;
			}
			&:last-child::after{
				display: none;
			}
		}
		.info-logo{
			text-align: right;
			padding-right: 40rpx;
			label{
				position: absolute;
				left: 0;
				height: 88rpx;
				line-height: 88rpx;
			}
			image{
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				vertical-align: top;
				background: $border-color-lg;
			}
			.icon{
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -10px;
			}
		}
		.info-text{
			label{
				position: absolute;
				left: 0;
				height: 40rpx;
				line-height: 40rpx;
			}
			textarea{
				line-height: 40rpx;
				width: 100%;
				height: 160rpx;
			}
			input{
				height: 40rpx;
				width: 100%;
			}
		}
	}
	// 模块
	.add-modules{
		line-height: 90rpx;
		text-align: center;
		color: $text-price;
		background: white;
		margin-top: $margin;
		.icon{
			vertical-align: middle;
			margin-right: $margin/3;
		}
	}
	// 展示模块
	.module-item{
		background: white;
		padding: $padding/2 $padding;
		margin-top: $margin;
		.module-title{
			display: flex;
			justify-content: space-between;
			padding-bottom: $padding/2;
			border-bottom: solid 1rpx $border-color;
			.title-input{
				width: calc(100% - 150rpx);
				height: 70rpx;
				font-size: $title-size;
			}
			.remove-btn{
				line-height: 70rpx;
				color: $text-price;
				text-align: right;
				font-size: $title-size-m;
			}
		}
		.module-textarea{
			padding: $padding 0 $padding/2;
			width: 100%;
			font-size: $title-size;
			line-height: 50rpx;
			height: 200rpx;
			
		}
		.module-imgs{
			display: flex;
			flex-wrap: wrap;
			padding-top: $padding/2;
			margin-left: -10rpx;
			margin-right: -10rpx;
			.item{
				position: relative;
				background: #F8F8F8;
				width: calc(25% - 20rpx);
				padding-top: calc(25% - 20rpx);
				margin: 10rpx;
				.cover{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}
				.item-input{
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					background: rgba($color: #000000, $alpha: .7);
					input{
						height: 50rpx;
						line-height: 50rpx;
						font-size: 28rpx;
						text-align: center;
						z-index: 4;
						color: white;
					}
				}
				.item-upd{
					@extend .vertical;
					text-align: center;
					font-size: $title-size-m;
					color: $text-gray-m;
				}
			}
		}
		.module-hint{
			color: $text-gray;
			font-size: $title-size-sm;
			padding: $padding/2 0;
			line-height: 50rpx;
		}
		.module-videos{
			display: flex;
			padding: $padding 0 ($padding/2);
			margin-left: -10rpx;
			margin-right: -10rpx;
			.item{
				position: relative;
				width: calc(50% - #{$margin/2});
				padding-top: calc(35% - #{$margin/2});
				background: #f8f8f8;
				margin: 0 10rpx;
				.item-upd{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					text-align: center;
					font-size: $title-size-m;
					color: $text-gray-m;
					line-height: 40rpx;
					@extend .vertical;
				}
				.cover{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
