<template>
  <div class="patrol">
    <div class="sum">
      <div v-for="item in sum" :key="item.name">
        <img :src="require(`@/assets/images/${item.img}`)"/>
        <div>
          <p>{{item.name}}</p>
          <p><m-count class="count" :style="`color:${item.color}`" :value="item.value" :decimal="0" /> <span>{{item.unit}}</span></p>
        </div>
      </div>
    </div>
    <div class="detail">
      <m-scroll :length="list.length" mode="2" :limit="2" :step="0.75">
        <div class="info" v-for="(item, i) in list" :key="item.name+i" :class="{over: item.overtime}">
          <h5>{{item.name}}</h5>
          <div>
            <div>
              <p>整改事项</p>
              <p>{{item.event}}</p>
            </div>
            <div>
              <p>发现时间</p>
              <p>{{item.time}}</p>
            </div>
            <div>
              <p>上报人</p>
              <p>{{item.person}}</p>
            </div>
          </div>
          <img v-if="item.overtime" src="@/assets/images/overtime.png" />
        </div>
      </m-scroll>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Patrol',
  data() {
    return {
      sum: [
        {name: '逾期整改单', value: 2, unit: '个', img: 'patrol1.png', color: '#ff1e1e'},
        {name: '整改单总数', value: 28, unit: '个', img: 'patrol2.png', color: '#fece34'},
        {name: '巡检总数', value: 67, unit: '次', img: 'patrol3.png', color: '#00beff'},
      ],
      list: [
        {name: '圣骊河滨苑', event: '整改事项', time: '2020-10-20 13:25:16', person: '上报人', overtime: true},
        {name: '江湾尊宝别墅（公寓）', event: '整改事项', time: '2020-10-20 13:25:16', person: '上报人'},
        {name: '新江湾九里', event: '整改事项', time: '2020-10-20 13:25:16', person: '上报人'},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.patrol
  display flex
  flex-direction column
  h5
    font-size .1rem
  .sum
    display flex
    justify-content space-around
    margin-bottom .05rem
    >div
      display flex
      align-items center
      img
        width .25rem
        height @width
        margin-right .05rem
      p
        color $fontColor
      span
        font-size .08rem
        color #aaa
      .count
        font-size .13rem
  .detail
    flex 1
    overflow-y auto
    .info
      position relative
      border-left .02rem solid $edgeColor
      padding .05rem .18rem .05rem .1rem
      margin-bottom .1rem
      background $section-bg
      height .65rem
      &.over
        border-color #ff6160
      h5
        margin-bottom .05rem
      img
        position absolute
        right 0
        top 0
        width .4rem
        height @width
      >div
        display flex
        justify-content space-between
        p
          &:first-child
            color $cardFontColor
            font-size .08rem
</style>
