<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 v-if="$store.state.patrolList.length > 0" :length="$store.state.patrolList.length" mode="2" :limit="2" :step="0.75">
        <div @click="$emit('select', {...item, key: 'patrol'})" class="info" v-for="(item, i) in $store.state.patrolList" :key="item.communityName+i" :class="{over: item.checkStateName === '逾期' || item.checkStateName.indexOf('未完结') >= 0}">
          <h5>{{item.communityName}}</h5>
          <div>
            <div>
              <p>整改事项</p>
              <p>{{item.orderTypeName}}</p>
            </div>
            <div>
              <p>发现时间</p>
              <p>{{item.checkTime}}</p>
            </div>
            <div>
              <p>上报人</p>
              <p>{{item.checkPersonName}}</p>
            </div>
          </div>
          <img v-if="item.checkStateName === '逾期' || item.checkStateName.indexOf('未完结') >= 0" src="@/assets/images/overtime.png" />
        </div>
      </m-scroll>
      <div v-else class="no-data">
        <img src="@/assets/images/building.png" />
        <p>— 暂无数据 —</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Patrol',
  computed: {
    sum() {
      const {totalOrder, undoneOrder, overdueOrder} = this.$store.state.checkSum
      return [
        {name: '未完结整改单', value: +overdueOrder || 0, unit: '个', img: 'patrol1.png', color: '#ff1e1e'},
        {name: '整改单总数', value: +undoneOrder || 0, unit: '个', img: 'patrol2.png', color: '#fece34'},
        {name: '巡检总数', value: +totalOrder || 0, unit: '次', img: 'patrol3.png', color: '#00beff'},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.patrol
  display flex
  flex-direction column
  .no-data
    $flex-center()
    flex-direction column
    width 100%
    height 100%
    color #999
    img
      width .35rem
      height @width
  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
    .info
      position relative
      border-left .02rem solid $edgeColor
      padding .05rem .18rem .05rem .1rem
      margin-bottom .1rem
      background $section-bg
      height .65rem
      cursor pointer
      transition background .2s, box-shadow .3s ease-in-out
      &:hover
        background $section-hover
        box-shadow -0.05rem .01rem .05rem .01rem rgba(0,0,0,0.8)
      &.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>
