<template>
  <div class="app-container" style="padding-top:15px">
    <el-table :data="list" style="width: 100%" border v-loading="listLoading">
      <el-table-column label="排名" type="index" width="50" align="center">
        <template slot-scope="scope">
          <span :style="scope.$index===0?'color:red':scope.$index===1?'color:red':scope.$index===2?'color:red':''">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="乡镇名称">
        <template slot-scope="scope">
          {{ scope.row.townName }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="总办件量">
        <template slot-scope="scope">
          {{ scope.row.allNum }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="已办结量">
        <template slot-scope="scope">
          {{ scope.row.finishNum }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="未办结量">
        <template slot-scope="scope">
          {{ scope.row.notFinishNum }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { townRanking } from "@/api/statisticalData";
export default {
  data() {
    return {
      list: [],
      listLoading: false
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    getDataList() {
      this.listLoading = true;
      townRanking().then(res => {
        this.list = res.d;
        this.listLoading = false;
      });
    }
  }
};
</script>

<style></style>
