<template>
  <view class="wk-popup-expiration">
    <view class="content">
      <image :src="$static('images/expiration_remind.png')" mode="" class="img" />
      <view class="content-title">
        到期预警
      </view>
      <view class="content-text">
        <view>管理员您好：</view>
        <view class="text">
          您的云服务将于{{ expirationInfo.endTime }}正式到期，截止目前仅剩{{ expirationInfo.endDay }}天未续费的云服务到期后将无法正常登录使用，为了保证正常使用，请及时续费！如果已经启动付费流程，请忽略此条信息
        </view>
      </view>
      <view class="ignore-btn" @click="ignoreRemind">
        忽略
      </view>
    </view>
		
    <view class="close-btn" @click="handleClose">
      <text class="wk wk-close" />
    </view>
  </view>
</template>

<script>
  import { IgnoreCompanyStatus } from '../../api/admin'
  import { mapGetters, mapMutations } from 'vuex'
	
  export default {
    name: 'WkPopupExpiration',
    inject: ['popup'],
    computed: {
			...mapGetters({
				expirationInfo: 'user/expirationInfo'
			})
    },
    methods: {
			...mapMutations({
				setExpirationStatus: 'user/SET_EXPIRATION'
			}),
			
			/**
			 * 点击关闭
			 */
			handleClose() {
				this.setExpirationStatus(false)
				this.popup.close()
			},

			/**
			 * 忽略提醒
			 */
			ignoreRemind() {
				IgnoreCompanyStatus()
				this.handleClose()
			}
    }
  }
</script>

<style scoped lang="scss">
	.wk-popup-expiration {
		width: 532rpx;
		color: $dark;
		margin: auto;
		
		.content {
			width: 100%;
			background-color: white;
			border-radius: 38rpx;
			overflow: hidden;
			.img {
				width: 100%;
				height: 272rpx;
			}
			
			.content-title {
				font-size: $wk-font-large;
				font-weight: 500;
				text-align: center;
				margin-top: 20rpx;
			}
			
			.content-text {
				font-size: $wk-font-base;
				line-height: 1.7;
				color: $gray;
				padding: 0 46rpx;
				margin-top: 10rpx;
				
				.text {
					text-indent: 56rpx;
					margin-top: 5rpx;
				}
			}
			
			.ignore-btn {
				width: 50%;
				height: 70rpx;
				font-size: $wk-font-medium;
				text-align: center;
				line-height: 70rpx;
				color: $gray;
				border: 1rpx solid #cccccc;
				border-radius: 70rpx;
				margin: 20rpx auto 30rpx;
			}
		}
		
		.close-btn {
			width: 66rpx;
			height: 66rpx;
			color: white;
			border: 2rpx solid white;
			border-radius: 50%;
			margin: 50rpx auto 0;
			@include center;
			.wk-close {
				font-size: 36rpx;
				line-height: normal;
				vertical-align: middle;
			}
		}
	}
</style>
