<template>
  <div class="combine">
    <m-scroll v-if="list.length > 0" :length="list.length" :limit="$store.state.currentStreetInfo.name === '新江湾城街道' ? 2 : 3">
      <div @click="$emit('select', item)" :class="{detail: true, done: !isDoing}" v-for="item in list" :key="item.id">
        <div>
          <h5>{{item.communityName}}</h5>
          <p v-if="isDoing">{{item.create_time}}</p>
          <p v-else class="name"><span>{{item.receive_property_name}}</span> 完成处置</p>
        </div>
        <div v-if="isDoing" class="content">
          <div>{{$com.transType(item.types) || '暂无分类'}}</div>
          <div :title="item.create_note">事件描述：{{item.create_note || '暂无描述'}}</div>
        </div>
        <div v-else class="content">
          <div>{{$com.transType(item.types) || '暂无分类'}}</div>
          <div>{{item.create_time}}</div>
        </div>
        <m-step v-if="isDoing" 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>
import {mapState} from 'vuex'
export default {
  name: 'Combine',
  data() {
    return {
      steps: [
        {name: '推送'},
        {name: '接收'},
        {name: '处置'},
        {name: '完成'},
      ],
    }
  },
  computed: {
    ...mapState([
      'handleList',
      'curSmartType',
      'handleCurTab',
      'doneList',
    ]),
    isDoing() {
      return this.handleCurTab === '处置中'
    },
    list() {
      if (this.handleCurTab === '已完成') {
        return this.doneList
      }
      if (this.curSmartType) {
        return this.handleList.filter(item => item.types === this.curSmartType)
      }
      return this.handleList
    }
  },
  methods: {
    getCurrent(data) {
      if (data.done_time) {
        return 3
      } else {
        return +data.current || 2
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
.combine
  .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
    &.done
      padding .1rem
    &:hover
      background $section-hover
      box-shadow -0.05rem .01rem .05rem .01rem rgba(0,0,0,0.8)
    h5
      font-size .1rem
    .name
      color #ccc
      font-size .08rem
      >span
        color $edgeColor
        font-size .1rem
        font-weight bold
    >div
      &:first-child
        display flex
        justify-content space-between
      &.content
        display flex
        margin .05rem 0
        >div
          font-size .08rem
          color #ccc
          &:first-child
            color #FF9D27
            border .01rem solid @color
            border-radius .02rem
            padding 0 .05rem
            margin-right .05rem
          &:last-child
            flex 1
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
            text-align right
        // p
        //   &:first-child
        //     color $cardFontColor
        //     font-size .08rem
    .combine-step
      position absolute
      left .1rem
      right .1rem
      bottom 0
      transform translateY(38%)
</style>
