<template >
  <div>
    <!-- 隐患处理排行榜 -->
    <div class="row header">
      <span class="idx">排名</span>
      <span class="address">地区</span>
      <span class="progress_bar"></span>
      <span class="percent">合格率</span>
    </div>
    <div>
      <vue-seamless-scroll
        :data="list"
        :class-option="classOption"
        class="warp"
      >
        <ul class="item">
          <li class="row" v-for="(item, index) in list" :key="index">
            <span class="idx">
              <SortIndex :idx="reverse ? list.length - index :  index + 1"/>
            </span>
            <span class="address" v-text="item.address"></span>
            <span class="progress_bar">
              <ProgressBar :value="item.percent"/>
            </span>
            <span class="percent" >{{item.percent}}%</span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import VueSeamlessScroll from 'vue-seamless-scroll'
import SortIndex from '../../components/SortIndex'

const ProgressBar = {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  render(h) {
    return h('div', { class: 'progress-bar' }, [
      h('div', { class: 'progress-bar-inner' }, [
        h('div', { class: 'progress-bar-inner-inner', style: `width: ${this.value}%` })
      ])
    ])
  }
}

export default {
  name: 'FirePatrolList',
  components: {
    VueSeamlessScroll,
    ProgressBar,
    SortIndex
  },
  props: {
    reverse: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    }
  },  
  data() {
    return {
      classOption: {
        singleHeight: 30
      }
    }
  },
  methods: {}
}
</script>

<style scoped lang='less'>

.header {
  color: #73CCE2;
}

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

  .address {

    flex: .3;
  }

  .progress_bar {

    flex: 1;
  }

  .percent {

    flex: .3;
  }
}

.warp {
  height: 210px;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }
}

/deep/ .progress-bar {
  border: 1px solid #027F9B;
  padding: 1px;
  width: 100%;
  background-color: #07133D;
  .progress-bar-inner {
    height: 100%;
    background-color: #07133D;
    .progress-bar-inner-inner {
      height: 100%;
      background-color: #00EAFF;
      height: 4px;
      width: 0%;
    }
  }
}
</style>
