<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-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>
</template>

<script>
  import {MessageBox, Indicator, Toast} from 'mint-ui'
  import Loading from '@/components/Loading'
  import { getOvertimeGetList, getJob } from '@/api/job'
  export default {
    name: "OvertimeGetJob",
    components: {Loading},
    data(){
      return {
        list:[],
        total: 50,
        isLoading:true,
        listQuery: {
          jobStatus: '0',
          offset: 1,
          limit: 10,
          sort: '',
          order: ''
        },
        loadConf: {
          loadTopConf: {
            isFinish: false,  // 是否完成下拉
            topPullText: '下拉刷新',
            topDropText: '松开刷新',
            topLoadingText: '刷新中'
          },
          loadBottomConf: {
            isFinish: false,  // 是否完成上拉
            bottomPullText: '',
            bottomDropText: '释放获取内容',
            bottomLoadingText: '加载中',
            count: 1, // 模拟次数
          }
        }
      }
    },
    // mounted(){
    //   this.list = []
    //   this.isLoading = true
    //   this.loadTop()
    // },
    methods:{
      loadTop() {
        this.list = []
        this.isLoading = true
        console.log('waiGetJobList:loadTop')
        this.$refs.loadmore.onTopLoaded()
        //页码置1
        this.listQuery.offset=1
        this.loadConf.loadBottomConf.isFinish = false

        getOvertimeGetList(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() {
        if (this.list.length >= this.total) {
          this.loadConf.loadBottomConf.isFinish = true
          this.$refs.loadmore.onBottomLoaded();
        } else {
          getOvertimeGetList(this.listQuery).then(response => {
            this.listQuery.offset+=1
            this.list = this.list.concat(response.data.rows)
            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  );
  }
  .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-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>