<template>
  <div class="grid-manage">
    <m-sub title="网格事件清单" />
    <div class="info">
      <div v-for="item in info" :key="item.name">
        <p>{{item.name}}</p>
        <p><m-count class="count" :value="item.value" /></p>
      </div>
    </div>
    <div class="list">
      <m-scroll :length="list.length" mode="2" :limit="3" :step="0.9">
        <div class="item" @click="$emit('select', item)" v-for="(item, i) in list" :key="i">
          <div class="title">
            <p>{{item.event}}</p>
            <span class="line" />
            <!-- <p>{{item.event}}</p> -->
          </div>
          <div class="info">
            <p :title="item.address">{{item.address}}</p>
            <p>{{item.time}}</p>
          </div>
          <m-step :steps="steps" :current="item.current"/>
        </div>
      </m-scroll>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GridManage',
  data() {
    return {
      steps: [
        {name: '发现'},
        {name: '立案'},
        {name: '派遣'},
        {name: '处置'},
        {name: '核查'},
        {name: '结案'}
      ],
      info: [
        {name: '今日总数', value: 40},
        {name: '综合管理', value: 47},
        {name: '街面管理', value: 21},
        {name: '小区管理', value: 31},
      ],
    }
  },
  computed: {
    list() {
      return this.$store.state.gridList
    }
  },
}
</script>

<style lang="stylus" scoped>
.grid-manage
  width 100%
  height 100%
  .info
    width 100%
    display flex
    justify-content space-between
    margin-bottom .1rem
    >div
      p
        color $fontColor
        .count
          color $color-yellow
          font-size .14rem
          padding-left .05rem
  .list
    .item
      background rgba(4,27,55,.3)
      border .01rem solid rgba(0,118,255,.5)
      padding .05rem .08rem
      height .8rem
      margin-bottom .1rem
      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)
      .title
        display flex
        align-items center
        font-size .12rem
        p
          &:last-child
            font-size .1rem
            color $edgeColor
        .line
          flex 1
          margin 0 .1rem
      .info
        display flex
        align-items center
        font-size .09rem
        color $cardFontColor
        margin-bottom .05rem
        >p
          max-width 50%
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
</style>
