<template >
  <div class="EquipmentMaintenanceRanking">
    <ContainerBorder title="重庆市设备维保排行榜">
      <div class="content-list">
        <div class="list-1">
          <EquipmentMaintenanceList :list="listData"/>
        </div>
        <div class="list-2">
          <EquipmentMaintenanceList reverse :list="listData"/>
        </div>
      </div>
    </ContainerBorder>
    <ButtonGroup 
      class="custom-btn-group"
      :buttons="buttons"
    />
  </div>
</template>

<script>
import { ContainerBorder } from '@/components'
import {ButtonGroup} from '@/components'
import EquipmentMaintenanceList from './EquipmentMaintenanceList.vue'

export default {
  name: 'EquipmentMaintenanceRanking',
  components: {
    ContainerBorder,
    ButtonGroup,
    EquipmentMaintenanceList
  },
  data() {
    return {
      buttons: [
        {
          name: '当日',
          key: 'today'
        },
        {
          name: '近一周',
          key: 'week'
        },
        {
          name: '近一月',
          key: 'mouth'
        }
      ],
      listData: [
        {
          address: '渝北区',
          allCount: 4568,
          normalCount: 3456,
          abnormalCount: 1234,
          percent: 80
        },
        {
          address: '渝北区',
          allCount: 4568,
          normalCount: 3456,
          abnormalCount: 1234,
          percent: 80
        },
        {
          address: '渝北区',
          allCount: 4568,
          normalCount: 3456,
          abnormalCount: 1234,
          percent: 80
        },
        {
          address: '渝北区',
          allCount: 4568,
          normalCount: 3456,
          abnormalCount: 1234,
          percent: 80
        },
        {
          address: '渝北区',
          allCount: 4568,
          normalCount: 3456,
          abnormalCount: 1234,
          percent: 80
        },
        {
          address: '渝北区',
          allCount: 4568,
          normalCount: 3456,
          abnormalCount: 1234,
          percent: 80
        },
        {
          address: '渝北区',
          allCount: 4568,
          normalCount: 3456,
          abnormalCount: 1234,
          percent: 80
        }
      ]
    }
  },
  methods: {}
}
</script>

<style scoped lang='less'>
.EquipmentMaintenanceRanking {
  position: relative;
  width: 937px;
  height: 342px;
  background: url('@/assets/images/main-bottom-bg.png') no-repeat;
  background-size: 100% 100%;
  
  .custom-btn-group {
    position: absolute;
    top: 20px;
    right: 0;
  }

  .content-list {
    display: flex;
    justify-content: space-between;
    div {
      flex: 1;
    }
    .list-1 {
      border-right: 1px solid #192A66;
      padding-right: 40px;
    }
    .list-2 {
      padding-left: 40px;
    }
    
  }
}
</style>
