<template>
  <div class="handle">
    <template v-if="$store.state.curRepair">
      <m-scroll :length="repairHandle.length" :limit="2" mode="2" :step="5.5" :duration="1500">
        <div class="card repair" v-for="(data,i) in repairHandle" :key="i" @click="$emit('repair-select', data)">
          <div class="communityName">
            <p>临沂二村</p>
            <div class="line"></div>
            <p>{{data.address}}</p>
          </div>
          <div class="content">
            <div class="info">
              <div>
                <p>协同事项</p>
                <p>{{data.troubleType || '暂无分类'}}</p>
              </div>
              <div>
                <p>发现方式</p>
                <p>投诉报修</p>
              </div>
              <div>
                <p>响应部门</p>
                <p>南码头街道房办</p>
              </div>
              <div>
                <p>反映问题</p>
                <p :title="data.reportContent">{{data.reportContent}}</p>
              </div>
              <div>
                <p>状态</p>
                <p>{{data.status}}</p>
              </div>
            </div>
          </div>
        </div>
      </m-scroll>
    </template>
    <template v-else-if="list && list.length > 0">
      <m-scroll :length="list.length" :limit="2" mode="2" :step="5.5" :duration="1500">
        <div class="card" v-for="(data,i) in list" :key="i" @click="$emit('select', data)">
          <div class="communityName">
            <p>{{data.communityName}}</p>
            <div class="line"></div>
            <p>{{data.communityAddr}}</p>
          </div>
          <div class="content">
            <div class="info">
              <div>
                <p>协同事项</p>
                <p>{{data.matter || $com.getSensorScene(data.types) || '暂无分类'}}</p>
              </div>
              <div>
                <p>发现方式</p>
                <p>{{data.check_type || '智能发现'}}</p>
              </div>
              <div>
                <p>响应部门</p>
                <p>{{data.cspName}}</p>
              </div>
              <div>
                <p>发现时间</p>
                <p>{{data.check_time}}</p>
              </div>
            </div>
            <div class="step">
              <m-step
                :steps="steps"
                :current="getCurrent(data)"
              />
            </div>
          </div>
        </div>
      </m-scroll>
    </template>
    <p v-else style="text-align:center;margin: 1rem 0"> —— 暂无处置流程 ——</p>
  </div>
</template>

<script>
export default {
  name: 'handle',
  data() {
    return {
      steps: [
        {
          name:'推送',
        },
        {
          name:'接收',
        },
        {
          name:'处置',
        },
        {
          name:'完成'
        }
      ]
    }
  },
  methods: {
    getCurrent(data) {
      if (data.done_time) {
        return [3, false]
      } else {
        return [data.current || 2, false]
      }
    },
  },
  computed: {
    list() {
      const beforeDay = this.$moment().subtract(1, 'days').format('YYYY-MM-DD')
      let result = []
      if (this.$route.name == 'main') {
        const mock = [
          // {
          //   communityName:'（补）教师大楼',
          //   communityAddr:'东方路3391弄',
          //   matter:'占用消防通道' ,
          //   check_type:'智能发现',
          //   cspName:'上海霞悦物业',
          //   device_name: '暂无',
          //   create_time:beforeDay + ' 18:30:30',
          //   check_time:beforeDay + ' 18:30:30',
          //   receive_time:beforeDay + ' 18:45:30',
          //   done_time: null,
          //   current:2,
          // },
          {
            communityName:'（补）临沂二村',
            communityAddr:'浦三路12弄',
            matter:'违规充电' ,
            check_type:'投诉发现',
            cspName:'上海振南物业',
            device_name: '暂无',
            create_time:beforeDay + ' 12:30:30',
            check_time:beforeDay + ' 12:30:30',
            receive_time:beforeDay + ' 12:45:30',
            done_time: null,
            current:2,
          },
          {
            communityName:'（补）金田公寓',
            communityAddr:'南码头路160弄',
            matter:'毁绿占绿' ,
            check_type:'投诉发现',
            cspName:'城管部门',
            device_name: '暂无',
            create_time:beforeDay + ' 10:16:30',
            check_time:beforeDay + ' 10:16:30',
            receive_time:beforeDay + ' 10:37:10',
            done_time: null,
            current:2
          },
          {
            communityName:'（补）临沂五村',
            communityAddr:'临沂路381弄',
            matter:'垃圾分类违规' ,
            check_type:'巡查发现',
            cspName:'居委会',
            current:3,
            device_name: '暂无',
            create_time:beforeDay + ' 10:16:30',
            check_time:beforeDay + ' 10:16:30',
            receive_time:beforeDay + ' 10:37:10',
            done_time: beforeDay + ' 12:37:10',
          },
          {
            communityName:'（补）东盛公寓',
            communityAddr:'浦三路821弄',
            matter:'停车矛盾' ,
            check_type:'投诉发现',
            cspName:'上海创特物业',
            current:2,
            device_name: '暂无',
            create_time:beforeDay + ' 10:16:30',
            check_time:beforeDay + ' 10:16:30',
            receive_time:beforeDay + ' 10:37:10',
            done_time: null,
          },
          // {
          //   communityName:'（补）华南名苑',
          //   communityAddr:'浦东南路3666弄',
          //   matter:'违规充电' ,
          //   check_type:'智能发现',
          //   cspName:'上海证大物业',
          //   device_name: '暂无',
          //   create_time:beforeDay + ' 10:16:30',
          //   check_time:beforeDay + ' 10:16:30',
          //   receive_time:beforeDay + ' 10:37:10',
          //   done_time: null,
          //   current:2
          // },
          {
            communityName:'（补）明丰佳园',
            communityAddr:'东方路2851弄',
            matter:'噪音扰民' ,
            check_type:'投诉发现',
            cspName:'上海名东物业',
            device_name: '暂无',
            create_time:beforeDay + ' 10:16:30',
            check_time:beforeDay + ' 10:16:30',
            receive_time:beforeDay + ' 10:37:10',
            done_time: null,
            current:2
          },
        ]
        result = [...this.$store.state.handleList, ...mock]
      } else {
        const mock = [
          {
            communityName:'（补）临沂二村',
            communityAddr:'浦三路12弄',
            matter:'垃圾未及时清运' ,
            check_type:'巡查发现',
            cspName:'上海振南物业',
            device_name: '暂无',
            create_time:beforeDay + ' 12:16:30',
            check_time:beforeDay + ' 12:16:30',
            receive_time:beforeDay + ' 13:37:10',
            done_time: null,
            current:2,
          },
        ]
        result = [...this.$store.state.handleList, ...mock]
      }
      if (this.curScene) {
        if (this.curScene == 'all') {
          return result
        }
        return result.filter(item => item.types && (item.types == this.curScene))
      }
      return result
    },
    curScene() {
      return this.$store.state.curScene
    },
    repairHandle() {
      return this.$store.state.repairHandle
    }
  }
}
</script>

<style lang="stylus" scoped>
.handle
  width 100%
  height 100%
  .card
    height 5.5rem
    cursor pointer
    &.repair
      .info
        width 100% !important
        div
          &:nth-child(4)
            max-width 50%
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
    &:hover
      background rgba(0,0,0,0.3)
    .communityName
      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 1rem
    .content
      display flex
      align-items center
      .info
        width 65%
        overflow hidden
        div
          display inline-block
          margin-right .5rem
          p
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            color $color-blue
            font-size 1rem
            &:last-child
              color #eee
      .step
        flex 1
        transform translateY(30%)
</style>
