<template>
  <div class="joblist">
    <Loading v-show="isLoading"/>
    <mt-loadmore
      :top-method="loadTop"
      :topPullText="loadConf.loadTopConf.topPullText"
      :topDropText="loadConf.loadTopConf.topDropText"
      :topLoadingText="loadConf.loadTopConf.topLoadingText"
      :bottom-method="loadBottom"
      :bottomAllLoaded="loadConf.loadBottomConf.isFinish"
      :bottomPullText="loadConf.loadBottomConf.bottomPullText"
      :bottomDropText="loadConf.loadBottomConf.bottomDropText"
      :bottomLoadingText="loadConf.loadBottomConf.bottomLoadingText"
      ref="loadmore"
      class="loadmore-content"
    >
      <ul class="list-ul">
        <li class="list-li" v-for="item in list" @click="goJobDetail(item.id)">
          <div class="job-card">
            <div class="card-brief">
            <div class="card-left">
              <div>
                <span class="card-alarm">{{item.alarmContentName}}</span>
                <span class="card-wellcode">{{item.wellCode}}</span>
                <span class="card-createtime">{{item.createTime}}</span>
              </div>
              <div class="card-position">
                <span>{{item.position}}</span>
              </div>
            </div>
            <div class="clear-float"></div>
            </div>
            <div class="time-line">
            <timeline>
              <timeline-title bg-color="#26a2ff">{{item.handleJobPerson}}完成工单</timeline-title>
              <div v-if="item.showTimeline">
                <timeline-item>
                  <span class="timeline-left">{{item.createTime}}</span> <span class="timeline-right">发起工单</span>
                </timeline-item>
                <timeline-item v-if="item.getJobTime">
                  <span class="timeline-left">{{item.getJobTime}}</span> <span class="timeline-right">{{item.getJobPerson}}接单</span>
                </timeline-item>
                <timeline-item v-if="item.confirmJobTime">
                  <span class="timeline-left">{{item.confirmJobTime}}</span> <span class="timeline-right">{{item.confirmJobPerson}}确认工单</span>
                </timeline-item>
                <timeline-item v-if="item.handleJobTime">
                  <span class="timeline-left">{{item.handleJobTime}}</span> <span class="timeline-right">{{item.handleJobPerson}}完成工单</span>
                </timeline-item>
                <div class="detail-btn" @click.stop="item.showTimeline=!item.showTimeline">
                  <i class="iconfont icon-fanhui3"></i>
                </div>
              </div>
              <div class="detail-btn" v-else @click.stop="item.showTimeline=!item.showTimeline">
                <i class="iconfont icon-31xiala"></i>
              </div>
            </timeline>
            </div>
          </div>
        </li>
      </ul>
      <div class="no-content" v-show="list.length<1">暂无已完成工单</div>
      <div class="no-content" v-show="list.length>10 && loadConf.loadBottomConf.isFinish">已经到底了</div>
    </mt-loadmore>
  </div>
</template>

<script>
  import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'
  import {Loadmore, Indicator, Toast} from 'mint-ui'
  import Loading from '@/components/Loading'
  import { getJobList } from '@/api/job'
  export default {
    name: "OverJob",
    components:{
      Timeline,
      TimelineItem,
      TimelineTitle,
      Loading
    },
    data(){
      return {
        list:[],
        flag: 0,
        total: 50,
        listQuery: {
          jobStatus: '3',
          offset: 1,
          limit: 10,
          sort: '',
          order: ''
        },
        loadConf: {
          loadTopConf: {
            isFinish: false,  // 是否完成下拉
            topPullText: '下拉刷新',
            topDropText: '松开刷新',
            topLoadingText: '刷新中'
          },
          loadBottomConf: {
            isFinish: false,  // 是否完成上拉
            bottomPullText: '',
            bottomDropText: '释放获取内容',
            bottomLoadingText: '加载中',
            count: 1, // 模拟次数
          }
        },
        isLoading: true
      }
    },
    mounted(){
      this.list = []
      this.isLoading = true
      this.loadTop()
    },
    methods:{
      loadTop() {
        this.list = []
        console.log('overJobList:loadTop')
        this.isLoading = true
        this.flag = 0
        this.$refs.loadmore.onTopLoaded()
        this.listQuery.offset=1
        this.loadConf.loadBottomConf.isFinish = false
        getJobList(this.listQuery).then(response => {
          this.listQuery.offset+=1
          this.list = []
          this.isLoading = false
          for(let item of response.data.rows){
            item.showTimeline = false
            this.list.push(item)
          }
          if (this.list.length >= this.total) {
            this.loadConf.loadBottomConf.isFinish = true
            this.$refs.loadmore.onBottomLoaded();
          }
        })
      },
      loadBottom() {
        console.log('loadbottom')
        if (this.list.length >= this.total) {
          this.loadConf.loadBottomConf.isFinish = true
          this.$refs.loadmore.onBottomLoaded();
        } else {
          getJobList(this.listQuery).then(response => {
            console.log('getJobList')
            this.listQuery.offset+=1
            for(let item of response.data.rows){
              item.showTimeline = false
              this.list.push(item)
              console.log(this.list.length)
            }
            this.total = parseInt(response.data.total)
            this.$refs.loadmore.onBottomLoaded();
            this.isLoading = false
          })
        }
      },
      goJobDetail(id){
        this.$router.push({
          path :`/jobDetail/${id}`
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .joblist {
    margin-top 50px
    padding 0px 2vw
    overflow: scroll;
    height: calc( 100vh - 135px  );
  }
  .list-li {
    margin-top 1vw;
    border 1px solid #f0f0f0
    background-color #ffffff
    min-height 80px
  }
  .job-card {
    .card-left {
      width 90%
      float left
      padding 15px 15px
      .card-alarm {
        margin-top 5px
        font-size: 1rem
        font-weight 500
        color #f7615a
      }
      .card-wellcode {
        margin-left 10px
        font-size: 0.8rem
      }
      .card-welltype {
        margin-left 10px
        font-size 0.8rem
        color #13ad00
      }
      .card-createtime{
        margin-top 5px
        float right
        font-size 0.8rem
        color #bbbbbb
      }
      .card-position {
        margin-top 18px
        font-size 0.8rem
        line-height 0.9rem
        color #646464
      }
    }
    .timeline-right{
      float right
    }
    .detail-btn{
      height 1rem
      text-align center
      i{
        font-size:1rem
      }
    }
  }
</style>