<template>
  <div class="ranking-c">
    <div class="c-title flex-center">
      <span>积分排行榜</span>
      <el-radio-group size="mini" v-model="current" @change="getList">
        <el-radio-button label="红榜"></el-radio-button>
        <el-radio-button label="黑榜"></el-radio-button>
      </el-radio-group>
    </div>
    <el-table
      :v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 8px"
      height="100%"
    >
      <el-table-column prop="rankNum" label="排名" width="80" align="center">
        <template slot-scope="scope">
          <img
            class="icon-box"
            v-if="scope.$index < 3"
            :src="iconMap[`no${scope.$index + 1}`]"
          />
          <span v-else> {{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="单位" align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="工作负责人"
        align="center"
        v-if="current == '红榜'"
      >
      </el-table-column>
      <el-table-column prop="name" label="作业人员" align="center" v-else>
      </el-table-column>
      <el-table-column prop="address" label="得分" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import no1 from "@/assets/images/名次-第1名.png";
import no2 from "@/assets/images/名次-第2名.png";
import no3 from "@/assets/images/名次-第3名.png";
export default {
  data() {
    return {
      iconMap: {
        no1,
        no2,
        no3,
      },
      loading: false,
      current: "红榜",
      tableData: [
        {
          date: "1",
          name: "王小虎",
          address: "1212",
        },
        {
          date: "2",
          name: "王小虎",
          address: "12",
        },
        {
          date: "3",
          name: "王小虎",
          address: "12",
        },
        {
          date: "4",
          name: "王小虎",
          address: "23",
        },
      ],
    };
  },
  methods: {
    getList() {
      this.loading = true;
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.c-title {
  border-left: 4px solid rgb(64, 158, 255);
  padding-left: 10px;
  color: #fff;
}
.ranking-c {
  height: 100%;
}
::v-deep {
  .el-table tr {
    background-color: transparent !important;
  }
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon-box {
  width: 23px;
  height: 23px;
}
</style>
