<template>
	<view style="background: linear-gradient(to bottom, #f90744, #e8e8e8)">
		<view class="">
			<image src="../static/swa.png" mode="aspectFill" style="width: 750rpx; height: 320rpx; border-radius: 30rpx"></image>
		</view>
		<view class="mar-30 bor-r30 zcolor-while" style="margin-top: 0; padding-bottom: 30rpx">
			<view class="dflex flex-row gradient-red-while bor-r30 pa-30 align-center">
				<text class="f-w fs-31">累计签到</text>
				<text class="f-w fs-35 f-w fcolor-red mar-l10 mar-r10">{{ days }}</text>
				<text class="f-w fs-31">天</text>
			</view>
			<view class="dflex flex-row justify-space-between align-center pa-30">
				<view class="bor-r10" :class="index < completeDay ? 'zcolor-f1f1f1' : 'zcolor-f1f1f1'" v-for="(item, index) in dayList" :key="index">
					<view class="bor-r10 dflex flex-column justify-center align-center" style="width: 80rpx; height: 120rpx">
						<view class="wh-60 dflex justify-center align-center zcolor-bluew bor-r100 mar-t5" v-if="index < completeDay">
							<text class="fs-23 fcolor-blue">{{ item }}</text>
						</view>
						<view class="" style="width: 70rpx; height: 70rpx" v-else>
							<image src="../static/hbbs.png" mode="aspectFill" class="wh-70"></image>
						</view>

						<view class="mar-t10">
							<text class="fs-25" v-if="index < 6">{{ index + 1 }}天</text>
							<text class="fs-25" v-if="index == 6">{{ index + 1 }}天+</text>
						</view>
					</view>
				</view>
			</view>
			<view class="wh-w720 mar-t30 dflex justify-center align-center">
				<view
					elevation="1px"
					class="bor-r50 gradient-red dflex justify-center align-center"
					style="width: 500rpx; height: 90rpx"
					v-if="!taskStatus"
					@click="receiveMoney"
				>
					<text class="fs-30 fcolor-while f-w">立即签到</text>
				</view>
				<view elevation="1px" class="bor-r50 wh-80-650 zcolor-while1 dflex justify-center align-center" v-else>
					<text class="fs-30">已签到</text>
				</view>
			</view>
		</view>
		<view class="bor-r30 mar-30 zcolor-while" style="margin-top: 0">
			<view class="dflex flex-row gradient-red-while bor-r30 align-center pa-30">
				<text class="f-w fs-33">签到任务</text>
			</view>
			<view class="">
				<view class="dflex flex-row justify-space-between align-center pa-30" style="" v-for="(item, index) in taskList" :key="index">
					<view class="dflex flex-row align-center">
						<view class="">
							<!-- <image :src="item.img" mode="aspectFill" class="wh-100"></image> -->
						</view>
						<view class="mar-l30">
							<view class="dflex flex-row align-center">
								<text class="fs-30 f-w">{{ item.title }}</text>
							</view>
							<!-- 							<view class="dflex flex-row align-center">
								<text class=" fs-30 f-w">{{item.title}}</text>
							</view>
							<view class="dflex flex-row align-center">
								<text class=" fs-30 f-w">{{item.title}}</text>
							</view> -->
							<view class="dflex flex-row align-center mar-t15">
								<text class="fs-23 fcolor-dark1">完成任务可获得{{ item.points }}积分</text>
							</view>
						</view>
					</view>
					<view v-if="item.status" class="zcolor-while1 pa-20-30 bor-r50 justify-center align-center">
						<text class="fs-28">已完成</text>
					</view>
					<button
						v-else-if="item.name === 'isShare'"
						class="gradient-red bor-r50 justify-center align-center fs-28 fcolor-while" 
						style="height: 80rpx; width: 140rpx; line-height: 80rpx; margin: 0;" 
						open-type="share"
						@click="listTab(index)"
					>
						去完成
					</button>
					<view v-else class="gradient-red pa-20-30 bor-r50 justify-center align-center" @click="listTab(index)">
						<text class="fs-28 fcolor-while">去完成</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 		<view class="bor-r30 mar-30 zcolor-while" style="margin-top: 0;">

			<view class="dflex flex-row gradient-red-while bor-r30 align-center pa-30">
				<text class="f-w fs-33">签到规则</text>
			</view>
			<view class="pa-30">
				<text class="fs-30">
					{{rule}}
				</text>
			</view>

		</view> -->

		<view style="height: 230rpx"></view>
	</view>
</template>

<script>
export default {
	props: {
		// 签到天数
		days: {
			type: Number,
			default: 0
		},
		// 签到任务第一个
		play_number: {
			type: Number,
			default: 0
		},
		// 签到任务第二个
		search_number: {
			type: Number,
			default: 0
		},
		// 签到任务第三个
		full_ad: {
			type: Number,
			default: 0
		},
		// 签到任务
		taskList: {
			type: Array,
			default: []
		},
		// 已完成天数
		completeDay: {
			type: Number,
			default: 0
		},
		// 奖励
		dayList: {
			type: Array,
			default: []
		},
		// 签到状态 0.代表未签到 1.代表已签到
		taskStatus: {
			type: Boolean,
			default: false
		},
		// 签到规则
		rule: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	},

	methods: {
		// 签到并领取奖励
		receiveMoney() {
			this.$emit('receiveMoney');
		},

		// 签到任务完成
		listTab(i) {
			this.$emit('listTab', i);
		}
	}
};
</script>
<style>
@import './common.css';
</style>
