<template>
  <div class="my_task_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>

    <TabsList
      ref="tabsList"
      :top="2.1"
      :tabsOption="tabsOption"
      @onRefresh="onRefresh"
      @onInfinite="onInfinite"
      @onTabChange="onTabChange"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
      :isSameContent="true">
      <div slot="filter" style="background: #fff;padding:0.32rem; padding-top: 0;">
        <div class="" v-for="(item,index) in screen_list" :key="index">
          <p>{{item.title}}</p>
          <div class="selected_list">
            <span v-for="(d,i) in item.list" :key="i" @click="onselect(item,d)" :class="{selected: filter[item.mapping] === d.id}">{{d.name}}</span>
          </div>
        </div>
      </div>

      <div slot="content">
        <noData style="position: absolute;top: 50vh;margin-top: -3rem;padding-bottom: .2rem; background-color:rgb(245, 245, 245);" v-show="!hasData" :detail_text="tips" :list='list' />
        <div v-if="filter.status == 'running'">
          <div v-if="toList.length != 0 || laList.length != 0" class="task">今日任务</div>
          <div>
            <van-cell-group v-for="(item,index) in toList " :key="index" @click="detail(item)">
              <van-cell v-if="date == item.expire_time.slice(0,10)" class="task_list" :title="item.task_name">
                <template slot="default">
                  <span class="point">{{item.point_config.base_point}} {{$isPt_id(item.pt_id)}}</span>
                </template>
                <template slot="label">
                  <div class="clear" style="margin-top: 0.3rem">
                    <span class="date color_ccc" >{{item.expire_time}}截止</span>
                    <!-- <span class="date color_ccc" v-if="item.expire_time!=item.expire_time">{{item.expire_time}}截止 1</span> -->
                    <van-button class="fr complete_task" v-show="item.status == 1" type="info" @click.stop="complete_task(item)" size="small">完成任务</van-button>
                    <span class="fr color_yellow bg" v-show="item.status == 2">待审批</span>
                    <span class="fr color_red bg" v-show="item.review_status == 2">审批驳回</span>
                    <span class="fr color_green bg" v-show="item.review_status == 1">审批通过</span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
            <div v-if="toList.length == 0&&laList.length!=0" style="background: #fff;color: #909399;font-size: 14px;margin: 0;text-align: center;padding: 0.5rem 0;">
              <img src="static/images/new_noData.png" style="width: 40%;" alt="" />
              <p>今日没有待完成任务哦</p>
            </div>
          </div>

          <div v-if="laList.length != 0 || toList.length != 0" style="padding-top: 0.1rem;"  class="task">待完成任务</div>

          <div v-if="laList.length!=0">
            <van-cell-group v-for="(item,index) in laList " :key="index" @click="detail(item)">
              <van-cell v-if="date != item.expire_time.slice(0,10)" class="task_list" :title="item.task_name">
                <template slot="default">
                  <span class="point">{{item.point_config.base_point}} {{$isPt_id(item.pt_id)}}</span>
                </template>
                <template slot="label">
                  <div class="clear" style="margin-top: 0.3rem">
                    <span class="date" :class="item.expire_time_color?'color_red':'color_ccc'" >{{item.expire_time}}截止</span>
                    <van-button class="fr complete_task" v-show="item.status == 1" type="info" @click.stop="complete_task(item)" size="small">完成任务</van-button>
                    <span class="fr color_yellow bg" v-show="item.status == 2">待审批</span>
                    <span class="fr color_red bg" v-show="item.status == 3">审批驳回</span>
                    <span class="fr color_green bg" v-show="item.status == 4">审批通过</span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
          <div v-if="laList.length == 0 && toList.length != 0"  style="background: #fff;color: #909399;font-size: 14px;margin: 0;text-align: center;padding: 0.5rem 0;">
            <img src="static/images/new_noData.png" style="width: 40%;" alt="" />
            <p>暂无待完成任务哦</p>
          </div>
        </div>

        <van-cell-group v-if="filter.status != 'running'">
          <van-cell v-for="(item,index) in list " :key="index" @click="detail(item)" class="task_list" :title="item.task_name">
            <template slot="default">
              <span class="point">{{item.point_config.base_point}} {{$isPt_id(item.pt_id)}}</span>
            </template>
            <template slot="label">
              <div class="clear" style="margin-top: 0.3rem">
                <span class="date color_ccc" >{{item.expire_time}}截止</span>
                <van-button class="fr complete_task" v-show="item.status == 1" type="info" @click.stop="complete_task(item)" size="small">完成任务</van-button>
                <span class="fr color_yellow bg" v-show="item.review_status == 0">待处理</span>
                <span class="fr color_green  bg" v-show="item.review_status == 1">已通过</span>
                <span class="fr color_red bg" v-show="item.review_status == 2">已驳回</span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>

      </div>
    </TabsList>

  </div>
</template>
<script>
import request from '@/utils/request'
import TabsList from '@/components/common/TabsList'
import Vue from 'vue'
import {Tab, Tabs, DropdownMenu, DropdownItem} from 'vant'
import moment from 'moment'

Vue.use(Tab).use(Tabs).use(DropdownMenu).use(DropdownItem)
export default {
  components: {TabsList},
  // 数据
  data () {
    return {
      moment,
      toList: [], // 放今天待完成
      laList: [], // 放代完成
      time: moment().format('YYYY-MM-DD HH:mm'),
      date: moment().format('YYYY-MM-DD'),
      tips: '暂无数据',
      title: '我的任务',
      loading: true,
      filter: {
        page: 1,
        status: 'running',
        sort: 'publish',
        source_type: 0,
        pt_id: 0
      },
      list: null,
      tabsOption: [
        { title: '待完成', value: 'running' },
        { title: '待审批', value: 'complete' },
        { title: '已审批', value: 'reviewed' }
      ],
      screen_list: [
        {
          title: '任务类型',
          mapping: 'pt_id',
          list: [
            {name: '全部', id: 0}
          ]
        },
        {
          title: '排序',
          mapping: 'sort',
          list: [
            {name: '按发布时间', id: 'publish'},
            {name: '按截止时间', id: 'expire'}
          ]
        }
      ]
    }
  },
  computed: {
    hasData () {
      return this.loading || (Array.isArray(this.list) && this.list.length > 0)
    }
  },
  watch: {},
  // 方法
  methods: {
    // 选择条件
    onselect (item, subItem) {
      this.filter[item.mapping] = subItem.id
    },
    onConfirm () {
      this.$refs.tabsList.triggerPullToRefresh()
    },
    onCancel () {
      this.screen_list.forEach(e => {
        this.filter[e.mapping] = e.list[0].id
      })
      this.$refs.tabsList.triggerPullToRefresh()
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    onTabChange (value) {
      this.loading = true
      this.list = []
      this.laList = []
      this.filter.status = value.activeTab
      this.$refs.tabsList.triggerPullToRefresh()
    },
    onInfinite (params) {
      this.get_list(params)
    },
    onRefresh (params) {
      this.get_list(params)
    },

    get_list (params) {
      // 需要告诉scroller 组件是否还有数据未加载
      let hasMore = false
      this.loading = true
      // params.pageIndex 当前页码
      this.filter.page = params.pageIndex
      request('get', '/api/integral/work/list', this.filter).then((res) => {
        if (res.data.code == 1) {
          const list = res.data.data.list
          // params.isRefresh  true为下拉刷新 false为下一页刷新
          if (params.isRefresh) {
            this.laList = list
            this.list = list
          } else {
            this.list = [].concat(this.list, list)
          }
          // 检查是否超时
          this.list.forEach(element => {
            if (moment(this.time).isBefore(element.expire_time)) {
              element.expire_time_color = false
            } else {
              element.expire_time_color = true
            }
          })
          // 需要告诉scroller 组件是否还有数据未加载 true没有 flase 还有
          hasMore = list.length !== 10
        }
      }).finally(() => {
        this.loading = false
        params.done && params.done(hasMore)
      })
    },
    getToDay () {
      let self = this
      request('get', '/api/integral/work/list', {status: 'running', today: '1', page: '1', page_size: '30', sort: 'publish', source_type: 0, pt_id: 0}).then((res) => {
        if (res.data.code == 1) {
          self.toList = res.data.data.list
        } else {
          self.$toast(res.data.msg)
        }
      }).finally(() => {})
    },
    //  进入详情
    detail (item) {
      this.$router.push({name: 'taskFile', query: {task_id: item.id}})
    },
    // 完成任务
    complete_task (item) {
      this.$router.push({name: 'process', query: {work_id: item.id, progress: 100}})
    }
  },
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    update_demo_list: function (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.id) {
          vm.list[i].name = data.name
        }
      }
    },
    update_efficiency_detail: function (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.work_id) {
          vm.list.splice(i, 1)
        }
      }
    }
  },
  // 组件挂载完成
  mounted () {
    let arr = this.$store.getters.point_types
    this.screen_list[0].list.push(...arr)
    this.getToDay()
  }
}
</script>
<style scoped>
.body_com{height: calc(100% - 1.92rem); position: relative;}
.task_list .van-cell__title span{
  font-size: 0.36rem;
}
.task_list .van-cell__title span.date{
  font-size: 0.28rem;
}
.task_list .van-cell__title .complete_task{
  position: absolute;
  right: 0.24rem;
  bottom: 0.24rem;
  z-index: 2;
}
.task_list .van-cell__title .fr.color_yellow,.task_list .van-cell__title .fr.color_red,.task_list .van-cell__title .fr.color_green{
  position: absolute;
  right: 0.24rem;
  bottom: 0.24rem;
  z-index: 2;
  font-size: 0.28rem;
}
.task_list .van-cell__title .complete_task span{
  font-size: inherit;
}
.task_list /deep/ .van-cell__value{
  flex: none;
}
.selected_list span{
  display: inline-block;
  height: 0.72rem;
  background: #f5f7fa;
  border-radius: 0.08rem;
  line-height: 0.72rem;
  touch-action: none;
  padding: 0 0.2rem;
  margin-right: 0.2rem;
  font-size: 0.3rem;
}
.selected_list span.selected{
  color: #26a2ff;
  background: #26a2ff33;
}
.van-cell-group{
  margin-top: 0;
}
.color_yellow.bg{
  /* background-color: #ff96001a; */
  padding: 0.01rem;
  border-radius: 3px;
}
.color_red.bg{
  /* background-color: #F56C6C1a; */
  padding: 0.01rem;
  border-radius: 3px;
}
.color_green.bg{
  /* background-color: #4BD9641a; */
  padding: 0.01rem;
  border-radius: 3px;
}

.task {
  background: #F5F7FA;
  color: #909399;
  font-size: 14px;
  padding: 0.05rem 0.32rem 0.15rem 0.32rem;
}
.bkColor {
  background-color: #fff;
}
.activeColor {
   background-color: transparent;
}
.my_task_box /deep/ .van-row--justify-center{
  top:50vh;
}
</style>
