<template>
  <div class="expire-alert-box">
    <el-dialog title="接口许可证即将到期" :visible.sync="visible" width="600px" @close="onClose">
      <div class="label">企微企业名称：{{ expireData.corpName }}</div>
      <div class="label">品牌名称：{{ expireData.enterpriseNames }}</div>
      <div class="label">到期时间：{{ expireData.interceptTime | timeStampToYmd3 }}</div>
      <div class="label" v-if="interceptTimeNew > 0">
        企业微信自2022年5月16日起，面对服务商进行平台收费模式调整，服务商需接入接口收费模式，购买并激活接口调用许可后，才可使用企业微信接口；<span>{{ expireData.interceptTimeNew }}天</span>后将有<span>{{ expireData.interceptUserNum }}</span
        >个接口许可证即将过期，您总共还剩余<span>{{ expireData.permissionUserNum }}</span
        >个可用的接口许可证，请保证数量充足，如需增加请及时联系运营人员续费，避免影响使用；
      </div>
      <div class="label" v-else>
        企业微信自2022年5月16日起，面对服务商进行平台收费模式调整，服务商需接入接口收费模式，购买并激活接口调用许可后，才可使用企业微信接口；<span>今日{{ expireData.interceptTime | timeStampToHms }}</span
        >后将有<span>{{ expireData.interceptUserNum }}</span
        >个接口许可证即将过期，您总共还剩余<span>{{ expireData.permissionUserNum }}</span
        >个可用的接口许可证，请保证数量充足，如需增加请及时联系运营人员续费，避免影响使用；
      </div>

      <el-row type="flex" justify="end" align="middle" style="margin: 14px 0;">
        <el-button @click="onClose">知道了</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ExpireDialog',
  data() {
    return {};
  },
  props: {
    expireData: {},
    visible: false
  },
  methods: {
    onClose() {
      let now = new Date().getTime();
      sessionStorage.setItem('permission-interceptor-time', now);
      this.$emit('update:visible', false);
    }
  }
  // filters: {
  //   formatDate(value) {
  //     if (!value) {
  //       return '';
  //     }
  //     let arr = value.split(' ');
  //     let arr1 = arr[0].split('-');
  //     return `${arr1[0]}年${parseInt(arr1[1])}月${parseInt(arr1[2])}日`;
  //   }
  // }
};
</script>
<style lang="scss">
.expire-alert-box .el-dialog {
  background-repeat: no-repeat;
  background-image: url('../images/alert_bg.png') !important;
  background-size: 100% 177px;
  padding: 0 10px;
}
</style>
<style lang="scss" scoped>
.label {
  color: #303133;
  font-size: 14px;
  padding-bottom: 10px;
  line-height: 20px;
}
.label span {
  color: #f5222d;
}
.sub-enterprise-box {
  border-radius: 4px;
  background: #f7f8fa;
  margin-bottom: 16px;
}

.sub-enterprise-box .cell {
  padding: 10px 12px;
  color: #303133;
  font-size: 14px;
}

.sub-enterprise-box .line {
  height: 1px;
  border-bottom: 1px dashed #dcdfe6;
  box-sizing: border-box;
  margin: 0 22px 0 12px;
}
</style>
