<template>
	<view class="wrap">
		<view class="desc-box">
			<text class="title">内容描述</text>
			<textarea  class="desc-input" v-model="contentDesc"
			placeholder="请输入内容描述~" />
			<!-- <view class="bottom-box">
				<view class="keyTips" @click="clickRandomKey()"></view>
				<view class="limit">{{drawDesc.length}}/50</view>
			</view> -->
		</view>
		<view class="keywords">
			<view class="head">
				<view class="left">
					<view class="title">内容描述示例</view>
				</view>
				<view class="right" @click="getRandPrompt">
					<view class="title">换一批</view>
					<view class="icon">
						<uni-icons type="refreshempty" size="14" :color="primaryColor"></uni-icons>
					</view>
				</view>
			</view>
			<view class="lists">
				<view @click="onClickPrompt(index)" :class="index == prompt_active?'item active':'item'"
					v-for="(item,index) in promptList" :key="index">{{ item.text }}</view>
			</view>
		</view>
		<view class="desc-box">
			<text class="title">场景描述</text>
			<textarea  class="desc-input" v-model="sceneDesc"
			placeholder="描述一下你们的场景吧~(例:在教堂,在海边,在美术馆,咖啡馆...)" />
			<!-- <view class="bottom-box">
				<view class="keyTips" @click="clickRandomKey()"></view>
				<view class="limit">{{drawDesc.length}}/50</view>
			</view> -->
		</view>
		
		<view class="type-box">
			<text class="title">风格选择</text>
			<view class="type-item-box">
				<view class="type-item"  v-for="(item, index) in paintStyle" @click="selectType(index)"
				:style="{ backgroundImage: `url(${item.imgUrl})` }"
				:class="curType == index? 'active' : ''">
					<view class="title">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="draw-button" @click="checkIsVip()">
			开始创作<br/>消耗({{goldNum}}点画意值)
		</view>
		
	
	</view>
</template>

<script>
	import {getPaintStyle, getPrompt, textToImg, checkUserCanAiPaint, checkVip} from '@/api/paint.js';
	export default {
		data() {
			return {
				promptList: [],
				sceneDesc: '',
				contentDesc: '',
				paintStyle:[],
				curType: 0,
				goldNum: 5, //画意值
				userInfo: {},
				checkData:{
					checkCanPaint: false, //true已达到最大绘画上限;false未达最高上限
				},
				prompt_active: 0,
			}
		},
		onLoad() {
			this.getPaintStyleList();
			this.getPrompt();
		},
		onShow() {
			this.checkLogin();
			// this.getInitInfo();
			// this.checkUserCanAiPaint();
			this.sceneDesc = '',
			this.contentDesc = '',
			this.curType = 0
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				// console.log(res)
			}
			return {
				title: '来[次元意境]获取好看的图纸头像吧!',
				path: `/pages/ai/paint/loverPaint`
			}
		},
		methods: {
			selectType(index) {
				this.curType = index
			},
			//随机选取提示词
			getRandPrompt() {
				this.promptList = this.getRandomArrayElements(this.promptList, 5)
				this.promptText = this.promptList[this.prompt_active].text
			},
			//获取提示词列表
			async getPrompt() {
				const res = await getPrompt("2");
				if (res && res.data.code === 200) {
					this.promptList = res.data.data
					//console.log('this.promptList',this.promptList)
				}else {
					uni.showModal({
						content: '提示词列表加载失败！',
						showCancel: false
					});
				}
			},
			//提示词
			onClickPrompt(index) {
				this.prompt_active = index
				this.contentDesc = this.promptList[index].text
				// //拖底消除校验状态
				// if(this.checkData.checkPrompt === false){
				// 	this.checkData.checkPrompt = true;
				// }
				//console.log('this.prompt_active',this.prompt_active)
			},
			getRandomArrayElements(arr, count) {
				var shuffled = arr.slice(0),
					i = arr.length,
					min = i - count,
					temp, index;
				while (i-- > min) {
					index = Math.floor((i + 1) * Math.random());
					temp = shuffled[index];
					shuffled[index] = shuffled[i];
					shuffled[i] = temp;
				}
				return shuffled.slice(min);
			},
			async checkIsVip() {
				let that = this;
				const data = {
					userId: that.userInfo.id,
					userClientType: 10
				}
			 const res = await checkVip(data);
			 console.log('res===', res);
			 if (res && res.data.code === 200) {
				 if(res.data.data.isVip == 1) {
					 that.getDraw()
				 } else {
					uni.showModal({
						title: '您还不是VIP会员',
						content: '开通VIP解锁更多权益~',
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url:'/pages/userInfo/vip/vip'
								})
							} 
						}
					});
				 }
			 	// this.paintStyle = res.data.data
			 	//console.log('this.paintStyle',this.paintStyle)
			 }
			 // else {
			 // 	uni.showModal({
			 // 		content: '网络错误，请稍后再试~',
			 // 		showCancel: false
			 // 	});
			 // }
			},
			//获取绘画风格
			async getPaintStyleList() {
				const res = await getPaintStyle();
				if (res && res.data.code === 200) {
					this.paintStyle = res.data.data
					//console.log('this.paintStyle',this.paintStyle)
				}else {
					uni.showModal({
						content: '绘画风格加载失败！',
						showCancel: false
					});
				}
			},
			//判断是否达到免费AI绘画次数上限
			async checkUserCanAiPaint(){
				let that = this;
				const data = {
					userId: that.userInfo.id,
					platform: 1,
					appType: 0
				}
				const res = await checkUserCanAiPaint(data);
					//console.log('res绘画',res)
					if(res.data.code === 200){
						if(res.data.data === true){
							that.checkData.checkCanPaint = true;
						}else{
							that.checkData.checkCanPaint = false;
						}
					}else{
						return uni.showModal({
							content: '检查绘画上限失败！',
							showCancel: false
						});
					}
			},
			//判断是否登录
			checkLogin(){
				let that = this;
				that.userInfo = uni.getStorageSync('userInfo');
				console.log('userInfo：',that.userInfo)
				let token = uni.getStorageSync('token');
				if((Object.keys(that.userInfo).length==0) && (Object.keys(token).length==0)){
					console.error('尚未登录!');
					uni.showModal({
						title:'提示',
						content:'您还没有登录!点击确定跳转登录界面以体验服务',
						success(res) {
							if (res.confirm) {
								//跳转登录界面
								uni.switchTab({
									url: '/pages/userInfo/userInfo'
								});
							}else if(res.cancel){
								uni.showToast({
									title:'登录获取更好的服务体验哟!',
									duration: 2000
								});
							} 
						}
					});
				}
			},
			getDraw() {
				// if(this.userInfo.isVip != 1) {
				// 	uni.showModal({
				// 		title:'此功能仅限VIP使用',
				// 		content: '开通VIP获得更多权益',
				// 	})
				// 	return
				// }
				if(!this.contentDesc || !this.sceneDesc) {
					uni.showToast({
						title: '请输入描述~',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				const that = this;
				
				//跳转详情页生成图片
				uni.showModal({
					title: '温馨提示',
					content: '任务创建完成,点击跳转生成内容！',
					success(res) {
						if(res.confirm){
							const data = {
								prompt: that.contentDesc,
								scenePrompt: that.sceneDesc,
								styleName: that.paintStyle[that.curType].styleName,
								painterId: that.userInfo.id,
								painterName: that.userInfo.username,
								appType: 0,
								platform: 1,
								goldNum: that.goldNum,
							}
							uni.navigateTo({
								 url: './loverPainResult?data='+JSON.stringify(data)
							})
						}
					}
				});

				
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 20rpx;
  width: 100%;
  min-height: 110vh;
  background-color: #faf0f3;
  .draw-button {
  	position:fixed;
  	left: 50%;
  	bottom: 50rpx;
  	transform: translateX(-50%);
  	background: linear-gradient(#fc1f8d, #d2158a);
  	width: 400rpx;
  	height: 100rpx;
  	border-radius: 50rpx;
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  	color: #fff;
  	font-size: 16px;
  			
  }
  .head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 15rpx;
  
    .left {
      display: flex;
      flex-direction: row;
      align-items: center;
  
      .title {
		  color: #fc1f8d;
        font-size: 26rpx;
  
        .tip-vip-icon {
          margin-left: 20rpx;
        }
      }
    }
  
    .right {
      display: flex;
      flex-direction: row;
      align-items: center;
  
      .title {
        margin-right: 15rpx;
        font-size: 24rpx;
        line-height: 48rpx;
        color: #3a3a3a;
      }
      .icon {
        line-height: 48rpx;
      }
    }
  }
  .keywords {
  	width: 100%;
  	margin: 15rpx auto;
  
  	.lists {
  		display: flex;
  		flex-direction: row;
  		flex-wrap: wrap;
  		justify-content: space-between;
  
  		.item {
  			background-color: $uni-white;
  			padding: 10rpx 15rpx;
  			border-radius: 10rpx;
  			color: $uni-base-color;
  			border: 1rpx solid #fc1f8d;
  			max-width: 128rpx;
  			margin-bottom: 10rpx;
  			font-size: 24rpx;
  			white-space: nowrap;
  			text-overflow: ellipsis;
  			overflow: hidden;
  		}
  
  		.active {
  			// color: $uni-white;
  			border: 1rpx solid #d2158a;
  			background-color: #fad5e6;
  		}
  
  	}
  
  }
  
  .desc-box {
	  margin-bottom: 10px;
  	.title {
  		color: #fff;
  		font-size: 18px;
  		// margin-bottom: 20px;
		color: #fc1f8d;
		font-weight: bold;
  	}
  	.desc-input {
		border: 2px solid #fc1f8d;
  		margin-top: 5px;
  		width: 100%;
  		height: 200rpx;
  		background-color: #fff;
  		border-radius: 8px;
  		padding: 20rpx;
  		box-sizing: border-box;
  		// color: #fff;
  	}
  }
  .type-box {
	  .title {
  		color: #fff;
  		font-size: 18px;
  		// margin-bottom: 5px;
		color: #fc1f8d;
		font-weight: bold;
	   }
	  .type-item-box {
		  margin-top: 5px;
		  display: flex;
		  justify-content: space-between;
		  flex-wrap: wrap;
		  .type-item {
			  width: 160rpx;
			  height: 160rpx;
			  background-size: 100% 100%;
			  border-radius: 5px;
			  box-sizing: border-box;
			  position: relative;
			  .title {
				  position: absolute;
				  bottom: 0px;
				  width: 100%;
				  background-color: rgba(255, 255, 255, 0.7);
				  color: #fc1f8d;
				  text-align: center;
				  font-size: 14px;
			  }
			  
		  }
		  .active {
		  	border: 4px solid #fc1f8d;
		  }
	  }
  }
}
</style>