<template>
	<view id="release">
		<u-form :model="form" ref="uForm">
			<u-form-item label="标题" label-position="right"><u-input v-model="form.name" placeholder="请输入标题" /></u-form-item>
			<!-- form-data -->
			<view class="titles">封面</view>
			<u-upload
				:form-data="coverformdata"
				:max-count="1"
				:header="header"
				name="article_cover"
				:action="action"
				del-color="#ececec"
				upload-text="选择图片"
				del-bg-color="#fff"
				:file-list="fileListA"
				@on-success="uploadcover"
			></u-upload>
			<view class="titles">图片</view>
			<u-upload
				:form-data="imgformdata"
				name="article_image"
				:header="header"
				:action="action"
				@on-success="uploadphoto"
				del-color="#ececec"
				upload-text="选择图片"
				del-bg-color="#fff"
				:max-count="5"
				:file-list="fileListB"
			></u-upload>
			<!-- 标签 -->
			<view>
				<view class="titles">标签</view>
				<view class="form-view active" @click="show_add()">+ 新建标签</view>
				<view :class="['form-view',item.state == true ? 'active' : '']" v-for="(item, index) in fileListes" :key="index" @click="changeselect(index)">
					{{ item.name }}
				</view>
			</view>
			<!-- 简介 -->
			<view class="titles">简介</view>
			<view class="titles_border"><textarea placeholder="请输入内容..." v-model="form.intro"></textarea></view>
			<!-- 底部弹框 商品选择 -->
			<view class="show_two">
				<u-popup v-model="show_two" mode="bottom" :closeable="true">
					<view class="title"><text>选择商品</text></view>
					<!-- 商品列表 -->
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll">
						<view class="listes_shoping" v-for="(item, index) in list" :key="index" @click="checkboxChange(item.goods_id)">
							<view>
								<u-checkbox-group>
									<u-checkbox shape="circle" active-color="#FF780F"   v-model="item.checked" :disabled="true"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view><image :src="item.goods_image" mode="widthFix"></image></view>
							<view class="contentes">{{ item.goods_name }}</view>
						</view>
					</scroll-view>

					<!-- 提交按钮 -->
					<view class="u-button" @click="changes()">确定</view>
				</u-popup>
				<!-- 底部选择商品列表 -->
				<view @click="show_two = true">
					选择商品
					<image class="images" src="../../static/image/tosign/bhottom.png"></image>
				</view>
				<!-- 选择后的列表 -->
				<view class="List_tosign" v-for="list in shoplist">
					<view><image :src="list.goods_image" mode="scaleToFill"></image></view>
					<view>{{ list.goods_name }}</view>
					<view><image src="../../static/image/tosign/delete.png" mode="widthFix" @click="delarr(list.goods_id)"></image></view>
				</view>
			</view>
			<!-- 提交 -->
			<u-button class="custom-style" shape="circle" size="default" @click="publish">发表</u-button>
		</u-form>
		<!-- 添加标签的按钮 -->
		<u-popup v-model="show" mode="center" border-radius="14">
			<view class="text">创建属于你的标签吧</view>
			<view class="u-inputes"><u-input v-model="tagcontent" /></view>
			<u-button class="custom-style-button" shape="circle" size="default" @click="addLiveSpec">确定</u-button>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
				intro: '',
				sex: ''
			},
			// 演示地址，请勿直接使用
			action: 'https://dmmall.sdbairui.com/storeapi/Upload/uploadFile',
			coverformdata: {
				name: 'article_cover'
			},
			imgformdata: {
				name: 'article_image'
			},
			fileListA: [],
			fileListB: [],
			imgarrA: [],
			imgarrB: [],
			header: {
				Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
			},
			fileListes: [],
			show: false,
			show_two: false,
			filesList: [],
			arres_list: [],
			shoplist: [],
			checked: false,
			list: [],
			List_tosign: [],
			scrollTop: 0,
			imgarr: [], //上传图片数组
			cover: '', //图文封面
			selectarr: [], //选中标签
			tagcontent: ''
		};
	},
	onLoad() {
		// 缓存取选择好的数据
		this.tosign();
		this.getLiveSpec();
	},
	methods: {
		publish() {
			let arr = this.imgarrB;
			let newarr = [];
			for (let index in arr) {
				newarr.push(arr[index].file_id);
			}
			this.$u.api.publishphoto({
				article_title: this.form.name,
				article_content: this.form.intro,
				article_pic: this.imgarrA[0].file_name,
				file_id: newarr,
				goods_id_arr: this.arres_list,
				label_arr: this.selectarr
			}).then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					});
					setTimeout(function(){
						uni.navigateBack({
							delta:1
						})
					},1000)
				}
			});
		},
		// 获取商品数组变化
		getshoplist(id) {
			let arr = this.arres_list;
			let newarr = this.list;
			this.shoplist = [];
			for (let index in arr) {
				for (let i in newarr) {
					if (arr[index] == newarr[i].goods_id) {
						this.shoplist.push(newarr[i]);
					}
				}
			}
		},
		// 改变选中状态
		changeselect(num) {
			if (this.fileListes[num].state == true) {
				this.fileListes[num].state = false;
				let index = this.selectarr.indexOf(this.fileListes[num].id);
				this.selectarr.splice(index, 1);
			} else {
				this.fileListes[num].state = true;
				this.selectarr.push(this.fileListes[num].id);
			}
		},
		// 获取标签
		getLiveSpec() {
			let that = this;
			this.$u.api.getLiveSpec({}).then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					let arr = res.data;
					for (let index in arr) {
						arr[index].state = false;
					}
					that.fileListes = arr;
				}
			});
		},
		// 创建标签
		addLiveSpec() {
			this.$u.api.createLivesp({
				spec_name: this.tagcontent
			}).then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					this.tagcontent = '';
					this.show = false;
					this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					});
				}
			});
		},
		// 上传封面
		uploadcover(data) {
			let obj = data.data;
			obj.url = obj.file_path;
			this.imgarrA.push(obj);
		},
		// 上传图片
		uploadphoto(data) {
			let obj = data.data;
			obj.url = obj.file_path;
			this.imgarrB.push(obj);
		},
		changes() {
			let that = this;
			that.show_two = false;
		},
		show_add() {
			this.show = !this.show;
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			let id = e;
			for(let num in this.list){
				if(id==this.list[num].goods_id){
					if(this.list[num].checked==true){
						this.delarr(id);
					}else{
						this.pushes(id);
					}
					this.list[num].checked = !this.list[num].checked
				}
			}
		},
		// 删除直播商品
		delarr(id) {
			var that = this;
			if (id == '') {
				console.log('为空');
			} else {
				let index = that.arres_list.indexOf(id);
				that.arres_list.splice(index, 1);
				that.getshoplist(id);
			}
		},
		// 增加直播商品
		pushes(id) {
			var that = this;
			if (id == '') {
				console.log('为空');
			} else {
				that.arres_list.push(id);
				that.getshoplist(id);
			}
		},
		tosign() {
			this.$u.api.canselectgood({}).then(res => {
				if (res.data.live_stataes == 0) {
					this.$u.route({
						url: `/pages/${url}`
					});
				} else {
					let arr = res.data.list;
					for (let index in arr) {
						arr[index].checked = false;
					}
					this.list = arr;
				}
			});
			// try {
			// 	const value = uni.getStorageSync('list_tosign');
			// 	if (value) {
			// 		console.log(value);
			// 	}
			// } catch (e) {
			// 	// error
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
#release {
	width: 690rpx;
	margin: 0 auto;

	.form-view {
		background: #CDC7C8;
		border-radius: 6rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		display: inline-block;
		margin-bottom: 28rpx;
		color: #fff;
	}
	.active {
		background: #FF780F;
	}
	.scroll {
		width: 100%;
		height: 400px;
	}
	.titles {
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin: 30rpx 0;
	}

	textarea {
		font-size: 26rpx;
	}

	.custom-style {
		background: rgba(255, 120, 15, 1) !important;
		color: #fff !important;
		font-size: 36rpx;
	}

	.custom-style-button {
		background: rgba(255, 120, 15, 1) !important;
		color: #fff !important;
		font-size: 28rpx;
		width: 200rpx;
		margin-bottom: 23rpx;
		line-height: 60rpx;
		height: 60rpx;
	}

	.show_two .title {
		width: 100%;
		border-bottom: solid 1px #ececec;
		margin-bottom: 30rpx;
	}

	.show_two .title > text {
		font-size: 30rpx;
		padding: 30rpx;
		display: block;
	}

	.listes_shoping {
		overflow: hidden;
		zoom: 1;
		margin-bottom: 30rpx;
		height: 160rpx;
		position: relative;
	}

	.listes_shoping > view {
		float: left;
	}

	.listes_shoping > view:nth-child(1) {
		width: 36rpx;
		height: 36rpx;
		margin-top: 62rpx;
		margin-left: 30rpx;
	}

	.listes_shoping > view:nth-child(2) {
		width: 180rpx;
		height: 160rpx;
		margin: 0 31rpx 0 19rpx;
	}

	.listes_shoping > view:nth-child(2) image {
		width: 100%;
	}

	.listes_shoping > view:nth-child(3) {
		width: 425rpx;
		margin-top: 43rpx;
		overflow: hidden;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.u-button {
		background: #ff780f;
		width: 690rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: rgba(255, 120, 15, 1);
		border-radius: 49px;
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		margin: 0 auto 20rpx;
	}
}

.u-mode-center-box {
	padding: 120rpx;

	.text {
		font-size: 30rpx;
		margin-top: 74rpx;
		text-align: center;
		font-weight: 500;
		color: #333;
	}
}

.titles_border,
.uni-textarea-compute {
	border: 1px #bababa solid !important;
	padding: 10rpx;
	border-radius: 10rpx;
}

.u-inputes {
	margin: 30rpx 0;
	border: 1px #ececec solid;
	padding-left: 14rpx;
	width: 420rpx;
}

.show_two {
	padding: 30rpx 0 70rpx 0;
}

.show_two > view {
	font-size: 30rpx;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
}

.show_two .images {
	width: 22rpx;
	height: 12rpx;
	float: right;
	top: 14rpx;
}
.List_tosign {
	overflow: hidden;
	zoom: 1;
	margin-top: 21rpx;
	position: relative;
}
.List_tosign > view {
	float: left;
}
.List_tosign > view:nth-child(1) {
	width: 180rpx;
	height: 160rpx;
	margin-bottom: 30rpx;
	image {
		border-radius: 15rpx;
		width: 100%;
		height: 100%;
	}
}
.List_tosign > view:nth-child(2) {
	width: 420rpx;
	height: 76rpx;
	margin: 43rpx 43rpx 0 21rpx;
}
.List_tosign > view:nth-child(3) {
	width: 26rpx;
	height: 27rpx;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}
</style>
