<template>
  <div class="homeIndex">
    <div class="header">
      <div class="title">
        <p class="p1">数据海洋中的灯塔</p>
        <p class="p2">LIHTHOUSE IN THE OCEAN OF DATA</p>
      </div>
      <div class="select">
        <el-form inline size="small">
          <el-form-item label="API名称:">
            <el-select
              v-model="apiIds"
              clearable
              collapse-tags
              filterable
              multiple
              placeholder="请选择"
              size="mini"
              @change="radioChange()"
            >
              <el-option
                v-for="item in apiList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="应用名称:">
            <el-select
              v-model="appIds"
              collapse-tags
              clearable
              filterable
              multiple
              placeholder="请选择"
              size="mini"
              @change="radioChange()"
            >
              <el-option
                v-for="item in appList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="userRoles == '1'" label="开发者:">
            <el-select
              v-model="userIds"
              collapse-tags
              clearable
              filterable
              multiple
              placeholder="请选择"
              size="mini"
              @change="radioChange()"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              plain
              size="mini"
              type="primary"
              @click="selectAll('user')"
            >全选</el-button
            >
            <el-button
              plain
              size="mini"
              type="primary"
              @click="getNumberCalls"
            >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="bodyBox">
      <el-row :gutter="15" justify="space-between" type="flex">
        <el-col :span="5">
          <div class="cardBox NumBox">
            <div class="left">
              <p>
                <countTo
                  :duration="2000"
                  :end-val="allInfo.appNum ? allInfo.appNum : 0"
                  :start-val="0"
                />
              </p>
              <p
                style="font-size: 14px; color: #909399;font-weight: normal;margin-top: 5px;"
              >
                应用数
              </p>
            </div>
            <div class="right">
              <img alt="" src="./img/icon-yingyong.png" >
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="cardBox NumBox">
            <div class="left">
              <p>
                <countTo
                  :duration="2000"
                  :end-val="
                    allInfo.apiApplyNum != null ? allInfo.apiApplyNum : 0
                  "
                  :start-val="0"
                />
              </p>
              <p
                style="font-size: 14px; color: #909399;font-weight: normal;margin-top: 5px;"
              >
                申请API数
              </p>
            </div>
            <div class="right">
              <img alt="" src="./img/icon-api.png" >
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="cardBox NumBox">
            <div class="left">
              <p>
                <countTo
                  :duration="2000"
                  :end-val="allInfo.total != null ? allInfo.total : 0"
                  :start-val="0"
                />
              </p>
              <p
                style="font-size: 14px; color: #909399;font-weight: normal;margin-top: 5px;"
              >
                总调用次数
              </p>
            </div>
            <div class="right">
              <img alt="" src="./img/icon-diaoyong.png" >
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="cardBox NumBox">
            <div class="left">
              <p>
                <countTo
                  :duration="2000"
                  :end-val="
                    allInfo.successCount != null ? allInfo.successCount : 0
                  "
                  :start-val="0"
                />
              </p>
              <p
                style="font-size: 14px; color: #909399;font-weight: normal;margin-top: 5px;"
              >
                总调用成功次数
              </p>
            </div>
            <div class="right">
              <img alt="" src="./img/icon-chenggong.png" >
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="cardBox NumBox">
            <div class="left">
              <p>
                <countTo
                  :duration="2000"
                  :end-val="allInfo.failCount ? allInfo.failCount : 0"
                  :start-val="0"
                />
              </p>
              <p
                style="font-size: 14px; color: #909399;font-weight: normal;margin-top: 5px;"
              >
                总调用失败次数
              </p>
            </div>
            <div class="right">
              <img alt="" src="./img/icon-shibai.png" >
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="charts">
        <el-row :gutter="15" justify="space-between" type="flex">
          <el-col :span="8">
            <div class="cardBox">
              <el-radio-group
                v-model="form.type"
                size="mini"
                @change="radioChange('type')"
              >
                <el-radio-button border label="0">今日</el-radio-button>
                <el-radio-button border label="1">本周</el-radio-button>
                <el-radio-button border label="2">本月</el-radio-button>
              </el-radio-group>
              <el-row :gutter="10" style="margin-top: 10px;">
                <el-col :span="12">
                  <div class="bgBox bg1">
                    <p class="p1">调用次数</p>
                    <p class="p2">
                      {{ callsInfo.total ? callsInfo.total : 0 }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="bgBox bg2">
                    <p class="p1">成功次数</p>
                    <p class="p2">
                      {{ callsInfo.successCount ? callsInfo.successCount : 0 }}
                    </p>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 10px;">
                <el-col :span="12">
                  <div class="bgBox bg3">
                    <p class="p1">失败次数</p>
                    <p class="p2">
                      {{ callsInfo.failCount ? callsInfo.failCount : 0 }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="bgBox bg4">
                    <p class="p1">接入应用数量</p>
                    <p class="p2">
                      {{ callsInfo.appNum ? callsInfo.appNum : 0 }}
                    </p>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="cardBox mt-20">
              <pieChart :pie-data="pieData" />
            </div>
          </el-col>
          <el-col :span="16">
            <div
              style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;"
            >
              <div class="cardBox">
                <lineChart :line-data="lineData" />
              </div>
              <div style="flex: 1;" class="mt-20">
                <el-row :gutter="15" justify="space-between" type="flex">
                  <el-col :span="12">
                    <div class="cardBox">
                      <h3>调用接口排行榜</h3>
                      <div class="table" style="height: 100%;">
                        <el-table
                          :data="apiData"
                          :header-cell-style="{
                            'background-color': '#f5f6fa',
                            'text-align': 'center'
                          }"
                          :cell-style="{
                            'text-align': 'center'
                          }"
                          border
                          height="315px"
                          stripe
                          style="width: 100%"
                        >
                          <el-table-column label="接口名称" prop="apiName" />
                          <el-table-column
                            label="总调用次数"
                            prop="totalCount"
                          />
                        </el-table>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="cardBox">
                      <h3>应用调用排行榜</h3>
                      <div class="table">
                        <el-table
                          :data="appData"
                          :header-cell-style="{
                            'background-color': '#f5f6fa',
                            'text-align': 'center'
                          }"
                          :cell-style="{
                            'text-align': 'center'
                          }"
                          border
                          height="315px"
                          stripe
                          style="width: 100%;"
                        >
                          <el-table-column label="应用名称" prop="appName" />
                          <el-table-column
                            label="总调用次数"
                            prop="totalCount"
                          />
                        </el-table>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <!-- <el-col :span="6">
            <div class="tableBox">
              <div class="cardBox">
                <h3>调用接口排行榜</h3>
                <div class="table">
                  <el-table
                    :data="apiData"
                    :header-cell-style="{
                      'background-color': '#f5f6fa',
                      'text-align': 'center'
                    }"
                    :cell-style="{
                      'text-align': 'center'
                    }"
                    border
                    height="250"
                    stripe
                    style="width: 100%">
                    <el-table-column label="接口名称" prop="apiName" />
                    <el-table-column label="总调用次数" prop="totalCount" />
                  </el-table>
                </div>
              </div>
              <div class="cardBox ">
                <h3>应用调用排行榜</h3>
                <div class="table">
                  <el-table
                    :data="appData"
                    :header-cell-style="{
                      'background-color': '#f5f6fa',
                      'text-align': 'center'
                    }"
                    :cell-style="{
                      'text-align': 'center'
                    }"
                    border
                    height="250"
                    stripe
                    style="width: 100%">
                    <el-table-column label="应用名称" prop="appName" />
                    <el-table-column label="总调用次数" prop="totalCount" />
                  </el-table>
                </div>
              </div>
            </div>
          </el-col> -->
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import pieChart from './pie.vue'
import mapChart from './map.vue'
import lineChart from './line.vue'
import {
  list,
  myAppList,
  numberCalls,
  userList,
  apiRank,
  appRank,
  appPutin,
  callFact
} from '../../api/apimngr'
import countTo from 'vue-count-to'
import { mapState } from 'vuex'
export default {
  components: {
    pieChart,
    mapChart,
    lineChart,
    countTo
  },
  data() {
    return {
      apiIds: [],
      appIds: [],
      userIds: [],
      apiList: [],
      appList: [],
      userList: [],
      apiData: [],
      appData: [],
      userRoles: null,
      form: {
        apiId: '',
        appId: '',
        userId: '',
        type: 0
      },
      callsInfo: {},
      allInfo: {},
      pieData: [],
      lineData: [],
      mapData: []
    }
  },
  computed: {
    ...mapState(['user'])
  },
  mounted() {
    this.getApiList() // 获取api列表
    this.getAppList() // 获取应用列表
    this.getUserList() // 获取开发者列表
    this.userRoles = this.user.roles[0]
    if (this.userRoles !== '1') {
      this.form.userId = this.user.userId
    }
    this.getNumberCalls() // 获取调用次数
    this.getAll()
  },
  methods: {
    radioChange(type) {
      if (!type) {
        this.getAll()
      }
      this.getNumberCalls()
    },
    // 全选
    selectAll(val) {
      if (val === 'api') {
        this.apiIds = this.apiList.map(val => val.id)
      }
      if (val === 'app') {
        this.appIds = this.appList.map(val => val.id)
      }
      if (val === 'user') {
        if (this.userRoles === '1') {
          this.userIds = this.userList.map(val => val.id)
        }
      }
    },
    // 获取api列表
    getApiList() {
      list().then(res => {
        if (res.code === 10000) {
          this.apiList = res.data
        }
      })
    },
    // 获取应用列表
    getAppList() {
      myAppList().then(res => {
        if (res.code === 10000) {
          this.appList = res.data
        }
      })
    },
    getAll() {
      const params = {
        apiId: this.apiIds.join(','),
        appId: this.appIds.join(','),
        userId: null
      }
      if (this.userRoles === '1') {
        params.userId = this.userIds.join(',') ? this.userIds.join(',') : null
      } else {
        params.userId = this.form.userId
      }
      numberCalls(params).then(res => {
        if (res.code === 10000) {
          this.allInfo = res.data
        }
      })
    },
    // 获取首页调用次数
    getNumberCalls() {
      const loading = this.$loading({
        lock: true,
        text: '页面正在加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
        customClass:'THEME_LOADING_COLOR',
      })
      setTimeout(() => {
        loading.close()
        this.form.apiId = this.apiIds.join(',')
        this.form.appId = this.appIds.join(',')
        if (this.userRoles === '1') {
          this.form.userId = this.userIds.join(',')
        }
        numberCalls(this.form).then(res => {
          if (res.code === 10000) {
            this.callsInfo = res.data
          }
        })
        apiRank(this.form).then(res => {
          if (res.code === 10000) {
            this.apiData = res.data
          }
        })
        appRank(this.form).then(res => {
          if (res.code === 10000) {
            this.appData = res.data
          }
        })
        appPutin(this.form).then(res => {
          if (res.code === 10000) {
            this.pieData = res.data
          }
        })

        callFact(this.form).then(res => {
          if (res.code === 10000) {
            this.lineData = res.data
          }
        })
        // spread(this.form).then(res => {
        //   if (res.code === 10000) {
        //     this.mapData = res.data
        //   }
        // })
      }, 1000)
    },
    // 获取开发者列表
    getUserList() {
      userList({}).then(res => {
        if (res.code === 10000) {
          this.userList = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss">
.homeIndex {
  .mt-20 {
    margin-top: 20px;
  }

  h3 {
    margin: 0;
    padding: 0;
    color: #0c0c0cb9;
    font-size: 18px;
    margin-bottom: 15px;
  }

  p {
    margin: 0;
    padding: 0;
  }

  .header {
    padding: 20px 200px;
    text-align: center;
    background-image: url("./img/headbg.png");
    background-size: 100% 100%;

    .title {
      .p1 {
        font-size: 26px;
        font-weight: bold;
        margin-top: 15px;
      }

      .p2 {
        font-size: 14px;
        margin-top: 5px;
      }
    }

    .select {
      margin-top: 30px;

      .selectBox {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;

        div {
          margin-right: 5px;
        }
      }
    }
  }

  .bodyBox {
    padding: 30px 20px;
    box-sizing: border-box;

    .cardBox {
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 5px;
    }

    .NumBox {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 25px;
      font-weight: bold;
    }

    .charts {
      margin-top: 40px;

      .bgBox {
        width: 100%;
        padding: 20px 10px 30px 15px;
        background-size: 100% 100%;
        box-sizing: border-box;
      }

      .bg1 {
        background-image: url("./img/pic-1.png");
      }

      .bg2 {
        background-image: url("./img/pic-2.png");
      }

      .bg3 {
        background-image: url("./img/pic-3.png");
      }

      .bg4 {
        background-image: url("./img/pic-4.png");
      }

      .el-col {
        padding: 0;
      }

      p {
        font-size: 20px;
        font-weight: bold;
      }

      .p1 {
        font-size: 13px;
        color: #909399;
        font-weight: normal;
      }
    }

    .tableBox {
      width: 100%;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      // flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>
