<template>
  <div>
     <el-table
          v-loading="loading"
          :data="serviceList"
          border
        >
          <el-table-column
            type="index"
            width="50" label="#">
          </el-table-column>
           </el-table-column>
          <el-table-column label="业务名" prop="name" :show-overflow-tooltip="true"/>
          <el-table-column label="URL" prop="url" :show-overflow-tooltip="true"/>
          <el-table-column label="Total Count" prop="total" :show-overflow-tooltip="true" />
          <el-table-column label="Failure Count" prop="error_rate"/>
          <!-- <el-table-column label="Apdex" prop="apdex" /> -->
          <el-table-column label="Max(ms)" prop="duration_stats" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.duration_stats.max}}</span>
            </template>
          </el-table-column>
          <el-table-column label="Avg(ms)" prop="duration_stats" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.duration_stats.avg}}</span>
            </template>
          </el-table-column>
        </el-table>
  </div>
</template>

<script>
import { listUrlMapping } from '@/api/mapping'
import storage from '@/utils/storage'
export default {
   data(){
    return {
      serviceList:[],
      loading:false,
       queryParams: {
        start_time:0,
        end_time:0,
        app_id:undefined,
        favor:1,
        // pageIndex: 0,
        // pageSize: 200
      },
    }
   },
    watch: {
     '$store.state.time.globalTimes': {
        handler(newValue, oldValue) {
            if(newValue){
              this.queryParams.start_time = newValue.startTime;
              this.queryParams.end_time = newValue.endTime
            }
        },
        immediate: true,
        deep: true
    },
  },
  created() {
    this.appsItem=storage.get('appsItem');
     if(this.appsItem.id!=''||this.appsItem.id!=undefined){
      this.queryParams.app_id=this.appsItem.id;
      this.getList()
    }
  },
  methods:{
    getList() {
      this.loading = true
      listUrlMapping(this.queryParams).then(res => {
          if(res.code == 200){
            this.loading = false;
            this.serviceList= res.data.list;
          }
      })
    },
   }
}
</script>

<style>

</style>