<template>
  <div>
    <el-alert v-if="showNotice" class="notice-box" type="warning" show-icon @close="onClose">
      <div class="notice-content" slot="title">
        <div class="expire-tip" v-if="expireTip.show" :style="{
          'max-width': rechargeTip.show ? 'calc(100% - 500px)' : '100%'
        }">
          {{ expireTip.content }}
          <el-button type="text" class="more-btn" @click="showDialog = true" v-if="expireTip.showButton">更多到期时间<i
              class="iconfont-components3 icon-cp-right"></i></el-button>
        </div>
        <div v-if="expireTip.show && rechargeTip.show" class="separator"></div>
        <div v-if="rechargeTip.show" class="recharge-tip">
          当前账户已欠费，为不影响正常的通讯业务，请及时充值。
          <el-button type="text" class="rechange-btn" @click="toRecharge">前往充值中心<i
              class="iconfont-components3 icon-cp-right"></i></el-button>
        </div>
      </div>
    </el-alert>
    <expire-dialog :visible.sync="showDialog" :list="expireEnterprises"></expire-dialog>
  </div>
</template>

<script>
import ExpireDialog from './expire-dialog.vue';
import { getAccountStateInfo, getExpireExterprise } from './request.js';
export default {
  name: 'Notice',
  inject: ['projectName'],
  components: { ExpireDialog },
  data() {
    return {
      showNotice: false,
      expireTip: {
        show: false,
        content: ''
      },
      rechargeTip: {
        show: false
      },
      showDialog: false,
      enterpriseSubExpireInfos: []
    };
  },
  created() {
    // 关闭通知后，所有页面都不再显示
    // 下次登录后，如果任然欠费，需要再次显示通知
    // 所以关闭通知后，不再查询账户欠费状态
    if (sessionStorage.getItem('dmShowNotice') != 0) {
      this.loadData();
    }
  },
  methods: {
    loadData() {
      // this.loadAccountStateInfo();
      this.loadExpireData();
    },
    loadAccountStateInfo() {
      getAccountStateInfo().then((res) => {
        const { errorCode, result } = res.data || {};
        if (errorCode != 0) return;
        this.rechargeTip.show = result.accountBlance <= 0;
        if (this.rechargeTip.show) {
          this.updateNoticeShow();
        }
      });
    },
    loadExpireData() {
      let dmUserInfo = JSON.parse(localStorage.getItem('dmUserInfo')) || {};
      if(!dmUserInfo.superAdmin){
        return;
      }
      getExpireExterprise().then((res) => {
        const { errorCode, result } = res.data || {};
        if (errorCode != 0) return;
        let { totalCount, expireEnterprises } = result;
        expireEnterprises = expireEnterprises || [];
        if(!expireEnterprises.length){
          return;
        }
        let name = '集团商户';
        let expireDayStr;
        let all = 1;
        expireEnterprises.forEach(item=>{
          if(!expireDayStr){
            expireDayStr = item.expireDayStr;
            return
          }
          if(item.expireDayStr != expireDayStr){
            all = 0;
          }
          if(item.expireDayStr < expireDayStr){
            expireDayStr = item.expireDayStr;
          }
        })
        if(!all || totalCount > expireEnterprises.length){
          name = '集团下部分商户';
        }
        if(!expireDayStr){
          return;
        }
        let expireDate = new Date(expireDayStr);
        expireDayStr = this.formatDate(expireDate,'yyyy-MM-dd');
        expireDayStr = (expireDayStr == this.formatDate(new Date(),'yyyy-MM-dd') ? '今日 23:59:59' : expireDayStr);
        this.expireTip = {
          content: `${name}将于 ${expireDayStr || ''} 到期，到期后将被冻结无法登录，请及时联系运营人员续费。`,
          show: dmUserInfo.superAdmin ? true : false,
          showButton: expireEnterprises.length && (!all || totalCount > expireEnterprises.length),
        };
        this.expireEnterprises = expireEnterprises;
        if (this.expireTip.show) {
          this.updateNoticeShow();
        }
      });
    },
    formatDate(date,fmt){
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "H+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt)){
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (let k in o){
        if (new RegExp("(" + k + ")").test(fmt)){
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    },
    updateNoticeShow() {
      if (this.showNotice) return;
      this.showNotice = true;
      this.$emit('show');
    },
    onClose() {
      sessionStorage.setItem('dmShowNotice', 0);
      this.showNotice = false;
      this.$emit('close');
    },
    toRecharge() {
      window.open(location.origin + '/marketing/#/recharge/do');
    }
  }
};
</script>

<style scoped>
.notice-box {
  flex-shrink: 0;
  padding: 0 21px;
  width: 100%;
  height: 42px;
  background: #fef3eb;
}

.notice-box /deep/ .el-alert__content {
  width: 100%;
}

.notice-box .notice-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
  line-height: 42px;
}

.notice-box .recharge-tip {
  flex-shrink: 0;
  width: 500px;
}

.notice-box .recharge-tip .rechange-btn {
  margin-left: 12px;
  font-weight: 500;
  color: #fa8c16;
}

.notice-box .recharge-tip .rechange-btn /deep/ span {
  display: flex;
  align-items: center;
}

.notice-box .separator {
  margin: 0 25px;
  width: 2px;
  height: 28px;
  background: linear-gradient(180deg, rgba(253, 192, 49, 0) 0%, #fa8c16 50%, rgba(253, 192, 49, 0) 100%);
}

.notice-box .expire-tip {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
}

.notice-box .more-btn {
  margin-left: 12px;
  font-weight: 500;
  color: #fa8c16;
}

.notice-box .more-btn /deep/ span {
  display: flex;
  align-items: center;
}

.notice-box /deep/ .el-alert__closebtn {
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #606266;
}
</style>
