<!--
 * @desc 账号终止时间提示弹窗
 * @author linyuanjie
 * @date 2023/12/13
-->

<template>
  <el-dialog
    title="服务截止提示"
    :visible.sync="showDialog"
    width="600px"
    center
    :append-to-body="true"
    :before-close="handleClose">
    <div class="content-wrapper tc pl20 pr20">
      <div class="fwb">服务截止时间：{{ accountExpiry.expiryDate }}</div>
      <div class="mt44 fwb df_center" style="height: 60px;">服务剩余时间：<span class="dib marquee">{{ accountExpiry.remainDays + '天' }}</span></div>
      <div class="mt44 clr_danger">“客官好，贵司的合作协议即将（已）到期，为了避免引起您使用上的不便，我司商务经理会与您联系。祝工作顺利！”</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>

import {mapGetters} from "vuex";

export default {
  name: "accountStopTip",
  props:{
    showDialog: {
      type: Boolean,
      required: true,
      default:  false
    }
  },
  computed: {
    ...mapGetters({ accountExpiry: 'accountExpiry' })
  },
  methods: {
    handleClose () {
      this.$emit('update:showDialog', false)
      if (this.accountExpiry.remainDays <= 0) {
        this.$store.dispatch('LogOut').then(() => {
          const pathQuery = { path: '/login' }
          const specialPath = this.$store.getters.specialPath
          if (specialPath !== 'default') pathQuery.query = { s: specialPath }
          this.$router.push(pathQuery)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.marquee {
  width: 80px;
  animation: marqueeAnimation 2s linear infinite;
}
@keyframes marqueeAnimation {
  0% {
    font-size: 16px;
    color: #FFB6C1;
    border: 2px solid #FFB6C1;
    transform: rotate(0deg);
  }
  20% {
    font-size: 20px;
    color: #FF69B4;
    border: 2px solid #FF69B4;
    transform: rotate(15deg);
  }
  40% {
    font-size: 24px;
    color: #FF00FF;
    border: 2px solid #FF00FF;
    transform: rotate(30deg);
  }
  60% {
    font-size: 24px;
    color: #4169E1;
    border: 2px solid #4169E1;
    transform: rotate(-15deg);
  }
  80% {
    font-size: 20px;
    color: #00FA9A;
    border: 2px solid #00FA9A;
    transform: rotate(-30deg);
  }
  100% {
    font-size: 16px;
    color: #FFD700;
    border: 2px solid #FFD700;
    transform: rotate(0deg);
  }
}
</style>
