<template >
  <div style="color: #fff;">
    <!-- 按钮组 -->
    <ButtonGroup :buttons="buttons" @click="onClickHander" />
    <!-- 隐患处理排行榜 -->
    <div class="row header">
      <span class="idx">排名</span>
      <span class="address">区县</span>
      <span class="warning_count">预警数量</span>
      <span class="process_warning_count">已处理预警</span>
      <span class="percent">处理率</span>
    </div>
    <div>
      <vue-seamless-scroll
        :data="listData"
        :class-option="classOption"
        class="warp"
      >
        <ul class="item">
          <li class="row" v-for="(item, index) in listData" :key="index">
            <span class="idx" v-text="toIdx(index + 1)"></span>
            <span class="address" v-text="item.address"></span>
            <span class="warning_count" v-text="item.warningCount"></span>
            <span class="process_warning_count" v-text="item.processedCount"></span>
            <span class="percent" v-text="item.percent"></span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import {ButtonGroup} from '@/components'
import VueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'HiddenDangerHandlingList',
  components: {
    ButtonGroup,
    VueSeamlessScroll
  },
  data() {
    return {
      
      // 按钮组数据
      buttons: [
        {
          name: '当日',
          key: 'today'
        },
        {
          name: '近一周',
          key: 'week'
        },
        {
          name: '近一月',
          key: 'mouth'
        }
      ],
      listData: [
        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
      ],
      classOption: {
        singleHeight: 30
      }
    }
  },
  methods: {
    onClickHander: (data) => {
      console.log('切换隐患处理', data)
    },
    toIdx(index) {
      return index < 10 ? `0${index}`: index
    }
  }
}
</script>

<style scoped lang='less'>

.header {
  color: #73CCE2;
}

.row,li,a {
  display: block;
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  span {
    text-align: center;
    font-size: 12px;
    flex: 1;
  }
}

.warp {
  height: 150px;
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }
}
</style>
