<template>
  <div class="my-handle" v-if="this.lists">
      <div class="handle-select">
          <sgy-mul-select v-model="selected" :label="label" :list="alarmLists"></sgy-mul-select>
      </div>
      <div class="handle">
            <scroll-list @onLoad="onLoad" :loading="loading" :finished="finished">
                <Timeline pending v-for="(item, index) in appendLists" :key="index">
                      <p class="time">{{formatTime(item.rtime || item.ctime )}}</p>
                        <TimelineItem>
                            <p class="content"> <span>{{item.alarmName}}</span>持续 {{secondsToDay(item.duration)}}</p>
                            <p class="content">{{item.staffName}}<i>{{item.note}}</i></p>
                            <div class="attachment" v-for='(item2, index2) in item.attachment' :key='index2'>
                              <p  class="attach" v-if="item2.type=='file'">
                                <a :href="$store.state.baseUrl + item2.url">非图片附件</a></p>
                              <div class="pic" v-if="item2.type=='image'">
                                <img :src="$store.state.baseUrl + item2.url"></div>
                            </div>
                        </TimelineItem>
                </Timeline>
            </scroll-list>
      </div>
  </div>
</template>

<script>
import sgyMulSelect from '../../common/sagacloudMulSelect'
import axios from 'axios'
import ScrollList from '../../common/scrollList'
import { setTimeout } from 'timers'
import {formatTime, secondsToDay} from '../../tools/formatTime.js'
export default {
  components: {
    sgyMulSelect,
    ScrollList
  },

  mixins: [],

  props: {
    objectId: {
      default: String
    }
  },

  data () {
    return {
      formatTime,
      secondsToDay,
      SIZE: 3,
      index: 0,
      label: '筛选报警条目',
      selected: [],
      everyLists: [],
      lists: [
      ],
      appendLists: [], // 显示的list
      loading: false,
      finished: false,
      alarmLists: []
    }
  },

  computed: {
  },
  watch: {
    selected (newVal, oldVal) {
      this.filterList(newVal)
    }
  },
  mounted () {
    this.manualData()
  },

  methods: {
    init () {
      if (this.lists.length && this.lists.length > this.SIZE) {
        this.everyLists = this.lists.slice(0, this.SIZE)
      } else {
        this.everyLists = this.lists
      }
      this.setAlarmLists()
      this.filterList(this.selected)
    },
    setAlarmLists () {
      for (let el in this.everyLists) {
        if (!this.alarmLists.includes(this.everyLists[el].alarmName)) {
          this.alarmLists.push(this.everyLists[el].alarmName)
        }
      }
      this.alarmLists = this.alarmLists.map(el => {
        return {value: el, text: el}
      })
    },
    manualData () {
      let params = {
        objectId: this.objectId
      }
      axios.post(`/alarm-system/alarm-system/alarm/manualHandle/query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          this.lists = Array.from(data.Content)
          this.init()
        }
      })
    },
    onLoad () {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        if (this.everyLists.length >= this.lists.length) {
          this.finished = true
        }
        this.index += 1
        const data = this.lists.slice(this.index * this.SIZE, (this.index + 1) * this.SIZE) || this.lists
        this.everyLists = [...this.everyLists, ...data]
        this.alarmLists = []
        this.setAlarmLists()
        this.filterList(this.selected)
      }, 3000)
    },
    filterList (arr) {
      if (arr && arr.length > 0) {
        this.appendLists = this.everyLists.filter(i => {
          return arr.includes(i.alarmName)
        })
      } else {
        this.appendLists = this.everyLists
      }
    }

  }

}
</script>
<style scoped lang="less" >
.my-handle{
    .handle-select {
        padding: 18px 0 18px 20px;
        height: 70px;
        background: #F4F5F8;
    }
    .handle {
        padding-top: 46px;
        padding-bottom:40px;
        .time {
            font-size: 14px;
            position: absolute;
            transform: translateY(-5px)
        }
        .ivu-timeline-item-content{
          .attachment{
            padding-bottom: 20px;
            font-size: 14px;
            color: #6D747C;
            word-break: break-all;
            display: inline-block;
        }
        .content {
            padding-bottom: 20px;
            font-size: 14px;
            color: #6D747C;
            word-break: break-all;
            width: 500px;
            >span {
                color: #212830;
                font-size: 16px;
                font-weight: bold;
                padding-right: 40px;
            }
            >i {
                color: #232831;
                padding-left: 14px;
            }
        }
        .attach{
            color:#728DEE;
            padding:14px 0;
            cursor: pointer;
        }
        .pic{
            display: inline-block;
            width: 108px;
            height: 108px;
            background: #E9E9E9;
            border-radius: 2px;
            margin-right: 16px;
            >img {
              width: 108px;
              height: 108px;
            }
        }

        }
    }
}
</style>
<style lang="less">
.my-handle{
  .ivu-timeline-item:last-child .ivu-timeline-item-tail{
    display: inline-block;
  }
  .ivu-timeline {
    padding-left: 30%;
  }
  .ivu-timeline-item {
    left: 140px;
    display: inline-block;
  }
  .ivu-timeline-item-content{
    padding-left:74px;
  }
}
</style>
