<template>
	<div class="sign-wrap">
		<div class="sign-content">
			<div class="sign-banner">
				<text class="sign-banner__text"><span>获得</span><span class="orange">{{signData.fee}}</span><span>书币</span></text>
			</div>
			<div class="sign-line">
				<div class="sign-line__item" for="{{signList}}">
					<text class="sign-line__day">{{$item.day}}天</text>
					<image src="../../assets/imgs/sign_{{$item.iconType}}.jpg"></image>
					<text class="sign-line__fee">{{$item.fee}}书币</text>
				</div>
			</div>
		</div>
		<image src="../../assets/imgs/pop_close.png" class="close-icon" @click="setSignPop"></image>
	</div>
</template>
<script>
import { userSign } from "../../api/index";
import { setStore } from "../../api/utils";
export default {
	data: {
		signList: [
			{ day: 1, iconType: 'coin', fee: 50 },
			{ day: 2, iconType: 'coin', fee: 50 },
			{ day: 3, iconType: 'gift', fee: 150 },
			{ day: 4, iconType: 'coin', fee: 50 },
			{ day: 5, iconType: 'coin', fee: 50 },
			{ day: 6, iconType: 'coin', fee: 50 },
			{ day: 7, iconType: 'gift', fee: 150 },
		],
		signData: {
			days: 0,
			fee: 0
		}
	},
	onInit() {
		this.sign();
	},
	async sign() {
		let res = await userSign();
		this.signData = res;
		this.signList.forEach((item,index) => {
			if (item.day <= res.days) {
        item.iconType = 'checked';
      }
      item.fee = res.day_list[index];
    });
   
	},
	setSignPop() {
		this.$dispatch('dispathEvt')
	}
}
</script>
<style lang="less" scoped>
.sign {
  &-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.56);
    flex-direction: column;
		align-items: center;
    justify-content: center;
		z-index: 2;
  }
  &-content {
    width: 650px;
    height: 520px;
    border-radius: 30px;
    background-color: #fff;
    margin-top: -240px;
    flex-direction: column;
  }
  &-line {
    margin-bottom: 20px;
    margin-top: 10px;
    height: 140px;
    &__item {
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    &__day {
      color: #999;
      font-size: 22px;
    }
    image {
      width: 40px;
      height: 40px;
    }
    &__fee {
      font-size: 22px;
    }
  }
  &-banner {
    background-image: url(../../assets/imgs/sign_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    justify-content: center;
    width: 100%;
    height: 350px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    &__text {
      font-size: 34px;
      color: #fff;
      font-weight: bold;
      margin-top: 200px;
      .orange {
        color: #ffc017;
        font-size: 46px;
        padding: 0 6px;
      }
    }
  }
}
.close-icon {
  width: 60px;
  height: 60px;
  margin-top: 60px;
}
</style>
