<template>
  <div class="sign-page">
    <x-header></x-header>
    <div class="sign-container">
      <img class="sign-bg"
           src="https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/static/img/sign-bg.609a51f.jpg"
           alt="">
      <p class="sign-num__total">连续签到{{signDays}}天</p>
      <div class="sign-result__box">
        <p class="sign-notice">{{getNoticeText()}}</p>
        <div class="sign-day__list">
          <template v-for="i in 3">
            <div class="day-box"
                 :class="{'even-box':i%2===0}"
                 :key="i">
              <div class="day-item"
                   v-for="(day, index) in signDayList.slice((i-1)*5, i*5)"
                   :key="index">
                <div :class="{
                   'line-v': index === 4,
                   'sign-img': total(i, index) < 15
                   }">
                  <template v-if="total(i, index) === 7">
                    <!-- 7天 -->
                    <img :src="signRecord(7)"
                         alt="">
                  </template>
                  <template v-else-if="total(i, index) === 15">
                    <!-- 15天 -->
                    <img :src="signRecord(15)"
                         alt="">
                  </template>
                  <template v-else>
                    <!-- 其他 -->
                    <img :src="signRecord(0, i, index)"
                         alt="">
                  </template>
                </div>
                <span>第{{total(i, index)}}天</span>
              </div>
            </div>
          </template>
        </div>
        <router-link tag="div"
                     :to="{ name: RecordSign.name }"
                     class="to-sign__record">签到记录 &gt;</router-link>
        <a href="/continue" class="to-read">
          <img src="../assets/to_read.png"
               alt="">
        </a>
        <!-- <router-link tag="div"
                     :to="{ name: BookRecent.name }"
                     class="to-read">
          <img src="../assets/to_read.png"
               alt="">
        </router-link> -->
      </div>
    </div>
  </div>
</template>

<script>
import { RecordSign, BookRecent } from "./namespace.js";
import { toSign } from "../api";

export default {
  data() {
    return {
      RecordSign: RecordSign,
      BookRecent: BookRecent,
      signCoin: require("../assets/sign_coin.png"),
      signed: require("../assets/sign_pass.png"),
      signToday: require("../assets/sign_today.png"),
      sign7: require("../assets/sign_7.png"),
      sign15: require("../assets/sign_15.png"),
      signDayList: new Array(15),
      signTotal: 1,
      signDays: 1,
      signReard: 50,
      text: "今天签到赠送30书币，连续签到可领50书币，最高可获1000书币~"
    };
  },
  methods: {
    signRecord(specialDay = 0, i, index) {
      // 有额外金币的签到日 7天 15天
      // signDays < 7 ? sign7 : signDays === 7 ? signToday : signed
      if (specialDay) {
        return this.signDays < specialDay
          ? this.getSpectialDay(specialDay)
          : this.signDays === specialDay ? this.signToday : this.signed;
      }
      // 正常签到日
      // total(i, index) < signDays ? signed : total(i, index) === signDays ? signToday : signCoin
      return this.total(i, index) < this.signDays
        ? this.signed
        : this.total(i, index) === this.signDays
          ? this.signToday
          : this.signCoin;
    },
    getSpectialDay(day) {
      return day === 7 ? this.sign7 : this.sign15;
    },
    total(i, index) {
      return (i - 1) * 5 + (index + 1);
    },
    getNoticeText() {
      let days = this.signDays;
      let html = "";
      switch (days) {
        case 1:
        case 2:
          html = `今天签到赠送${
            this.signReard
          }书币，连续签到每日可领50书币，最高月送2000书币~`;
          break;
        case 6:
          html = `今天签到赠送${this.signReard}书币，明日签到可以领取小礼包哦~`;
          break;
        case 7:
          html = `今天签到赠送${
            this.signReard
          }书币，签到已满7日，额外送您100书币大礼包~`;
          break;
        case 14:
          html = `今天签到赠送${this.signReard}书币，明日签到可以领取大礼包哦~`;
          break;
        case 15:
          html = `今天签到赠送${
            this.signReard
          }书币，签到已满15日，送您150书币大礼包~`;
          break;
        default:
          html = `今天签到赠送${this.signReard}书币，额外连续签到最高月送2000书币~`;
      }
      return html;
    }
  },
  created() {
    toSign().then(r => {
      if (!r.status) {
        this.$Toast({
          message: "您已签到成功~",
          duration: 2000
        });
      }
      this.signTotal = r.sign_days;
      this.signDays = this.signTotal % 15 === 0 ? 15 : this.signTotal % 15
      this.signReard = r.sign_reard;
    });
  }
};
</script>
