<template>
  <div class="my_task_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header">
      <scroller class="scroller-top" ref="my_scroller" :on-refresh="refresh" :on-infinite="infinite">

        <van-cell-group class="list_box" :border="false">
          <van-cell v-for="(item,index) in list "  style="border-bottom: 17px solid #F5F7FA;" :key="index" @click="detail(item)">
            <template slot="title">
              <span class="title_name">{{item.name}}</span>
            </template>
            <template slot="label">
              <div class="name">
                <icon name="footer_nav_me" class="icon"></icon>
                <span v-if="item.target_info.length == 0" >待领取</span>
                <span v-if="item.target_info.length > 0" v-for="(d,i) in item.target_info">{{d.name}}<span v-if="i != item.target_info.length-1">、</span></span>
              </div>
              <div class="cycle">
                <icon name="repetition_cycle" class="icon"></icon>
                <span v-if="item.task_cycle == 1">每天自动发布</span>
                <span v-if="item.task_cycle == 2">
                  <span v-if="item.task_cycle_value == 1">每周一自动发布</span>
                  <span v-if="item.task_cycle_value == 2">每周二自动发布</span>
                  <span v-if="item.task_cycle_value == 3">每周三自动发布</span>
                  <span v-if="item.task_cycle_value == 4">每周四自动发布</span>
                  <span v-if="item.task_cycle_value == 5">每周五自动发布</span>
                  <span v-if="item.task_cycle_value == 6">每周六自动发布</span>
                  <span v-if="item.task_cycle_value == 7">每周日自动发布</span>
                 </span>
                <span v-if="item.task_cycle == 3">每月自动发布</span>
                <span v-if="item.task_cycle == 1"> 完成截止为{{item.task_cycle_value}}点</span>
                <span v-if="item.task_cycle == 2">
                  完成截止为<span v-if="item.task_cycle_value == 1">周一</span>
                  <span v-if="item.task_cycle_value == 2">周二</span>
                  <span v-if="item.task_cycle_value == 3">周三</span>
                  <span v-if="item.task_cycle_value == 4">周四</span>
                  <span v-if="item.task_cycle_value == 5">周五</span>
                  <span v-if="item.task_cycle_value == 6">周六</span>
                  <span v-if="item.task_cycle_value == 7">周日</span>
                </span>
                <span v-if="item.task_cycle == 3"> 完成截止为次月{{item.task_cycle_value}}号</span>
              </div>
            </template>
            <template slot="right-icon">
              <span class="point">{{item.point_config.base_point}}</span>
            </template>
          </van-cell>
        </van-cell-group>
          <noData style="margin-top: 2rem;"  :list='list' />
      </scroller>
    
    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import Vue from 'vue'
  export default {
    // 数据
    data(){
      return {
        title: '重复任务',
        filter: {
          page: 1
        },
        list: null,
      }
    },
    mounted(){

    },
    // 组件
    components: {},
    watch:{
    },
    // 方法
    methods:{
      // 加载
      showLoading () {
        this.$toast.loading({
          loadingType: "spinner",
          message: '正在处理'
        })
      },
      //获取列表
     get_list (done) {
       let self = this
       request('get','/api/integral/schedule/list',self.filter).then((res) => {
         done()
         self.$toast.clear()
         if(res.data.code == 1){
           self.$refs.my_scroller.finishInfinite(!res.data.data.list.length != 10) //停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
           if(res.data.data.total){
             for (let i in res.data.data.list) {
               self.list.push(res.data.data.list[i])
             }
           }
           self.filter.page++
         }else{
           self.$refs.my_scroller.finishInfinite(true)
         }
       })
     },
     refresh (done) {
       let self = this
       self.showLoading()
       setTimeout(() => {
         this.filter.page = 1
         this.get_list(function () {
           self.list = []
           done()
         })
       }, 100)
     },
     infinite (done) {
       this.get_list(done)
     },
    //  进入详情
     detail(item){
       this.$router.push({name: 'repetitive_tasks_detail', query: {schedule_id:item.id}})
     }
    },
    keep_alive_update: {
      //运用缓存更新方法来完成返回后的更新
      update_repetitive_list: function (vm, data) {
        for(let i in vm.list){
          if(vm.list[i].id == data.data.schedule_id){
            vm.list[i].name = data.data.task_name
            vm.point_config.base_point = data.data.base_point
            vm.target_info = data.target_info
          }
        }
      }
    },
    // 组件挂载完成
    mounted() {
      this.$nextTick(() => {
        this.$refs.my_scroller.finishInfinite(false)
      })
    },
  };
</script>
<style scoped lang="less">
.body_com{height: calc(100% - 1rem); position: relative;}
.list_box{
  .title_name{
    font-size:0.36rem;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .name{
    padding-top: 0.15rem;
    line-height: 0.4rem;
    span{
      color:#303133;
      font-size: 0.28rem;
    }
  }
  .cycle{
    padding-top: 0.1rem;
    line-height: 0.4rem;
    span{
      color:#303133;
      font-size: 0.28rem;
    }
  }
  .point{
    font-size:0.4rem;
    font-weight:bold;
    color:#303133;
  }
}
.icon{
  width:0.3rem;
  color:#C0C4CC;
  padding:0;
  margin-right:0.1rem;
}
</style>
