<template>
    <div class="main-wrapper">
                <div class="row">
                  
                  <div class="col-md-6 col-xl-3">
                    <div class="card stat-widget">
                        <div class="card-body"  v-if="isLoaded">
                            <h5 class="card-title">订单</h5>
                              <h2>{{ systemInfo.orderCount }}</h2>
                              <p>系统订单总数</p>
                              <div class="progress">
                                <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                        </div>
                    </div>
                  </div>
                  <div class="col-md-6 col-xl-3">
                    <div class="card stat-widget">
                        <div class="card-body"  v-if="isLoaded">
                            <h5 class="card-title">用户</h5>
                              <h2>{{ systemInfo.userCount }}</h2>
                              <p>系统用户数</p>
                              <div class="progress">
                                <div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                        </div>
                    </div>
                  </div>
                  <div class="col-md-6 col-xl-3">
                    <div class="card stat-widget">
                        <div class="card-body"   v-if="isLoaded">
                            <h5 class="card-title">API调用</h5>
                              <h2>{{ systemInfo.callCount }}</h2>
                              <p>API调用总次数</p>
                              <div class="progress">
                                <div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                        </div>
                    </div>
                  </div>
                  <div class="col-md-6 col-xl-3">
                    <div class="card stat-widget">
                        <div class="card-body"   v-if="isLoaded">
                            <h5 class="card-title">金额</h5>
                              <h2>{{ systemInfo.money }}</h2>
                              <p>统计金额</p>
                              <div class="progress">
                                <div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                        </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 col-lg-8">
                      <div class="card table-widget">
                          <div class="card-body" v-if="isLoaded">
                              <h5 class="card-title">新增订单</h5>
                              <div class="table-responsive">
                              <table class="table">
                                <thead>
                                  <tr>
                                    <th scope="col">用户</th>
                                    <th scope="col">类型</th>
                                    <th scope="col">订单号</th>
                                    <th scope="col">金额</th>
                                    <th scope="col">状态</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr v-for="(item,index) in systemInfo.recentOrder" :key="index">
                                    <th scope="row"><img src="../../assets/images/avatars/profile-image.png" alt="">{{ item.user.username }}</th>
                                    <td>{{ orderTypeMap[item.orderType] }}</td>
                                    <td>{{ item.orderNumber }}</td>
                                    <td>￥{{ item.amount }}</td>
                                    <td>
                                      <span class="badge bg-info" v-if="item.status == 0">待支付</span>
                                      <span class="badge bg-success" v-if="item.status == 1">已完成</span>
                                      <span class="badge bg-primary" v-if="item.status == 2">已取消</span>
                                      <span class="badge bg-danger" v-if="item.status == 3">已退款</span>

                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                          </div>
                      </div>
                  </div>
                  
                <div class="col-sm-12 col-md-4">
                  <div class="card stat-widget">
                      <div class="card-body" v-if="isLoaded">
                          <h5 class="card-title">新增用户</h5>
                          <div class="transactions-list" v-for="(item,index) in systemInfo.recentUser" :key="index">
                            <div class="tr-item">
                              <div class="tr-company-name">
                                <div class="tr-icon tr-card-icon tr-card-bg-primary text-primary">
                                  <i data-feather="user"></i>
                                </div>
                                <div class="tr-text">
                                  <a href="#"><h4>{{ item.userName }}</h4></a>
                                  <p>{{ item.email }}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                      </div>
                  </div>
                </div>
              </div>
              <card-loading v-if="!isLoaded"/>
              </div>
</template>

<script>
import CardLoading from '../../components/CardLoading.vue'
import feather from 'feather-icons'
export default {
  components: { CardLoading },
  name:'Dashboard',
  data(){
    return {
      systemInfo:null,
      isLoaded:false,
      orderTypeMap:['购买','充值','退款']
    }
  },
  methods:{
    async getSystemInfo(){
      this.isLoaded = false
      try{
        const res = await this.$api.getSystemInfo()
        if(res.code != 1000){
          this.$alert(res.message,'danger')
          return
        }
        this.systemInfo = res.data
      }catch(e){
        this.$alert('加载数据失败','danger');
      }finally{
        this.isLoaded = true
      }
    }
  },
  async created(){
    await this.getSystemInfo()
    feather.replace()
  }
}
</script>