<template>
  <div class="handle">
    <m-scroll :length="$store.state.handleList.length" :limit="2" mode="2" :step="5.5">
      <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="content">
          <div class="info">
            <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="step">
            <m-step
              :steps="data.step"
              :current="[data.current, false]"
            />
          </div>
        </div>
      </div>
    </m-scroll>
  </div>
</template>

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

<style lang="stylus" scoped>
.handle
  width 100%
  height 100%
  .card
    height 5.5rem
    .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 #3391FF
          font-size 0.8rem
    .content
      display flex
      align-items center
      .info
        width 60%
        overflow hidden
        div
          display inline-block
          margin-right .5rem
          p
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            color #7697FF
            font-size 0.9rem
            &:last-child
              color #A2D7FF
              font-size .9rem
      .step
        flex 1
        transform translateY(30%)
</style>
