<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="otherExpireServices"></expire-dialog>
  </div>
</template>

<script>
import ExpireDialog from './expire-dialog.vue';
import { getAccountStateInfo, getExpireData } from './request.js';
export default {
  name: 'Notice',
  inject: ['projectName'],
  components: { ExpireDialog },
  data() {
    return {
      showNotice: false,
      expireTip: {
        show: false,
        content: ''
      },
      rechargeTip: {
        show: false
      },
      showDialog: false,
      otherExpireServices: []
    };
  },
  created() {
    // 关闭通知后，所有页面都不再显示
    // 下次登录后，如果任然欠费，需要再次显示通知
    // 所以关闭通知后，不再查询账户欠费状态
    if (sessionStorage.getItem('dmShowNotice') != 0) {
      this.getAccountState();
    }
  },
  methods: {
    getAccountState() {
      // 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(sessionStorage.getItem('userInfos'));
      let service = {
        serviceType: 1,
        serviceName: '好办'
      };
      let serviceType = service.serviceType;
      getExpireData({
        serviceType
      }).then(res => {
        const { errorCode, result } = res.data || {};
        if (errorCode != 0) return;
        let { otherExpireServices, expireStatus, expireDayStr } = result;
        otherExpireServices = otherExpireServices || [];
        if (expireStatus == 1) {
          this.expireTip.content = `${service.serviceName}将于 ${expireDayStr} 到期，到期后功能无法使用，请及时联系运营人员续费。`;
          this.expireTip.show = true;
        }
        this.expireTip.showButton = otherExpireServices.length && serviceType == 11;
        this.otherExpireServices = otherExpireServices || [];

        if (serviceType == 11 && !dmUserInfo.superAdmin) {
          this.expireTip.show = false;
        }

        if (this.expireTip.show) {
          this.updateNoticeShow();
        }
      });
    },
    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');
    }
  },
  watch: {
    showNotice(n) {
      this.$emit('showNotice', n);
    }
  }
};
</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>
