<template>
  <div class="handle">
    <m-scroll :length="$store.state.handleList.length" :limit="2" mode="2" :step="12">
      <div class="card" v-for="(data,i) in $store.state.handleList" :key="i">
        <div class="title">
          <p>{{data.title}}</p>
          <div class="line"></div>
          <p>{{data.address}}</p>
        </div>
        <div class="body">
          <div>
            <p>协同事项</p>
            <p>{{data.matter}}</p>
          </div>
          <div>
            <p>发现方式</p>
            <p>{{data.style}}</p>
          </div>
          <div>
            <p>接受部门</p>
            <p>{{data.department}}</p>
          </div>
          <div>
            <p>推送时间</p>
            <p>{{data.sendTime}}</p>
          </div>
        </div>
        <div class="foot">
          <m-step
            :steps="data.step"
            :current="[data.current, true]"
          />
        </div>
      </div>
    </m-scroll>
  </div>
</template>

<script>
export default {
  name: 'handle',
}
</script>

<style lang="stylus" scoped>
.handle
  width 100%
  height 100%
  .card
    padding-bottom 1rem
    height 12rem
    .title
      display flex
      align-items center
      justify-content space-between
      .line
        height 0.1rem
        background-color #094981
        flex 1
        margin 0 0.7rem
      p
        font-size 1rem
        color #ffffff
        font-weight 700
        &:last-child
          color $fontColor
          font-size 0.8rem
    .body
      display flex
      align-items center
      justify-content space-between
      div
        flex 1
        font-size .5rem
        margin 1rem 0
        p
          padding-top 0.2rem
          padding-right 0.5rem
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
          color $fontColor
          font-size 0.9rem
          &:last-child
            color $edgeColor
            font-size .9rem
</style>
