<template>
  <transition name="slide">
    <div class="index-container">
      <mt-header class="header" title="工单查询" fixed>
        <div slot="left">
          <mt-button icon="back" @click="$router.back(-1)"></mt-button>
        </div>
      </mt-header>
      <div class="joblist" ref="wrapper">
        <Loading v-show="isLoading"></Loading>
        <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 v-if="item.jobStatus!='0'" class="job-card">
                <div class="card-brief">
                  <div class="card-left">
                    <div>
                      <span class="card-alarm">{{item.alarmContentName}}</span>
                      <span class="card-createtime">{{item.createTime}}</span>
                    </div>
                    <div class="card-wellcode">
                      <span>{{item.wellCode}}</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 v-if="item.jobStatus=='2'" bg-color="#26a2ff">{{item.jobBelongTo}}正在处理...
                    </timeline-title>
                    <timeline-title v-if="item.jobStatus=='1'" bg-color="#26a2ff">{{item.jobBelongTo}}正在确认...
                    </timeline-title>
                    <timeline-title v-if="item.jobStatus=='3'" bg-color="#26a2ff">{{item.jobBelongTo}}已完成
                    </timeline-title>
                    <timeline-title v-if="item.jobStatus=='4'" bg-color="#26a2ff">{{item.jobBelongTo}}已取消
                    </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.jobStatus=='3' && item.handleJobTime!=''">
                        <span class="timeline-left">{{item.handleJobTime}}</span> <span class="timeline-right">{{item.handleJobPerson}}完成工单</span>
                      </timeline-item>
                      <timeline-item v-if="item.jobStatus=='4' && 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>
              <div v-else class="wait-job-card">
                <div class="card-left">
                  <div>
                    <span class="card-alarm">{{item.alarmContentName}}</span>
                    <span class="card-createtime">{{item.createTime}}</span>
                  </div>
                  <div class="card-wellcode">
                    <span>{{item.wellCode}}</span>
                  </div>
                  <div class="card-info">
                    <div class="card-position">
                      <span>{{item.position}}</span>
                    </div>
                    <div class="card-right">
                      <mt-button type="primary" size="small" @click.stop="getJob(item.id)">接单</mt-button>
                    </div>
                    <div class="clear-float"></div>
                  </div>
                </div>

                <div class="clear-float"></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>
    </div>
  </transition>
</template>

<script>
  import {Timeline, TimelineItem, TimelineTitle} from 'vue-cute-timeline'
  import {MessageBox, Indicator, Toast} from 'mint-ui'
  import Loading from '@/components/Loading'
  import {getJobSearchList, getJob} from '@/api/job'

  let isFromDetail = false
  export default {
    name: "SearchList",
    components: {
      Timeline,
      TimelineItem,
      TimelineTitle,
      Loading
    },
    data() {
      return {
        list: [],
        isLoading: true,
        total: 50,
        listQuery: {},
        loadConf: {
          loadTopConf: {
            isFinish: false,  // 是否完成下拉
            topPullText: '下拉刷新',
            topDropText: '松开刷新',
            topLoadingText: '刷新中'
          },
          loadBottomConf: {
            isFinish: false,  // 是否完成上拉
            bottomPullText: '',
            bottomDropText: '释放获取内容',
            bottomLoadingText: '加载中',
            count: 1, // 模拟次数
          }
        }
      }
    },
    mounted() {
      this.listQuery = this.$route.query.listQuery
      this.list = []
      this.isLoading = true
      this.loadTop()
    },
    beforeRouteEnter(to, from, next) {
      if (from.name) {
        if (from.name.indexOf('jobDetail') === -1) {
          isFromDetail = false
        } else {
          isFromDetail = true
        }
      } else {
        isFromDetail = false
      }
      next()
    },
    activated() {
      if (isFromDetail) { // 来自详情页面
        this.$refs.wrapper.scrollTop = this.$store.getters.pageYOffset;
      } else { // 滚动到最顶，数据初始化
        this.list = []
        this.listQuery = this.$route.query.listQuery
        this.isLoading = true
        this.loadTop()
        this.$refs.wrapper.scrollTop = 0
      }
    },
    methods: {
      loadTop() {
        this.list = []
        console.log('inHandleJobList:loadTop')
        this.isLoading = true
        this.flag = 0
        this.$refs.loadmore.onTopLoaded()
        this.listQuery.offset = 1
        this.loadConf.loadBottomConf.isFinish = false
        getJobSearchList(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 {
          getJobSearchList(this.listQuery).then(response => {
            console.log('getJobSearchList')
            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}`
        })
      },
      getJob(id){
        MessageBox.confirm('确定要接单吗?').then(action => {
          if(action=='confirm'){
            getJob(id).then(response => {
              if(response.code==200){
                Toast({
                  message: '接单成功',
                  position: 'bottom',
                })
                this.loadTop()
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .joblist {
    margin-top 50px
    padding 0px 2vw
    overflow: scroll;
    //height: calc(100vh - 135px)
    height: calc(100vh - 40px);
  }

  .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-top 12px
        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
      }
    }
  }

  .wait-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-top 12px
        font-size: 0.8rem
      }
      .card-createtime {
        margin-top 5px
        float right
        font-size 0.8rem
        color #bbbbbb
      }
      .card-welltype {
        margin-left 10px
        font-size 0.8rem
        color #13ad00
      }
      .card-info {
        .card-position {
          margin-top 18px
          font-size 0.8rem
          line-height 0.9rem
          color #646464
          width 70%
          float: left;
        }
        .card-right {
          height: 100%
          width 70px;
          padding-top: 1px
          float: right
          text-align: right
          .mint-button {
            /*margin-top:7px*/
            /*margin-top 20px*/
            margin-left 10px
          }
        }
      }

    }

  }
</style>
