<template>
  <div class="dashboard-editor-container">
    <!--    <div class="bg"></div>-->
    <div class="header" style="text-align: center;font-size: 28px">
      <div class="flex-center m-20">
        <div class="w-40">
          <span v-if="roles[0] === '1'">管理员概览</span>
          <div v-if="roles[0] === '2'" class="mb-20">数据海洋中的灯塔</div>
          <span v-if="roles[0] === '3'">VIP开发者概览</span>
          <el-input
            v-model="keyword"
            size="medium"
            class="h-30 mt-20"
            suffix-icon="el-icon-search"
            placeholder="请输入API名称"
            @keyup.enter.native="handleSearch"/>
        </div>
      </div>
    </div>
    <div class="editorline1div">
      <iframe ref="iframe" :src="iframeUrl" width="100%" height="100%" frameborder="0"/>
      <!--      <div class="left">-->
      <!--        <div class="leftlabel">-->
      <!--          <span>应用</span>-->
      <!--        </div>-->
      <!--        <div class="adminline"/>-->
      <!--        <div class="myapp">-->
      <!--          <div style="margin-bottom: 20px;text-align: center;margin-top: 45px">-->
      <!--            <p>已创建应用:</p>-->
      <!--            <p><span style="color: blue"> {{ appNum }} </span>个</p>-->
      <!--            <div v-if="roles[0] === '1'">-->
      <!--              <p>近1月新增应用:<span style="color: blue"> {{ appRecentNum }} </span>个</p>-->
      <!--            </div>-->
      <!--            <div v-if="roles[0] !== '1'">-->
      <!--              <router-link :to="{path:'/devapp/mngr',query:{addFormVisible:false}}"><el-button type="primary" style="margin-top: 15px">管理应用</el-button></router-link>-->
      <!--              <p/>-->
      <!--              <router-link :to="{path:'/devapp/mngr',query:{addFormVisible:true}}"><el-button type="primary" style="margin-top: 15px" >创建应用</el-button></router-link>-->
      <!--            </div>-->
      <!--            <div v-if="roles[0] === '1'">-->
      <!--              <router-link to="/appmngr/applist"><el-button type="primary" style="margin-top: 15px">管理应用</el-button></router-link>-->
      <!--              <p/>-->
      <!--              &lt;!&ndash;router-link :to="{path:'/devapp/mngr',query:{addFormVisible:true}}"><el-button :disabled="true" type="primary" style="margin-top: 15px" >创建应用</el-button></router-link&ndash;&gt;-->
      <!--            </div>-->

      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div v-if="roles[0] === '1'" class="middlediv">-->
      <!--        <span>开发者</span>-->
      <!--        <div class="myapp">-->
      <!--          <div style="margin-bottom: 20px;text-align: center;margin-top: 35px">-->
      <!--            <p>全部账户:<span style="color: blue"> {{ totalDeveloperNum }} </span>个</p>-->
      <!--            <p>活跃账户:<span style="color: blue"> {{ activeDeveloperNum }} </span>个</p>-->
      <!--            <p>异常账户:<span style="color: blue"> {{ abnormalDeveloperNum }} </span>个</p>-->
      <!--            <p>预警账户:<span style="color: blue"> {{ alarmDeveloperNum }} </span>个</p>-->
      <!--            <router-link to="/developermngr/devlist"><el-button type="primary" style="margin-top: 10px">管理开发者</el-button></router-link>-->
      <!--            <p/>-->

      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="right">-->
      <!--        <div class="leftlabel">-->
      <!--          <span>用量</span>-->
      <!--        </div>-->
      <!--        <div class="mydatepicker">-->
      <!--          <el-select v-if="roles[0] === '1'" v-model="selectedId" filterable placeholder="请选择开发者" clearable @change="searchAll">-->
      <!--            <el-option-->
      <!--              v-for="item in users"-->
      <!--              :key="item.id"-->
      <!--              :label="item.name"-->
      <!--              :value="item.id"-->
      <!--            />-->
      <!--          </el-select>-->
      <!--          <span>请选择时间段</span>-->
      <!--          <el-date-picker-->
      <!--            v-model="logTime"-->
      <!--            :picker-options="pickerOptions"-->
      <!--            type="daterange"-->
      <!--            size="mini"-->
      <!--            range-separator="-"-->
      <!--            start-placeholder="开始日期"-->
      <!--            end-placeholder="结束日期"-->
      <!--            align="right"-->
      <!--            @change="btn_search"-->
      <!--          />-->
      <!--        </div>-->
      <!--        <p/>-->

      <!--        <el-table-->
      <!--          ref="multipleTable"-->
      <!--          :data="tableData"-->
      <!--          :highlight-current-row="true"-->
      <!--          max-height="250"-->
      <!--          class="eltable"-->
      <!--          border>-->
      <!--          <el-table-column-->
      <!--            prop="apiName"-->
      <!--            label="API"/>-->
      <!--          <el-table-column-->
      <!--            prop="total"-->
      <!--            label="总调用量"/>-->
      <!--          <el-table-column-->
      <!--            prop="failCount"-->
      <!--            label="调用失败"/>-->
      <!--          <el-table-column-->
      <!--            :formatter="formatFailRate"-->
      <!--            prop="failCount"-->
      <!--            label="失败率"/>-->
      <!--          <el-table-column-->
      <!--            fixed="right"-->
      <!--            label="详细统计">-->
      <!--            <template slot-scope="scope">-->
      <!--              <router-link :to="{path:'/devappreport/appreport',query:{apiId:scope.row.apiId, userId: selectedId}}"><el-button type="text">查看</el-button></router-link>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--        </el-table>-->
      <!--      </div>-->
    </div>
    <p/>
    <!--    <div class="lin2div">-->
    <!--      <div class="leftlabel">-->
    <!--        <span>可用服务列表</span>-->
    <!--      </div>-->
    <!--      <el-table-->
    <!--        ref="multipleTable"-->
    <!--        :data="serviceTableData"-->
    <!--        :highlight-current-row="true"-->
    <!--        class="eltable"-->
    <!--        border>-->
    <!--        <el-table-column-->
    <!--          prop="apiName"-->
    <!--          label="API"/>-->
    <!--        <el-table-column-->
    <!--          prop="callLimit"-->
    <!--          label="调用量限制"/>-->
    <!--        <el-table-column-->
    <!--          prop="qpsLimit"-->
    <!--          label="QPS限制"/>-->
    <!--          &lt;!&ndash;el-table-column-->
    <!--          fixed="right"-->
    <!--          label="QPS购买">-->
    <!--          <template slot-scope="scope">-->
    <!--            <el-button v-if="roles[0] !== '1'" type="text" @click="buyQps(scope.row)">立即购买</el-button>-->
    <!--            <el-button type="text" @click="showDetail(scope.row)">配额详情</el-button>-->
    <!--          </template>-->
    <!--        </el-table-column&ndash;&gt;-->
    <!--      </el-table>-->
    <!--    </div>-->
    <!--    <div style="margin-bottom: 20px">-->
    <!--      <p/>-->
    <!--    </div>-->
    <el-dialog :visible.sync="buyDialogVisible" title="购买接口属性">
      <el-form :model="buyForm">
        <el-form-item :label-width="formLabelWidth" label="应用名称">
          <el-input v-model="buyForm.name" placeholder="请输入应用名称"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="备注">
          <el-input
            v-model="buyForm.description"
            type="textarea"
            show-word-limit
            maxlength="100"
            placeholder="请输入备注，最长100字"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!--el-button @click="btnUpdateCancel">取 消</el-button>
        <el-button type="primary" @click="btnUpdateSubmit">确 定</el-button-->
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import axios from 'axios'
import moment from 'moment'

export default {
  name: 'DashboardEditor',
  data() {
    return {
      iframeUrl: window.iframeUrl,
      keyword: '', // 关键词
      appNum: 0,
      appRecentNum: 0,
      totalDeveloperNum: 0, // 所有开发者数
      activeDeveloperNum: 0, // 活跃开发者
      abnormalDeveloperNum: 0, // 异常开发者数
      alarmDeveloperNum: 0, // 使用报警开发者数
      formLabelWidth: '100px', // 弹出框form宽
      selectedId: '',
      users: [],
      allData: [], // 所有前端分页数据
      tableData: [], // 表格数据 仅展示当前页的数据
      pageNo: 1, // 当前页数
      totalDataNumber: 0, // 总记录数
      pageSize: 100,
      logTime: [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])
            }
          }]
      },
      serviceAllData: [], // 所有前端分页数据
      serviceTableData: [], // 表格数据 仅展示当前页的数据
      servicePageNo: 1, // 当前页数
      serviceTotalDataNumber: 0, // 总记录数
      servicePageSize: 10,
      buyData: [],
      buyDialogVisible: false,
      buyForm: {
        id: '',
        name: '',
        appType: '',
        description: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getdAllAppsCount()
    if (this.roles[0] === '1') {
      this.getdAllUser()
      this.getDeveloperReport()
    }
    this.btn_search()
    this.service_btn_search()
  },
  mounted() {
    const iframe = this.$refs.iframe
    iframe.onload = () => {
      iframe.contentWindow.postMessage({
        'developers': [this.name],
        'developerss': [this.name]
      }, '*')
    }
  },
  methods: {
    btn_search() {
      const vm = this
      var beginTime = ''
      var endTime = ''
      if (this.logTime[0] !== undefined && this.logTime[0] !== '') {
        beginTime = moment(this.logTime[0]).format('YYYY-MM-DD')
      }
      if (this.logTime[1] !== undefined && this.logTime[1] !== '') {
        endTime = moment(this.logTime[1]).format('YYYY-MM-DD')
      }
      axios.get(process.env.BASE_API + '/apilog/generalcount', {
        params: {
          beginDate: beginTime,
          endDate: endTime,
          selectedId: this.selectedId
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.totalDataNumber = 0
          vm.allData = []
          vm.tableData = []
        } else {
          // console.log(obj.data)
          vm.totalDataNumber = parseInt(obj.total)
          if (vm.totalDataNumber > 0) {
            vm.allData = obj.data
            vm.tableData = obj.data.slice(0, vm.pageSize)
          } else {
            vm.allData = []
            vm.tableData = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    btn_clear() {
      this.tag = ''
      this.btn_search()
    },
    handleCurrentChange() {
      this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    formatFailRate(ob) {
      const number = ob.failCount / ob.total
      let str = Number(number * 100).toFixed(2)
      str += '%'
      return str
    },
    getdAllUser() {
      var vm = this
      axios.get(process.env.BASE_API + '/user/listdevelopers', {
        params: {}
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.users = []
        } else {
          vm.users = obj.data
          vm.totalDeveloperNum = obj.total
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    getdAllAppsCount() {
      var vm = this
      axios.get(process.env.BASE_API + '/app/listcount', {
        params: {
          selectedId: this.selectedId
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.appNum = 0
          vm.appRecentNum = 0
        } else {
          vm.appNum = obj.total
          vm.appRecentNum = obj.recentCount
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    getDeveloperReport() {
      var vm = this
      axios.get(process.env.BASE_API + '/user/developercount', {
        params: {
          selectedId: this.selectedId
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.abnormalDeveloperNum = 0
          vm.activeDeveloperNum = 0
          vm.alarmDeveloperNum = 0
        } else {
          vm.abnormalDeveloperNum = obj.abnormalDeveloperNum
          vm.activeDeveloperNum = obj.activeDeveloperNum
          vm.alarmDeveloperNum = obj.alarmDeveloperNum
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    searchAll() {
      this.btn_search()
      this.getdAllAppsCount()
      this.service_btn_search()
    },
    service_btn_search() {
      const vm = this
      axios.get(process.env.BASE_API + '/appapi/listservice', {
        params: {
          selectedId: this.selectedId
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.serviceTotalDataNumber = 0
          vm.serviceAllData = []
          vm.serviceTableData = []
        } else {
          vm.serviceTotalDataNumber = parseInt(obj.total)
          if (vm.serviceTotalDataNumber > 0) {
            vm.serviceAllData = obj.data
            vm.serviceTableData = obj.data.slice(0, vm.pageSize)
          } else {
            vm.serviceAllData = []
            vm.serviceTableData = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    buyQps(row) {
      this.buyData = row
      console.log(this.buyData.apiId)
      console.log(this.buyData.apiName)
    },
    handleSearch() {
      this.$router.push({
        path: '/apilist/apilist',
        query: {
          tag: this.keyword
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.leftdiv {
  float: left;
  width: 25%;
  height: 300px;
}

.middlediv {
  float: left;
  margin-left: 30px;
  height: 300px;
  width: 15%;
}

.rightdiv {
  margin-left: 30px;
  float: left;
  width: 60%;
}

.updiv {
  height: 300px;
}

.downdiv {
  height: 500px;
}

.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.editorline1div {
  margin-top: 0;
  width: 100%;
  height: 1344px;
}

.lin2div {
  background: white;
  width: 92%;
  height: 360px;
}

.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;
}

.adminline {
  margin-top: 40px;
  width: 100%;
  border-bottom: 1px solid #E8E8E8;
}

.mydatepicker {
  float: right;
  height: 40px;
  margin-right: 20px;
  margin-top: 10px;
}

.dashboard-editor-container {
  background: #E8E8E8;
  min-height: 100vh;

  /deep/ .el-input--medium .el-input__inner {
    height: 40px;
    line-height: 40px;
  }

  .header {
    z-index: 100;
    padding-top: 70px;
    background-image: url("https://axhub.im/ax9/bd9cc28363890916/images/%E6%95%B0%E6%8D%AE%E5%9C%B0%E5%9B%BE%E9%A6%96%E9%A1%B51/u2.png");
    background-size: 100%;
    height: 251px;
    color: #ffffff;
  }

  .bg {
    background-image: url("https://axhub.im/ax9/bd9cc28363890916/images/%E6%95%B0%E6%8D%AE%E5%9C%B0%E5%9B%BE%E9%A6%96%E9%A1%B51/u2.png");
    height: 301px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-size: 100%;
  }

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }

  // 必须去掉scoped才能生效 ！！！注意！！！
  body .eltable th {
    padding: 4px 0 !important;
    color: lightgray !important;
  }

  body .eltable td {
    padding: 0px 0 !important;
  }
}
</style>
