<template >
  <div class="FirePatrolRanking">
    <ContainerBorder title="重庆市防火巡查排行榜">
      <div class="content-list">
        <div class="list-1">
          <FirePatrolList :list="listData"/>
        </div>
        <div class="list-2">
          <FirePatrolList reverse :list="reverseListData"/>
        </div>
      </div>
    </ContainerBorder>
    <ButtonGroup 
      class="custom-btn-group"
      :buttons="buttons"
    />
  </div>
</template>

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

export default {
  name: 'FirePatrolRanking',
  components: {
    ContainerBorder,
    ButtonGroup,
    FirePatrolList
  },
  data() {
    return {
      buttons: [
        {
          name: '当日',
          key: 'today'
        },
        {
          name: '近一周',
          key: 'week'
        },
        {
          name: '近一月',
          key: 'mouth'
        }
      ],
      listData: [
        { address: "渝北区", percent: 89 },
        { address: "渝北区", percent: 79 },
        { address: "渝北区", percent: 72 },
        { address: "渝北区", percent: 71 },
        { address: "渝北区", percent: 68 },
        { address: "渝北区", percent: 55 },
        { address: "渝北区", percent: 36 },
        { address: "渝北区", percent: 36 },
        { address: "渝北区", percent: 36 },
        { address: "渝北区", percent: 36 },
      ],
      reverseListData: []
    }
  },
  created() {
    this.reverseListData =JSON.parse(JSON.stringify(this.listData)).reverse()
  },
  methods: {}
}
</script>

<style scoped lang='less'>
.FirePatrolRanking {
  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>
