<template>
  <uni-popup
    ref="popup_signin"
    type="center"
    mask-background-color="rgba(0,0,0,0.8)"
    :is-mask-click="false"
  >
    <view class="popup_signin">
      <view class="title"
        ><text>连续签到，好礼</text><text class="color">免费拿</text></view
      >
      <view class="signin-list">
        <view v-for="item in list" :key="item.date" class="signin-item">
          <view
            :class="[
              'card',
              {
                'card-current': item.is_signin,
              },
            ]"
          >
            <text class="reward"
              >{{ item.price }}<text class="unit">{{ item.unit }}</text></text
            >
            <text class="status">{{ item.signin_name }}</text>
          </view>
          <text
            :class="[
              'day',
              {
                today: item.is_current,
              },
            ]"
            >{{ item.day }}</text
          >
        </view>
      </view>
      <button
        :class="[
          'btn-signin',
          {
            'btn-disabled': isCurrentSignin,
          },
        ]"
        :disabled="isCurrentSignin === 1"
        @click="handleSignin"
      >
        {{ isCurrentSignin ? "已签到" : "立即签到" }}
      </button>
      <image
        class="popup_close"
        :src="require('@/assets/icon/icon-close.png')"
        @click="close()"
      >
      </image>
    </view>
  </uni-popup>
</template>

<script>
import api from "@/lib/api/api";
import {
  requestSubscribeMessage,
  defaultTemplateIds,
} from "@/lib/utils/wxSubscribe";

export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    isCurrentSignin: {
      type: Number,
      default: 0,
    },
    session: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      active: false,
    };
  },

  methods: {
    open() {
      this.$refs.popup_signin.open();
    },
    close() {
      this.$refs.popup_signin.close();
    },
    async handleSignin() {
      uni.showLoading();
      // #ifdef MP-WEIXIN
      await requestSubscribeMessage(defaultTemplateIds).catch(() => void 0);
      // #endif
      try {
        const data = await api.userSingIn({
          session: this.session,
        });
        if (data.errno === 10000) {
          // this.singInfo = data;
          this.$emit("change", data);

          uni.hideLoading();
        } else {
          throw new Error(data.errmsg);
        }
      } catch (e) {
        uni.hideLoading();
        uni.showToast({
          icon: "none",
          title: e.message || "签到失败，请重试",
          duration: 3000,
        });
      }
    },
  },
};
</script>

<style lang="scss">
.popup_signin {
  box-sizing: border-box;
  position: relative;
  width: 560rpx;
  height: 832rpx;
  padding: 242rpx 20rpx 0;
  background: url(https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/04ba6a176c50dc8e27a023a6b1d9a84d.png)
    no-repeat center;
  background-size: contain;

  .title {
    height: 50rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #292d3b;
    line-height: 50rpx;
    display: block;
    text-align: center;
    .color {
      color: #08c2c3;
    }
  }
  .signin-list {
    margin: 0 -10rpx;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: center;
    padding: 12rpx 0;
    .signin-item {
      width: 116rpx;
      height: 182rpx;
      text-align: center;
      margin: 12rpx 9rpx;
    }
    .card {
      box-sizing: border-box;
      width: 116rpx;
      height: 132rpx;
      overflow: hidden;
      padding-top: 16rpx;
      background: url(@/assets/home/sign-item.png) no-repeat;
      background-size: contain;
      color: #fff;
      &.card-current {
        background-image: url(@/assets/home/sign-item-active.png);
      }
      .reward {
        display: block;
        height: 44rpx;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 44rpx;
        .unit {
          font-size: 22rpx;
        }
      }
      .status {
        display: block;
        font-size: 26rpx;
        font-weight: 500;
        line-height: 36rpx;
        margin-top: 26rpx;
      }
    }
    .day {
      display: block;
      margin-top: 16rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #292d3b;
      line-height: 34rpx;
      &.today {
        color: #08c2c3;
      }
    }
  }
  .btn-signin {
    border-radius: 0;
    margin-top: 8rpx;
    width: 512rpx;
    height: 80rpx;
    background: #08c2c3;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    &.btn-disabled {
      background: rgba(8, 194, 195, 0.5);
    }
    &::after {
      display: none;
    }
  }
}
</style>
