<template>
  <div class="container" v-loading="loading">
    <PageHeader :title="$t('field.apiCommunicate')">
      <template #icon>
        <i class="el-icon-refresh-right refresh-icon" @click="handleRefresh"></i>
      </template>
    </PageHeader>

    <div class="box" >
      <div class="boxItem" v-for="(item, index) in showData" :key="index">
        <i :class="iconArr[index]"></i>
        <div class="name">{{ item.name }}</div>
        <div :class="`status ${item.status ? 'normal' : 'disconnection'}`">
          {{ item.status ? $t('field.normal') : $t('field.disconnection') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '../../components/PageHeader.vue'
export default {
  name: 'ApiCommunication',
  components: {
    PageHeader
  },
  data() {
    return {
      showData: [],
      iconArr: [
        'el-icon-monitor',
        'el-icon-cpu',
        'el-icon-data-board',
        'el-icon-message',
        'el-icon-film',
        'el-icon-data-analysis'
      ],

      loading: true,
    }
  },

  mounted() {
    this.getShowData();
  },

  methods: {
    async handleRefresh() {
      await this.getShowData()
    },

    async getShowData() {
      this.loading = true;
      const res = await this.$apis.getApiStatus({});
      this.loading = false;
      if (res.success) {
        const obj = res.data.result
        for (const key in obj) {
          this.showData.push({
            name: key,
            status: obj[key],
          })
        }
        this.showData.push({
          name: '日结估值接口',
          status: true
        })
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  padding: 8px 9px;
}

.box {
  width: 100%;
  margin-top: 10px;
  display: flex;
  font-size: 10px;
  flex-wrap: wrap;

  .boxItem {
    width: 33%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    i {
      color: var(--color-90);
      font-size: 14px !important;
    }

    .name {
      color: var(--color-90);
    }

    .status {
      padding: 2px 4px;
      font-size: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
    }

    .normal {
      background-color: rgba(32, 201, 139, 0.1);
      border: 1px solid rgba(32, 201, 139, 0.1);
      color: rgb(32, 201, 139);
    }

    .disconnection {
      background-color: rgba(233, 86, 82, 0.1);
      border: 1px solid rgba(233, 86, 82, 0.1);
      color: rgb(233, 86, 82);
    }
  }
}
</style>