<template>
  <div class="handle">
    <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"
        />
      </div>
    </div>
  </div>
</template>

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

<style lang="stylus" scoped>
.handle
  width 100%
  height 100%
  .card
    padding-bottom 1rem
    .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.6rem
    .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.6rem
          &:last-child
            color $edgeColor
            font-size .9rem
</style>
