<template>
  <div class="dashboard-bg-container">
    <!--    <p class="maintitle"> 运营情况</p>-->
    <!--    <p/>-->
    <iframe :src="iframeUrl" width="100%" height="100%" frameborder="0"/>
    <!--    <div class="line1div">-->
    <!--      <div class="left">-->
    <!--        <div class="leftlabel">-->
    <!--          <span>开发者</span>-->
    <!--        </div>-->
    <!--        <div class="rightlabel">-->
    <!--          <router-link to="/developermngr/devlist"><el-button type="text">管理</el-button></router-link>-->
    <!--        </div>-->
    <!--        <div class="adminline"/>-->
    <!--        <div class="myadminapp">-->
    <!--          <div class="leftbt">-->
    <!--            <p>全部账户</p>-->
    <!--            <p><span style="color: blue"> {{ allNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="rightbt">-->
    <!--            <p>今日活跃账户</p>-->
    <!--            <p><span style="color: blue"> {{ todayActiveNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="leftbt">-->
    <!--            <p>本月活跃账户</p>-->
    <!--            <p><span style="color: blue"> {{ monthAcitveNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="rightbt">-->
    <!--            <p>预警账户</p>-->
    <!--            <p><span style="color: orange"> {{ alaramNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="leftbt">-->
    <!--            <p>异常账户</p>-->
    <!--            <p><span style="color: red"> {{ abnormalNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="rightbt">-->
    <!--            <p >非法账户</p>-->
    <!--            <p><span style="color: darkred"> {{ illegalNum }} </span>个</p>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="right">-->
    <!--        <div class="leftlabel">-->
    <!--          <span>开发者活跃排行榜</span>-->
    <!--        </div>-->

    <!--        <div class="admindatepicker" >-->
    <!--          <span >请选择时间段</span>-->
    <!--          <el-date-picker-->
    <!--            v-model="logTime1"-->
    <!--            :picker-options="pickerOptions"-->
    <!--            type="daterange"-->
    <!--            size="mini"-->
    <!--            range-separator="-"-->
    <!--            start-placeholder="开始日期"-->
    <!--            end-placeholder="结束日期"-->
    <!--            @change="searchDevData"-->
    <!--          />-->
    <!--        </div>-->
    <!--        <div class="admintable">-->
    <!--          <el-table-->
    <!--            ref="multipleTable"-->
    <!--            :data="userData"-->
    <!--            :highlight-current-row="true"-->
    <!--            :header-cell-style="{background:'#E0E0E0',color:'#666666'}"-->
    <!--            max-height="220"-->
    <!--            border-->
    <!--            class="eltable">-->
    <!--            <el-table-column-->
    <!--              prop="id"-->
    <!--              label="排名"/>-->
    <!--            <el-table-column-->
    <!--              prop="userName"-->
    <!--              label="开发者"/>-->
    <!--            <el-table-column-->
    <!--              prop="appNum"-->
    <!--              label="应用数量"/>-->
    <!--            <el-table-column-->
    <!--              prop="totalCount"-->
    <!--              label="总调用量"/>-->
    <!--            <el-table-column-->
    <!--              prop="failCount"-->
    <!--              label="调用失败"/>-->
    <!--            <el-table-column-->
    <!--              fixed="right"-->
    <!--              label="详细统计">-->
    <!--              <template slot-scope="scope">-->
    <!--                <router-link :to="{path:'/devappreport/appreport',query:{userId: scope.row.userId}}"><el-button type="text">查看</el-button></router-link>-->
    <!--              </template>-->
    <!--            </el-table-column>-->
    <!--          </el-table>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->

    <!--    <div class="line2div">-->
    <!--      <div class="left">-->
    <!--        <div class="leftlabel">-->
    <!--          <span>应用</span>-->
    <!--        </div>-->
    <!--        <div class="rightlabel">-->
    <!--          <router-link to="/appmngr/applist"><el-button type="text">管理</el-button></router-link>-->
    <!--        </div>-->
    <!--        <div class="adminline"/>-->
    <!--        <div class="myadminapp">-->
    <!--          <div class="leftbt">-->
    <!--            <p>全部应用</p>-->
    <!--            <p><span style="color: blue"> {{ allAppNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="rightbt">-->
    <!--            <p>今日活跃应用</p>-->
    <!--            <p><span style="color: blue"> {{ todayActiveAppNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="leftbt">-->
    <!--            <p>本月活跃应用</p>-->
    <!--            <p><span style="color: blue"> {{ monthAcitveAppNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="rightbt">-->
    <!--            <p>预警应用</p>-->
    <!--            <p><span style="color: orange"> {{ alaramAppNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="leftbt">-->
    <!--            <p>异常应用</p>-->
    <!--            <p><span style="color: red"> {{ abnormalAppNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="rightbt">-->
    <!--            <p >非法应用</p>-->
    <!--            <p><span style="color: darkred"> {{ illegalAppNum }} </span>个</p>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="right">-->
    <!--        <div class="leftlabel">-->
    <!--          <span>应用活跃排行榜</span>-->
    <!--        </div>-->
    <!--        <div class="admindatepicker">-->
    <!--          <span>请选择时间段</span>-->
    <!--          <el-date-picker-->
    <!--            v-model="logTime2"-->
    <!--            :picker-options="pickerOptions"-->
    <!--            type="daterange"-->
    <!--            size="mini"-->
    <!--            range-separator="-"-->
    <!--            start-placeholder="开始日期"-->
    <!--            end-placeholder="结束日期"-->
    <!--            align="right"-->
    <!--            @change="searchAppData"-->
    <!--          />-->
    <!--        </div>-->
    <!--        <div class="admintable">-->
    <!--          <el-table-->
    <!--            ref="multipleTable"-->
    <!--            :data="appData"-->
    <!--            :highlight-current-row="true"-->
    <!--            :header-cell-style="{background:'#E0E0E0',color:'#666666'}"-->
    <!--            max-height="220"-->
    <!--            class="eltable"-->
    <!--            border>-->
    <!--            <el-table-column-->
    <!--              prop="id"-->
    <!--              label="排名"/>-->
    <!--            <el-table-column-->
    <!--              prop="appName"-->
    <!--              label="应用名称"/>-->
    <!--            <el-table-column-->
    <!--              prop="userName"-->
    <!--              label="开发者"/>-->
    <!--            <el-table-column-->
    <!--              prop="totalCount"-->
    <!--              label="总调用量"/>-->
    <!--            <el-table-column-->
    <!--              prop="failCount"-->
    <!--              label="调用失败"/>-->
    <!--            <el-table-column-->
    <!--              fixed="right"-->
    <!--              label="详细统计">-->
    <!--              <template slot-scope="scope">-->
    <!--                <router-link :to="{path:'/devappreport/appreport',query:{appId:scope.row.appId, userId: scope.row.userId}}"><el-button type="text">查看</el-button></router-link>-->
    <!--              </template>-->
    <!--            </el-table-column>-->
    <!--          </el-table>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->

    <!--    <div class="line3div">-->
    <!--      <div class="left">-->
    <!--        <div class="leftlabel">-->
    <!--          <span>接口</span>-->
    <!--        </div>-->
    <!--        <div class="rightlabel">-->
    <!--          <router-link to="/apimngr/apilist"><el-button type="text">管理</el-button></router-link>-->
    <!--        </div>-->
    <!--        <div class="adminline"/>-->
    <!--        <div class="myadminapp">-->
    <!--          <div class="leftbt">-->
    <!--            <p>全部接口</p>-->
    <!--            <p><span style="color: blue"> {{ allApiNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="rightbt">-->
    <!--            <p>发布接口</p>-->
    <!--            <p><span style="color: blue"> {{ publishedNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="leftbt">-->
    <!--            <p>未发布接口</p>-->
    <!--            <p><span style="color: blue"> {{ unPublishedNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="rightbt">-->
    <!--            <p>今日调用量</p>-->
    <!--            <p><span style="color: orange"> {{ todayCallNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="leftbt">-->
    <!--            <p>预警接口</p>-->
    <!--            <p><span style="color: red"> {{ alarmApiNum }} </span>个</p>-->
    <!--          </div>-->
    <!--          <div class="rightbt">-->
    <!--            <p >异常接口</p>-->
    <!--            <p><span style="color: darkred"> {{ abnormalApiNum }} </span>个</p>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="right">-->
    <!--        <div class="leftlabel">-->
    <!--          <span>接口调用排行榜</span>-->
    <!--        </div>-->
    <!--        <div class="admindatepicker">-->
    <!--          <span>请选择时间段</span>-->
    <!--          <el-date-picker-->
    <!--            v-model="logTime3"-->
    <!--            :picker-options="pickerOptions"-->
    <!--            type="daterange"-->
    <!--            size="mini"-->
    <!--            range-separator="-"-->
    <!--            start-placeholder="开始日期"-->
    <!--            end-placeholder="结束日期"-->
    <!--            align="right"-->
    <!--            @change="searchApiData"-->
    <!--          />-->
    <!--        </div>-->
    <!--        <div class="admintable">-->
    <!--          <el-table-->
    <!--            ref="multipleTable"-->
    <!--            :data="apiData"-->
    <!--            :highlight-current-row="true"-->
    <!--            :header-cell-style="{background:'#E0E0E0',color:'#666666'}"-->
    <!--            max-height="220"-->
    <!--            class="eltable"-->
    <!--            border>-->
    <!--            <el-table-column-->
    <!--              prop="id"-->
    <!--              label="排名"/>-->
    <!--            <el-table-column-->
    <!--              prop="apiName"-->
    <!--              label="接口名称"/>-->
    <!--            <el-table-column-->
    <!--              prop="totalCount"-->
    <!--              label="总调用量"/>-->
    <!--            <el-table-column-->
    <!--              prop="failCount"-->
    <!--              label="调用失败"/>-->
    <!--            <el-table-column-->
    <!--              prop="failRate"-->
    <!--              label="失败率"/>-->
    <!--            <el-table-column-->
    <!--              fixed="right"-->
    <!--              label="详细统计">-->
    <!--              <template slot-scope="scope">-->
    <!--                <router-link :to="{path:'/devappreport/appreport',query:{apiId:scope.row.apiId}}"><el-button type="text">查看</el-button></router-link>-->
    <!--              </template>-->
    <!--            </el-table-column>-->
    <!--          </el-table>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
export default {
  name: 'DashboardAdmin',
  data() {
    return {
      iframeUrl: window.iframeUrl,
      logTime1: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 30),
        new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)],
      logTime2: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 30),
        new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)],
      logTime3: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 30),
        new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
      },
      allNum: 0,
      todayActiveNum: 0,
      monthAcitveNum: 0,
      alaramNum: 0,
      abnormalNum: 0,
      illegalNum: 0,
      userData: [], // 表格数据 仅展示当前页的数据
      allAppNum: 0,
      todayActiveAppNum: 0,
      monthAcitveAppNum: 0,
      alaramAppNum: 0,
      abnormalAppNum: 0,
      illegalAppNum: 0,
      appData: [], // 表格数据 仅展示当前页的数据
      allApiNum: 0,
      publishedNum: 0,
      unPublishedNum: 0,
      todayCallNum: 0,
      abnormalApiNum: 0,
      alarmApiNum: 0,
      apiData: [] // 表格数据 仅展示当前页的数据
    }
  },
  created() {
    this.searchDevNum()
    this.searchDevData()
    this.searchAppNum()
    this.searchAppData()
    this.searchApiNum()
    this.searchApiData()
  },
  methods: {
    searchDevNum() {
      var vm = this
      axios.get(process.env.BASE_API + '/user/developercount', {
        params: {
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.allNum = 0
          vm.todayActiveNum = 0
          vm.monthAcitveNum = 0
          vm.alaramNum = 0
          vm.abnormalNum = 0
          vm.illegalNum = 0
        } else {
          vm.allNum = obj.allNum
          vm.todayActiveNum = obj.todayActiveNum
          vm.monthAcitveNum = obj.monthAcitveNum
          vm.alaramNum = obj.alaramNum
          vm.abnormalNum = obj.abnormalNum
          vm.illegalNum = obj.illegalNum
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    searchDevData() {
      const vm = this
      var beginTime = ''
      var endTime = ''
      if (this.logTime1[0] !== undefined && this.logTime1[0] !== '') {
        beginTime = moment(this.logTime1[0]).format('YYYY-MM-DD')
      }
      if (this.logTime1[1] !== undefined && this.logTime1[1] !== '') {
        endTime = moment(this.logTime1[1]).format('YYYY-MM-DD')
      }
      axios.get(process.env.BASE_API + '/user/topdevelopers', {
        params: {
          beginDate: beginTime,
          endDate: endTime
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          // vm.$message.error(obj.message)
          vm.userData = []
        } else {
          // console.log(obj.data)
          vm.userData = obj.data
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    searchAppNum() {
      var vm = this
      axios.get(process.env.BASE_API + '/app/appcount', {
        params: {
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.allAppNum = 0
          vm.todayActiveAppNum = 0
          vm.monthAcitveAppNum = 0
          vm.alaramAppNum = 0
          vm.abnormalAppNum = 0
          vm.illegalAppNum = 0
        } else {
          vm.allAppNum = obj.allAppNum
          vm.todayActiveAppNum = obj.todayActiveAppNum
          vm.monthAcitveAppNum = obj.monthAcitveAppNum
          vm.alaramAppNum = obj.alaramAppNum
          vm.abnormalAppNum = obj.abnormalAppNum
          vm.illegalAppNum = obj.illegalAppNum
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    searchAppData() {
      const vm = this
      var beginTime = ''
      var endTime = ''
      if (this.logTime2[0] !== undefined && this.logTime2[0] !== '') {
        beginTime = moment(this.logTime2[0]).format('YYYY-MM-DD')
      }
      if (this.logTime2[1] !== undefined && this.logTime2[1] !== '') {
        endTime = moment(this.logTime2[1]).format('YYYY-MM-DD')
      }
      axios.get(process.env.BASE_API + '/app/topapps', {
        params: {
          beginDate: beginTime,
          endDate: endTime
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.appData = []
        } else {
          vm.appData = obj.data
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    searchApiNum() {
      var vm = this
      axios.get(process.env.BASE_API + '/apimngr/apicount', {
        params: {
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.allApiNum = 0
          vm.publishedNum = 0
          vm.unPublishedNum = 0
          vm.todayCallNum = 0
          vm.alarmApiNum = 0
          vm.abnormalAppNum = 0
        } else {
          vm.allApiNum = obj.allApiNum
          vm.publishedNum = obj.publishedNum
          vm.unPublishedNum = obj.unPublishedNum
          vm.todayCallNum = obj.todayCallNum
          vm.alarmApiNum = obj.alarmApiNum
          vm.abnormalAppNum = obj.abnormalAppNum
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    searchApiData() {
      const vm = this
      var beginTime = ''
      var endTime = ''
      if (this.logTime3[0] !== undefined && this.logTime3[0] !== '') {
        beginTime = moment(this.logTime3[0]).format('YYYY-MM-DD')
      }
      if (this.logTime3[1] !== undefined && this.logTime3[1] !== '') {
        endTime = moment(this.logTime3[1]).format('YYYY-MM-DD')
      }
      axios.get(process.env.BASE_API + '/apimngr/topapis', {
        params: {
          beginDate: beginTime,
          endDate: endTime
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.apiData = []
        } else {
          vm.apiData = obj.data
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    tableRowStyle({ row, rowIndex }) {
      'height: 80px!important'
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.dashboard-bg-container {
  background: #fff;
  padding: 10px;
  height: 1344px;
}
.maintitle {
  font-weight: bolder;
}
.myadminapp {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.line1div {
  width: 100%;
  height: 390px;
}
.line2div {
  width: 100%;
  height: 390px;
}
.line3div {
  width: 100%;
  height: 390px;;
}
.left {
  float: left;
  width: 30%;
  height: 340px;
  background: white;
}
.right {
  margin-left: 30px;
  float: left;
  width: 65%;
  height: 340px;
  background: white;
}
.leftlabel {
  margin-left: 20px;
  margin-top: 12px;
  height: 40px;
  float: left;
}
.rightlabel {
  float: right;
  height: 40px;
  margin-right: 20px;
}
.admindatepicker {
  float: right;
  height: 40px;
  margin-right: 20px;
  margin-top: 10px;
}
.leftbt {
  float: left;
  width: 30%;
  margin-top: 0px;
  margin-left: 20%;
}
.rightbt {
  width: 30%;
  float: right;
  margin-right: 20%;
}

.adminline {
  margin-top: 40px;
  width: 100%;
  border-bottom: 1px solid #E8E8E8;
}
.admintable {
  margin-top: 20px;
  width: 100%;
  border-bottom: 1px solid #E8E8E8;
}
body .el-table th.gutter{
  display: table-cell!important;
}
// 必须去掉scoped才能生效 ！！！注意！！！
body .eltable th{
  padding: 4px 0!important;
  background: #E8E8E8;
}
body .eltable td{
  padding: 0px 0!important;
}
</style>
