<template>
	<view>
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh" 
		:style="'background-color: '+theme.bg+';color: '+theme.text">
			<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
			</custom-refresher>
			<!-- 头部 -->
			<view slot="top" class="width-750 relative flex align-center justify-center bj-92D4FF-16A2FF"
				:style="{height: `calc(${statusBar}px + 408rpx)`}">
				<view class="width-750 fixed1 bj-92D4FF-16A2FF"
					:style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 408rpx)`}">
					<view class="width-750 height-110 padding-w-30 flex align-center justify-center">
						<view @click="_goback" class="cuIcon-back font-40 color-white"
							style="position: absolute;left: 30rpx;"></view>
					</view>
					<view
						class="height-268 padding-c-40 flex direction-column justify-between width-100b padding-w-30 relative">
						<image style="right: 0;top: 0;z-index: 1;" class="width-294 height-294 absolute"
							src="/static/imgs/more/shape1@2x.png" mode=""></image>
						<text class="font-24 color-F6F8FB medium-font">{{i18n.task.text1}}</text>
						<text class="color-white font-42 numbold-font">{{my_num}} AP</text>
						<view class="flex align-center">
							<view @click="show2=true" class="flex align-center">
								<image class="width-38 height-31" src="/static/imgs/more/manghe@2x.png"></image>
								<text class="font-24 color-F6F8FB margin-l-10">{{i18n.task.text2}}</text>
								<u-icon name="arrow-right" color="#FFF" size="20"></u-icon>
							</view>
							<u-icon @click="show1=true" class="margin-l-20" name="question-circle" color="#FFF"
								size="32"></u-icon>

						</view>
					</view>
					<view class="height-32 relative" :style="'background-color: '+theme.bg"
					 style="border-radius: 20rpx 20rpx 0 0;z-index: 100;">
					</view>
				</view>
			</view>
			<!-- 身体 -->
			<view class="width-750 padding-w-30 padding-b-40">
				<view class="height-80 margin-b-30 padding-c-10 flex align-center font-32 bold-font">
					<view @click="type=1" class="height-60 flex direction-column align-center">
						<view class="height-50 line-height-50">
							<text :class="type==1?'':'color-C3C3C3'">{{i18n.task.text3}}</text>
						</view>
						<view class="height-10 flex align-center">
							<view v-if="type==1" class="width-90 height-4 radiu-2 bj-0061E8"></view>
						</view>
					</view>
					<view @click="type=2" class="height-60 flex direction-column align-center margin-l-68">
						<view class="height-50 line-height-50">
							<text :class="type==2?'':'color-C3C3C3'">{{i18n.task.text4}}</text>
						</view>
						<view class="height-10 flex align-center">
							<view v-if="type==2" class="width-90 height-4 radiu-2 bj-0061E8"></view>
						</view>
					</view>
				</view>
				<!-- 成长任务 -->
				<view v-if="type==1">
					<!-- 单一列表 -->
					<view v-for="(item,index) in list" :key="index" class="listbox"  :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
						<view class="height-100b flex direction-column justify-between">
							<text class="font-28 medium-font">{{item.name}}</text>
							<view class="flex align-center">
								<image class="width-33 height-31 margin-r-10" src="/static/imgs/more/zu3891@2x.png"
									mode="">
								</image>
								<text class="font-28 color-FBA700 nummedium-font">+{{item.price}}
									{{item.curr_name}}</text>
							</view>
						</view>
						<view v-if="item.status==0" @click="router.push(item.url)" class="btnbox1">{{i18n.task.text5}}
						</view>
						<view v-if="item.status==1" @click="getlinqu(item.id)" class="btnbox2">{{i18n.task.text6}}
						</view>
						<view v-if="item.status==2" class="btnbox3">{{i18n.task.text7}}</view>
					</view>
				</view>
				<!-- 每日签到 -->
				<view v-if="type==2" class="qiandaobox" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
					<text class="font-28 medium-font">{{i18n.task.text8}}</text>
					<view class="height-100b padding-t-22 padding-b-32">
						<view class="flex justify-between margin-b-16">
							<view @click="getQiandao(item.status)" v-for="(item,index) in four" :key="index"
								:class="item.status==1?'bj-589FFF-1477FF':'bj-241'" class="daybox">
								<text :class="item.status==1?'color-white':'color-333333'" class="medium-font">
									{{item.status==0?day[index]:item.status==1?i18n.task.text9:item.status==2?i18n.task.text10:item.status==3?day[index]:''}}
								</text>
								<image class="width-38 height-35" src="/static/imgs/more/jinbi@2x.png"></image>
								<text :class="item.status==1?'color-white':'color-C3C3C3'"
									class="nummedium-font">{{item.score}} AP</text>
							</view>
						</view>
						<view class="flex justify-between">
							<view :class="five.status==1?'bj-589FFF-1477FF':'bj-241'" class="daybox">
								<text :class="five.status==1?'color-white':'color-333333'" class="medium-font">
									{{five.status==0?day[4]:five.status==1?i18n.task.text9:five.status==2?i18n.task.text10:five.status==3?day[4]:''}}
								</text>
								<image class="width-38 height-35" src="/static/imgs/more/jinbi@2x.png"></image>
								<text :class="five.status==1?'color-white':'color-C3C3C3'"
									class="nummedium-font">{{five.score}} AP</text>
							</view>
							<view :class="six.status==1?'bj-589FFF-1477FF':'bj-241'" class="daybox">
								<text :class="six.status==1?'color-white':'color-333333'" class="medium-font">
									{{six.status==0?day[5]:six.status==1?i18n.task.text9:six.status==2?i18n.task.text10:six.status==3?day[5]:''}}
								</text>
								<image class="width-38 height-35" src="/static/imgs/more/jinbi@2x.png"></image>
								<text :class="six.status==1?'color-white':'color-C3C3C3'"
									class="nummedium-font">{{six.score}} AP</text>
							</view>
							<view :class="seven.status==1?'bj-589FFF-1477FF':'bj-241'" class="qibox">
								<view class="height-130 flex direction-column font-26 color-333333">
									<text class="medium-font">
										{{seven.status==0?day[6]:seven.status==1?i18n.task.text9:seven.status==2?i18n.task.text10:seven.status==3?day[6]:''}}
									</text>
									<text class="bold-font margin-t-20">{{i18n.task.text11}}</text>
								</view>
								<image class="width-93 height-84" src="/static/imgs/more/jinbi4@2x.png"></image>
							</view>
						</view>
					</view>
				</view>

			</view>

			<!-- 签到成功 -->
			<u-popup v-model="show" mode="center" border-radius="20">
				<view class="width-500" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
					<view class="height-120 flex align-center justify-center">
						<image class="width-80 height-80" src="/static/imgs/index/tibiok.png" mode=""></image>
					</view>
					<view class="padding-w-30 text-center">
						<text class="font-28">{{i18n.task.text12}}{{score}} AP</text>
					</view>
					<view class="height-100 line-height-100 text-center">
						<text @click="show=false" class="font-30 color-0165EE medium-font">{{i18n.task.text13}}</text>
					</view>
				</view>
			</u-popup>
			<!-- 盲盒说明 -->
			<u-popup v-model="show1" mode="center" border-radius="20">
				<view class="width-600" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
					<view class="height-100 line-height-100 text-center">
						<text class="font-30 medium-font">{{i18n.task.text14}}</text>
					</view>
					<view class="padding-w-30">
						<text v-html="manghetxt" class="font-28"></text>
					</view>
					<view class="height-100 line-height-100 text-center">
						<text @click="show1=false" class="font-30 color-0165EE medium-font">{{i18n.task.text13}}</text>
					</view>
				</view>
			</u-popup>
			<!-- 开盲盒 -->
			<u-popup v-model="show2" mode="bottom" border-radius="20">
				<view class="width-750 padding-b-100" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
					<view class="height-100 flex align-center justify-end padding-w-46">
						<u-icon @click="show2=false" name="close" :color="theme.text" size="30"></u-icon>
					</view>
					<view class="padding-w-75 flex direction-column align-center">
						<image class="width-467 height-475" src="/static/imgs/more/damanghe@2x.png"></image>
						<text class="font-26 medium-font">{{i18n.task.text15}}</text>
						<view class="width-600 margin-0-auto margin-t-60">
							<u-button @click="getchou" class="custom-style" type="primary">{{i18n.task.text16}}</u-button>
						</view>
						<view class="margin-t-22 flex align-center justify-center">
							<text @click="show2=false,router.push('/pages/more/blindbox')"
								class="font-32 color-0165EE medium-font">{{i18n.task.text17}}</text>
							<u-icon name="arrow-right" color="#0165EE" size="30"></u-icon>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 盲盒结果 -->
			<u-popup v-model="show3" mode="center" border-radius="20">
				<view class="width-600" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
					<view class="height-100 flex align-center justify-center">
						<image class="width-76 height-71" src="/static/imgs/more/manghe@2x.png"></image>
					</view>
					<view class="padding-w-30 text-center">
						<text class="font-28">{{resmsg}}</text>
					</view>
					<view class="height-100 line-height-100 text-center">
						<text @click="show3=false" class="font-30 color-0165EE medium-font">{{i18n.task.text13}}</text>
					</view>
				</view>
			</u-popup>


		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				list: [],
				my_num: 0,
				flag: true,
				type: 1,
				show: false,
				show1: false,
				show2: false,
				show3: false,
				four: [],
				five: {},
				six: {},
				seven: {},
				resmsg: '',
				score: '',
				manghetxt: '',
				day: ['第1天', '第2天', '第3天', '第4天', '第五天', '第六天', '连签7天'],
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.getTask()
			this.getSign()
			this.getText()
			this.day = this.i18n.task.day
		},
		methods: {
			onRefresh() {
				this.list = []
				this.getTask()
				// 以告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					//1.5秒之后停止刷新动画
					this.$refs.paging.complete();
				}, 1000)
			},
			getlinqu(id) {
				if (!this.flag) return
				uni.showLoading({
					mask: true
				})
				this.flag = false
				this.post('/index/task_linqu', {
					id: id
				}).then(res => {
					this.flag = true
					uni.hideLoading()
					if (res.code == 1) {
						this.tos(res.msg)
						this.getTask()
					}
				})
			},
			// 开盲盒
			getchou() {
				if (!this.flag) return
				this.flag = false
				uni.showLoading({
					mask: true
				})
				this.post('/index/chou_box').then(res => {
					this.flag = true
					if (res.code == 1) {
						uni.hideLoading()
						this.resmsg = res.data.name
						this.show2 = false
						this.show3 = true
						this.getTask()
						this.getSign()
					} else {
						uni.hideLoading()
					}
				})
			},
			// 盲盒说明
			getText() {
				this.post('/index/box_text').then(res => {
					if (res.code == 1) {
						this.manghetxt = res.data.box_text
					}
				})
			},
			// 签到
			getQiandao(item) {
				if (!this.flag) return
				if (item != 2) return
				this.flag = false
				uni.showLoading({
					mask: true
				})
				this.post('/index/sign').then(res => {
					this.flag = true
					if (res.code == 1) {
						uni.hideLoading()
						this.getTask()
						this.getSign()
						this.score = res.data.score
						this.show = true
					} else {
						uni.hideLoading()
					}
				})
			},
			// 每日签到列表
			getSign() {
				this.post('/index/sign_con').then(res => {
					if (res.code == 1) {
						this.four = res.data.slice(0, 4)
						this.five = res.data[4]
						this.six = res.data[5]
						this.seven = res.data[6]
						// console.log(this.four, this.five, this.six, this.seven);
					}
				})
			},
			// 成长任务列表
			getTask() {
				this.post('/index/task_center').then(res => {
					if (res.code == 1) {
						this.list = res.data.list
						this.my_num = res.data.my_num
					}
				})
			}
		}
	}
</script>

<style>
	.fixed1 {
		position: fixed;
		top: 0;
		z-index: 10;
	}

	.topbox {
		width: 750rpx;
		height: 315rpx;
		background: linear-gradient(135deg, #92D4FF 0%, #16A2FF 100%);
	}

	.bj-92D4FF-16A2FF {
		background: linear-gradient(135deg, #92D4FF 0%, #16A2FF 100%);
	}

	.listbox {
		width: 690rpx;
		height: 120rpx;
		/* background: #FFF; */
		border-radius: 8rpx;
		padding: 16rpx 18rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 22rpx;
	}

	.btnbox1 {
		width: 130rpx;
		height: 52rpx;
		background: rgba(1, 101, 238, 0.2);
		border-radius: 4rpx;
		font-size: 26rpx;
		color: #0165EE;
		line-height: 52rpx;
		text-align: center;
	}

	.btnbox2 {
		width: 130rpx;
		height: 52rpx;
		background: #0165EE;
		border-radius: 4rpx;
		font-size: 26rpx;
		color: #FFF;
		line-height: 52rpx;
		text-align: center;
	}

	.btnbox3 {
		width: 130rpx;
		height: 52rpx;
		background: #eee;
		border-radius: 4rpx;
		font-size: 26rpx;
		color: #999;
		line-height: 52rpx;
		text-align: center;
	}

	.qiandaobox {
		width: 690rpx;
		height: 482rpx;
		/* background: #FFF; */
		border-radius: 8rpx;
		padding: 32rpx 16rpx;
	}

	.daybox {
		width: 133rpx;
		height: 170rpx;
		border-radius: 4rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.bj-589FFF-1477FF {
		background: linear-gradient(180deg, #589FFF 0%, #1477FF 100%);
	}

	.bj-241 {
		background: rgba(241, 241, 241, 0.7);
	}

	.qibox {
		width: 308rpx;
		height: 170rpx;
		border-radius: 4rpx;
		padding: 20rpx 34rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.custom-style {
		width: 600rpx;
		height: 86rpx;
		background: #0165EE;
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>
