<template>
  <div class="accessInformation">
    <dl class="clearfix" v-for="item in accessData" :key="item.key">
      <dt class="iconfont" :style="{'background-color': item.color}" v-html="item.icon"></dt>
      <dd>
        <span class="name">{{ item.name }}</span>
        <div class="num">
          <span>{{ item.count }}</span>个
        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
  import Api from '@/api/index.js'

  export default { 
    data () { 
      return {
        accessData: [{
          name: '服务总数',
          key: 'approvedMap',
          count: 0,
          icon: '&#xe630;',
          color: '#F3BB45'
        }, {
          name: '请求成功数',
          key: 'successMap',
          count: 0,
          icon: '&#xe61d;',
          color: '#41B883'
        }, {
          name: '响应失败数',
          key: 'failerror',
          count: 0,
          icon: '&#xe61f;',
          color: '#68B3C8'
        }, {
          name: '接入系统数',
          key: 'applyApp',
          count: 0,
          icon: '&#xe962;',
          color: '#EB5E28'
        }]
      }
    },
    mounted () { 
      // this.getServiceAccessInformation()
      this.getServicesCount() // 服务访问总数
      this.getAnalyzeValue('ALLSNUM') // 请求成功
      this.getAnalyzeValue('ALLFNUM') // 响应失败
      this.getSysCount() // 接入系统数
    },
    methods: { 
      // 服务访问总数
      getServicesCount () {
        Api.getServicesCount()
        .then(data => {
          if (data.status === 0) {
            this.accessData[0].count = data.data
          } else {
            this.$message({
              type: 'warning',
              message: '请求数据失败'
            })
          }
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      },
      // 请求成功 和 响应失败
      getAnalyzeValue (name) {
        Api.getAnalyzeValue(name)
        .then(data => {
          if (name === 'ALLSNUM') { // 请求成功
            this.accessData[1].count = data.data
          } else {
            this.accessData[2].count = data.data
          }
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      },
      // 接入系统数
      getSysCount () {
        Api.getSysCount()
        .then(data => {
          this.accessData[3].count = data.data
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      }
      // 获取信息板块相关数据
      /* getServiceAccessInformation(){ 
        Api.getServiceAccessInformation().then(data=>{ 
          if(data.status === 0){ 
            this.accessData = data.results
          }else{ 
            this.$message({
              type: 'error',
              message: '请求数据为空'
            })
          }
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      } */
    }
  }
</script>

<style lang="scss" scoped>
  .accessInformation { 
    min-height: 140px;
    padding: 25px 40px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    dl {
      max-width: 280px;
      // height: 100px;
      background: #eceff1;
      border: solid 1px #b6bdc5;;
      box-shadow: 0 4px 8px rgba($color: #b6bdc5, $alpha: .25);
      margin: 0 30px;
      border-radius: 4px;
      padding: 20px 15px;
      flex: 1;
      display: flex;
      align-items: center;

      dt {
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 30px;
        font-weight: 400;
        // background-color: #353d48;
        color: #ffffff;
        border-radius: 50%;
      }
      dd {
        margin-left: 20px;
        color: #878d9d;
        font-size: 16px;
        text-align: left;

        .num {
          margin-top: 6px;

          > span {
            color: #353d48;
            font-size: 24px;
            font-weight: 500;
            margin-right: 5px;
          }
        }
      }
    }
  }
  @media screen and (max-width:1366px) {
    .accessInformation {
      min-height: 110px;
      padding: 15px 20px;

      dl {
        margin: 0 20px;
      }
    }
  }
</style>
