<template>
	<view>
		<uni-section title="选择图片分类上传" type="circle" padding>
			<view class="segmented-control">
				<uni-segmented-control :current="typeCurrent" :values="typeList" :styleType="styleType"
					:active-color="activeColor" @clickItem="onClickType" />
			</view>
			<uni-group mode="card">
				<view class="example-body">
					<uni-file-picker limit="9" title="最多选择9张图片"
					file-extname="png,jpg,gif,jpeg" mode="grid"
					file-mediatype="image" @success="successHandler"
					@fail="failHandler" @delete="deleteHandler" autoUpload="false"
					@select="selectHandler" :disabled="checkUpload"></uni-file-picker>
				</view>
			</uni-group>
			<view class="uploadNum">今日还可上传次数<span class="uploadText">{{getUploadNum}}</span>,已上传次数<span class="uploadText">{{uploadedNum}}</span></view>
		</uni-section>
		<uni-section title="选择图片标签" subTitle="最多选择3个" type="circle" padding>
			<uni-group mode="card">
				<view class="segmented-control">
					<view>标签列表</view>
					<uni-data-checkbox mode="tag" multiple v-model="signListSelected" :localdata="signList" @change="selectedSign" max="3"></uni-data-checkbox>
				</view>
			</uni-group>
		</uni-section>
		<button class="upLoadBtn" size="default" :loading="loadingFlag" @click="saveImg" :disabled="checkUpload">点击上传</button>
	</view>
</template>

<script>
	import {
		getSignList,listType,insertTiktokImg,queryUploadNum
	} from '@/api/index.js'
	import {
		deleteFile,uploadBatch
	} from '@/api/common.js'
	export default {
		data() {
			return {
				styleType: 'button',
				activeColor: '#007aff',
				typeCurrent: 0,
				typeId: 1,
				signList:[],
				signObject:{},
				typeList:[],
				typeIdList:[],
				loadingFlag: false,
				imgList:[],
				signListSelected:[],
				userInfo:{},
				uploadedNum: 0
			}
		},
		created() {
			this.getSignList();
			this.getTypeList();
			const userInfoSync = uni.getStorageSync("userInfo");
			this.userInfo = userInfoSync;
			this.queryUploadNum();
		},
		computed:{
			//计算可上传次数
			getUploadNum(){
				return 50 - this.uploadedNum
			},
			//动态设置上传组件禁用
			checkUpload(){
				return this.uploadedNum >= 50? true:false;
			}
			
		},
		methods: {
			
			//获取标签列表
			async getSignList(){
				const res = await getSignList({})
				if (res.data.code === 200) {
					for (let s of res.data.data) {
						let signObject = {}
						signObject.text = s.name
						signObject.value = s.id
						this.signList.push(signObject)
					}
					console.log('signList',this.signList)
				} else {
					uni.showModal({
						content: '标签列表加载失败！',
						showCancel: false
					});
				}
			},
			
			//获取分类列表
			async getTypeList(){
				const res = await listType({})
				if(res.data.code === 200){
					for (let s of res.data.data) {
						this.typeList.push(s.typeName);
						this.typeIdList.push(s.id);
					}
					console.log('分类列表',this.typeList)
					console.log('分类id列表',this.typeIdList)
				}else{
					uni.showModal({
						content: '分类列表加载失败！',
						showCancel: false
					});
				}
			},
			
			//获取艺术家今日上传图片次数
			async queryUploadNum(){
				const checkParam = {
					creatorId: this.userInfo.id
				}
				const res = await queryUploadNum(checkParam);
				console.log(res)
				if(res.data.code === 200){
					this.uploadedNum = res.data.data;
				}else{
					uni.showModal({
						content: '获取艺术家上传次数失败！',
						showCancel: false
					});
				}
			},
			//选中分类事件
			onClickType(e2){
				let that = this;
				that.flag = false;
				that.typeId = that.typeIdList[e2.currentIndex];
				//console.log('typeId',that.typeId)
				uni.showLoading({
				  title: "加载中",
				  mask: true,
				  complete() {
				    uni.hideLoading();
				  },
				});
			},
			
			//选中标签事件
			selectedSign(e){
				let that = this;
				that.signListSelected = e.detail.value; 
				//console.log('that.signListSelected'+that.signListSelected);
			},
			//文件上传成功监听事件
			successHandler(e){
				console.log('文件上传成功！'+e)
			},
			//選擇文件监听事件
			selectHandler(e){
				console.log('选择了',e)
				let that = this;
				//检查是否可上传文件
				if(that.uploadedNum >=50){
					uni.showModal({
						content: "当日已达上传图片上限,请明日再来！",
						showCancel: false
					});
					return;
				}
				that.uploadHandler(e.tempFilePaths)
			},
			//文件上传失败监听事件
			failHandler(e){
				console.log('文件上传失败！'+e)
			},
			//文件删除监听事件
			deleteHandler(e){
				console.log('文件删除',e.tempFile.url)
				//调用文件删除方法
				const param = {
				  url: e.tempFile.url
				};
				deleteFile(param).then(res =>{
					if(res.data.code != 200){
						uni.showModal({
							content: "删除失败！",
							showCancel: false
						});
					}
				})
			},
			//上传文件监听事件
			    uploadHandler:function(e){
						let that = this;
						uni.showLoading({
							title: "上传中"
						});
						console.log('上传文件：',e)
						const tempFilePaths = e;
						for (var i = 0; i < tempFilePaths.length; i++) {
							//const tempFile = e.tempFiles[i];
							  uni.uploadFile({
								url: 'http://48uu7a.natappfree.cc/file/upload',
								name: 'file',
								//url: 'http://localhost:7010/file/uploadBatch',
								//name: 'files',
								header:{
									"Content-Type": "multipart/form-data"
								},
								filePath: tempFilePaths[i],
								success:(uploadFileRes) => {
									uni.hideLoading();
									console.log('uploadFileRes',uploadFileRes);
									const back = JSON.parse(uploadFileRes.data);
										console.log("back",back)
										if (back.code == 200) {
											that.imgList.push(back.data);
										}
										 //console.log('imgList',that.imgList);
									},
								fail:() => {
									uni.hideLoading();
									uni.showModal({
										content: "上传失败，请联系客服！"
									});
								},
								complete: function() {
									uni.hideLoading();
								}
							});
						}
					
			},
			//提交表单
			  saveImg(){
				let that = this;
				//判断是否有上传图片
				if(that.imgList.length === 0){
					uni.showModal({
						content: "请选择图片上传！",
						showCancel: false,
					});
					return;
				}
				//检查是否可上传文件
				if(that.uploadedNum >=50){
					uni.showModal({
						content: "当日已达上传图片上限,请明日再来！",
						showCancel: false
					});
					return;
				}else{
					const param = {
							creatorId: that.userInfo.id,
							imgUrl: that.imgList,
							signList: that.signListSelected,
							status: 0,
							typeId: that.typeId
						}
						  insertTiktokImg(param).then(res =>{
							console.log('res',res)
							if(res.data.code === 200){
								uni.showToast({
									title: '上传成功!',
									duration: 2000,
									success:function(){
										setTimeout(function () {
											//返回主页，清空上传列表
											that.imgList = []
											that.signListSelected = []
											that.typeId = 1
											uni.reLaunch({
												url: '../index'
											});
										}, 2000);
									}
								});
							}else {
								uni.showModal({
								content: "艺术家图片上传失败！",
								showCancel: false,
								});
							}
						});
				}
			}
		},
		
	}
</script>

<style lang="scss">
	.upLoadBtn{
		width: 750rpx;
		height: 60rpx;
		background-color: royalblue;
		color: #ffffff;
		font-size: 30rpx;
		line-height: 62rpx;
		border-radius: 17rpx;
		margin-top:100rpx;
	}
	.uploadNum{
		font-size: 25rpx;
		
		.uploadText{
			color:red;
		}
	}
</style>
