<template>
  <div class="combine">
    <m-scroll v-if="list.length > 0" :length="list.length" :limit="2">
      <div @click="$emit('select', item)" class="detail" v-for="item in list" :key="item.id">
        <div>
          <h5>{{item.communityName}}</h5>
          <p>{{item.create_time}}</p>
        </div>
        <div class="content">
          <div>
            <p>协同事项</p>
            <p>{{$com.transType(item.types) || '暂无分类'}}</p>
          </div>
          <div>
            <p>发现方式</p>
            <p>{{item.check_type || '智能发现'}}</p>
          </div>
          <div>
            <p>响应部门</p>
            <p>{{item.cspName || item.receive_property_name}}</p>
          </div>
        </div>
        <m-step class="combine-step" :steps="steps" :current="getCurrent(item)" />
      </div>
    </m-scroll>
    <div v-else class="no-data">
      <img src="@/assets/images/building.png" />
      <p>— 暂无数据 —</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Combine',
  data() {
    return {
      steps: [
        {name: '推送'},
        {name: '接收'},
        {name: '处置'},
        {name: '完成'},
      ],
    }
  },
  computed: {
    list() {
      const {handleList} = this.$store.state
      return handleList
    }
  },
  methods: {
    getCurrent(data) {
      if (data.done_time) {
        return 3
      } else {
        return +data.current || 2
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
.combine
  // .no-data
  //   width 100%
  //   height 100%
  //   $flex-center()
  .no-data
      $flex-center()
      flex-direction column
      width 100%
      height 100%
      color #999
      img
        width .35rem
        height @width
  .detail
    background $section-bg
    padding .05rem .1rem .2rem
    margin-bottom .1rem
    position relative
    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)
    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>
