<template>
  <div class="task_hall_box">
    <van-nav-bar title="悬赏任务大厅" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>

    <van-tabs v-model="filter.hall_type" @change="loading = true">
      <van-tab title="待领取" name="waiting"></van-tab>
      <van-tab title="已领取" name="catch"></van-tab>
    </van-tabs>
    <div class="body_com has_header">
      <scroller ref="my_scroller" :on-refresh="refresh" :on-infinite="infinite">
        <div v-show="filter.hall_type === 'waiting' && hasData">
          <van-cell-group :border="false">
            <van-cell v-for="(item, index) in list" :key="index" @click="detail(item)">
              <template slot="title">
                <span class="title_one">{{item.task_name}}</span>
              </template>
              <template slot="right-icon">
                <span style="font-size: 0.36rem; font-weight: bold;">{{item.base_point}} {{$isPt_id(item.pt_id)}}</span>
              </template>
              <template slot="label">
                <div class="clear" style="padding-top: 0.28rem;">
                  <span class="fl color_ccc" style="font-size: 0.28rem">{{item.end_time}} 截止</span>
                  <span class="fr task_btn" style="position: absolute; right: 0.32rem; bottom: 0.24rem;">
                    <div class="catch-button" @click="detail(item)">
                      <span>领取任务</span>
                    </div>
                  </span>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
        <div v-show="filter.hall_type === 'catch' && hasData">
          <van-cell-group :border="false">
            <van-cell v-for="(item, index) in list" :key="index" @click="detail(item)">
              <template slot="icon">
                <userImage :id="parseInt(item.receiver_id)" width="0.72rem" height="0.72rem"
                           style="margin-right: 0.1rem"></userImage>
              </template>
              <template slot="title">
                <div style="font-size: 0.36rem; font-weight: 400;"><Wxopendata type="userName" :openid="item.receiver_name"></Wxopendata>领取{{item.pt_name}}任务</div>
              </template>
              <template slot="right-icon">
                <span style="font-size: 0.36rem; font-weight: bold;">{{item.base_point}} {{$isPt_id(item.pt_id)}}</span>
              </template>
              <template slot="label">
                <div class="clear" style="padding-top: 0.12rem;">
                  <div class="title">{{item.task_name}}</div>
                  <div class="time color_ccc">{{item.end_time}} 截止</div>
                </div>
              </template>
            </van-cell>
          </van-cell-group>

        </div>
        <van-empty v-if="!hasData && filter.hall_type === 'catch'" description="暂无数据..."/>

        <van-empty v-if="!hasData && filter.hall_type === 'waiting'" description="你来迟了，任务已经被抢光了..."/>
      </scroller>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {Empty, Tab, Tabs, Panel} from 'vant'
import request from '@/utils/request'
import userImage from '@/components/common/user_image'

Vue.use(Empty).use(Tab).use(Tabs).use(Panel)

export default {
  name: 'task_hall',
  data () {
    return {
      loading: true,
      list: [],
      filter: {
        page: 1,
        hall_type: 'waiting'
      },
      types_list: {},
      types_list_array: []
    }
  },
  created () {
    this.$nextTick(() => {
      this.$refs.my_scroller.finishInfinite(false)
    })
  },
  components: {userImage},
  computed: {
    hasData () {
      return this.loading || (Array.isArray(this.list) && this.list.length > 0)
    }
  },
  watch: {
    'filter.hall_type': function (val) {
      let self = this
      this.list = null
      this.$toast.loading({
        message: '正在加载'
      })
      this.refresh(function () {
        self.$toast.clear()
      })
    }
  },
  methods: {
    get_list (done) {
      let self = this
      this.loading = true
      request('get', '/api/integral/task/hall', self.filter).then((res) => {
        done()
        if (res.data.code == 1) {
          self.$refs.my_scroller.finishInfinite(res.data.data.list.length != 10) // 停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
          const {list} = res.data.data
          if (self.filter.page === 1) {
            self.list = list
          } else {
            self.list = self.list.concat(list)
          }
          self.filter.page++
        } else {
          self.$refs.my_scroller.finishInfinite(true)
        }
      }).finally(() => this.loading = false)
    },
    refresh (done) {
      let self = this
      setTimeout(() => {
        this.filter.page = 1
        this.get_list(function () {
          self.list = []
          done()
        })
      }, 100)
    },
    infinite (done) {
      this.get_list(done)
    },
    detail (data) {
      this.$keep_alive_update('update_repetitive_info', true)
      this.$router.push({name: 'task_detail', query: {task_id: data.id}})
    }
  },
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    update_task_list: function (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.task_id) {
          vm.list.splice(i, 1)
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
  .body_com {
    height: calc(100% - 1.8rem);
    position: relative;
  }

  .title {
    font-size: 0.32rem;
    color: #323233;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .catch-button {
    display: flex;
    width: 1.6rem;
    height: 0.56rem;
    color: #fff;
    background: #26A2FF;
    border-radius: 0.08rem;
    align-items: center;
    justify-content: center;
    touch-action: none;

    & > span {
      font-size: 0.28rem !important;
    }
  }

  .time {
    font-size: 0.28rem;
    padding-top: 0.28rem;
  }

  .title_one {
    font-size: 0.36rem;
    font-weight: 400;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
