<template>
  <div class="combine">
    <m-scroll :length="list.length" :limit="2">
      <div class="detail" v-for="(item, i) in list" :key="item.name + i">
        <div>
          <h5>{{item.name}}</h5>
          <p>{{item.time}}</p>
        </div>
        <div class="content">
          <div>
            <p>协同事项</p>
            <p>{{item.event}}</p>
          </div>
          <div>
            <p>发现方式</p>
            <p>{{item.method}}</p>
          </div>
          <div>
            <p>响应部门</p>
            <p>{{item.department}}</p>
          </div>
        </div>
        <m-step class="combine-step" :steps="steps" :current="item.current" />
      </div>
    </m-scroll>
  </div>
</template>

<script>
export default {
  name: 'Combine',
  data() {
    return {
      steps: [
        {name: '推送'},
        {name: '接收'},
        {name: '处置'},
        {name: '完成'},
      ],
      list: [
        {
          name: '中凯城市之光',
          time: '2020-10-19 12:16:35',
          event: '垃圾未及时清运',
          method: '巡查发现',
          department: '上海振南物业',
          current: 2,
        },
        {
          name: '宝拉维拉家园',
          time: '2020-10-19 12:16:35',
          event: '垃圾未及时清运',
          method: '巡查发现',
          department: '上海振南物业',
          current: 1,
        },
        {
          name: '圣骊河滨苑',
          time: '2020-10-19 12:16:35',
          event: '垃圾未及时清运',
          method: '巡查发现',
          department: '上海振南物业',
          current: 3,
        },
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.combine
  .detail
    background $section-bg
    padding .05rem .1rem .2rem
    margin-bottom .1rem
    position relative
    h5
      font-size .1rem
    >div
      &:first-child
        display flex
        justify-content space-between
      &.content
        display flex
        margin .05rem 0
        justify-content space-between
        p
          &:first-child
            color $cardFontColor
            font-size .08rem
    .combine-step
      position absolute
      left .1rem
      right .1rem
      bottom 0
      transform translateY(38%)
</style>
