<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"
      :tabsOption="tabsOption"
      :enablePullUpRefresh='true'
      :showToolBar="tabsVal != 'repetitive'"
      @onRefresh="onRefresh"
      @onInfinite="onInfinite"
      @onTabChange="onTabChange"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
    >
      <div slot="filter" style="background:#fff;  padding:0.32rem; padding-top: 0;" v-show="tabsVal !== 'repetitive'">
        <div class="" v-for="(item,index) in screen_list" :key="index" v-show="item.show" >
          <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}" if>{{d.name}}</span>
          </div>
        </div>
      </div>

      <div slot="assign">
        <van-cell-group style="padding: 0.32rem;" class="" v-for="(item,index) in list " :key="index" @click="detail(item)">
          <div class="clear title">
            <userImage class="fl" :user_name="item.employee_name" :id="item.employee_id" width="0.72rem" height="0.72rem"  style="margin-right: 0.2rem"></userImage>
            <span><Wxopendata type="userName" :openid="item.employee_name"></Wxopendata>的{{item.pt_name}}任务</span>
            <span v-if="item.point_config !== undefined && item.point_config.base_point !== undefined" class="fr" :class="{color_red:item.status == 4 && item.point_config.base_point > 0,color_green:item.status == 4 && item.point_config.base_point < 0}"><span v-show="item.point_config.base_point > 0">+</span>{{item.point_config.base_point}} {{$isPt_id(item.pt_id)}}</span>
          </div>
          <div style="padding-left: 0.72rem; margin-left: 0.2rem; font-size: 0.32rem">
            <div style="font-size: 0.32rem;color:#666 !important;">{{item.task_name}}</div>
            <div class="clear" style="margin-top: 0.1rem; font-size: 0.24rem;">
              <span class="fl color_ccc">{{item.expire_time}}截止</span>
              <span class="fr color_yellow2" v-show="item.status == 1">进行中</span>
              <span class="fr color_yellow bg" v-show="item.status == 2">已完成</span>
              <span class="fr color_green bg" v-show="item.status == 4">已审批</span>
              <span class="fr color_red bg" v-show="item.status == 5">已撤回</span>
            </div>
          </div>
        </van-cell-group>
        <noData style="background: rgb(245, 245, 245);margin-top: 2rem;" :list="list"/>
      </div>
      <div slot="reward">
        <van-cell-group style="padding: 0.32rem;" class="" v-for="(item,index) in list" :key="index" @click="task_detail(item)">
          <div class="clear title">
            <userImage v-show="item.receiver_id != 0" class="fl" :img_url="item.receiver_img_url" :user_name="item.receiver_name" width="0.72rem" height="0.72rem"  style="margin-right: 0.2rem"></userImage>
            <userImage v-show="item.receiver_id == 0" class="fl" :img_url="item.owner_img_url" :user_name="item.owner_name" width="0.72rem" height="0.72rem"  style="margin-right: 0.2rem"></userImage>
            <span v-show="item.status == 2 || item.status == 3 || item.receiver_id !=0 && item.status == 4"><Wxopendata type="userName" :openid="item.receiver_name"></Wxopendata>的{{item.pt_name}}任务</span>
            <span v-show="item.status == 1 || item.status == -1 || item.receiver_id ==0 &&item.status == 4">我发布的{{item.pt_name}}任务</span>
            <span class="fr" v-show="item.base_point !== undefined && item.status != 4" :class="{color_green:item.status == 3 && item.base_point*1 > 0,color_red:item.status == 3 && item.base_point*1 < 0}"><span v-show="item.base_point*1 > 0">+</span>{{item.base_point}} {{$isPt_id(item.pt_id)}}</span>
          </div>
          <div style="padding-left: 0.72rem; margin-left: 0.2rem; font-size: 0.32rem">
            <div style="font-size: 0.28rem;color:#666;">{{item.task_name}}</div>
            <div class="clear" style="margin-top:0.1rem; font-size: 0.28rem;">
              <span class="fl color_ccc">{{item.expire_time}}截止</span>
              <span class="fr color_red bg" v-show="item.status == -1">已过期</span>
              <span class="fr color_yellow2" v-show="item.status == 1">待领取</span>
              <span class="fr color_yellow bg" v-show="item.status == 2">进行中</span>
              <span class="fr color_green bg" v-show="item.status == 3">已完成</span>
              <span class="fr color_red bg" v-show="item.status == 4">已撤回</span>
            </div>
          </div>
        </van-cell-group>
        <noData style="background: rgb(245, 245, 245);margin-top: 2rem;" :list="list"/>
      </div>

      <div slot="repetitive">
        <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="repetitive_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 !== null && item.target_info.length == 0" >待领取</span>
                <span v-if="item.target_info !== null && 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.base_point}}</span>
            </template>
          </van-cell>
        </van-cell-group>
          <noData style="margin-top: 2rem; background-color: rgb(245, 245, 245)"  :list='list' />
      </div>
    </TabsList>
  </div>
</template>
<script>
import request from '@/utils/request'
import userImage from '@/components/common/user_image'
import TabsList from '@/components/common/TabsList'
import moment from 'moment'
import Vue from 'vue'
import {Tab, Tabs, DropdownMenu, DropdownItem} from 'vant'
Vue.use(Tab).use(Tabs).use(DropdownMenu).use(DropdownItem)
export default {
  // 数据
  data () {
    return {
      title: '我发布的任务',
      list: [],
      loading: true,
      url: '/api/integral/work/list/publisher',
      date: moment().format('YYYY-MM-DD HH:mm:ss'),
      filter: {
        page: 1,
        status: 'all',
        sort: 'publish',
        source_type: 1,
        pt_id: '0',
        order_by: 'create_time'
      },
      tabsOption: [
        { title: '我指派的', value: 'assign' },
        { title: '我悬赏的', value: 'reward' },
        { title: '重复任务', value: 'repetitive' }
      ],
      screen_list: [
        {
          title: '积分类型',
          mapping: 'pt_id',
          show: true,
          list: [
            {name: '全部', id: '0'}
          ]
        },
        {
          title: '任务状态',
          mapping: 'status',
          show: true,
          list: [
            {name: '全部', id: 'all'},
            {name: '进行中', id: 'running'},
            {name: '已完成', id: 'complete'}
          ]
        },
        {
          title: '排序',
          mapping: 'sort',
          show: true,
          list: [
            {name: '按发布时间', id: 'publish'},
            {name: '按截止时间', id: 'expire'}
          ]
        },
        {
          title: '排序',
          mapping: 'order_by',
          show: false,
          list: [
            {name: '按发布时间', id: 'create_time'},
            {name: '按截止时间', id: 'expire_time'}
          ]
        }
      ],
      tabsVal: 'assign'
    }
  },
  // 组件
  components: {
    userImage, TabsList, moment
  },
  watch: {

  },
  computed: {
    hasData () {
      return this.loading || (Array.isArray(this.list) && this.list.length > 0)
    }
  },
  // 方法
  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) {
      let self = this
      if (value.activeTab == 'repetitive') {
        self.$refs.tabsList.$refs.popupContainer.hidden = true
      } else {
        self.$refs.tabsList.$refs.popupContainer.hidden = false
      }
      self.loading = true
      self.tabsVal = value.activeTab
      switch (value.activeTab) {
        case 'reward':
          self.screen_list[3].show = true
          self.screen_list[2].show = false
          self.screen_list[1].show = false
          self.list = []
          self.screen_list[0].list = [{name: '全部', id: '0'}]
          self.screen_list[0].list.push(...this.$store.getters.point_types.filter(item => item.code != 'JX'))
          self.filter = {
            page: 1,
            status: 'all',
            sort: 'publish',
            source_type: 1,
            pt_id: '0',
            order_by: 'create_time'
          }
          self.url = '/api/integral/task/publish/list'
          self.$refs.tabsList.triggerPullToRefresh()
          break
        case 'repetitive':
          self.list = []
          self.url = '/api/integral/schedule/list'
          self.$refs.tabsList.triggerPullToRefresh()
          break
        default:
          self.list = []
          self.screen_list[3].show = false
          self.screen_list[2].show = true
          self.screen_list[1].show = true
          self.screen_list[0].list = [{name: '全部', id: '0'}]
          self.screen_list[0].list.push(...this.$store.getters.point_types.filter(item => item.code != 'JX'))
          self.filter = {
            page: 1,
            status: 'all',
            sort: 'publish',
            source_type: 1,
            pt_id: '0'
          }
          self.url = '/api/integral/work/list/publisher'
          self.$refs.tabsList.triggerPullToRefresh()
          break
      }
    },
    onInfinite (params) {
      this.get_list(params)
    },
    onRefresh (params) {
      this.get_list(params)
    },
    get_list (params) {
      // 需要告诉scroller 组件是否还有数据未加载
      let hasMore = false
      let data = null, self = this
      // params.pageIndex 当前页码
      if (self.tabsVal == 'repetitive') {
        data = {page: params.pageIndex}
      } else {
        self.filter.page = params.pageIndex
        data = self.filter
      }
      self.loading = true
      request('get', self.url, data).then((res) => {
        if (res.data.code == 1) {
          const list = res.data.data.list
          // params.isRefresh  true为下拉刷新 false为下一页刷新
          if (params.isRefresh) {
            self.list = list
          } else {
            self.list = [].concat(self.list, list)
          }
          // 需要告诉scroller 组件是否还有数据未加载 true没有 flase 还有
          hasMore = list.length !== 10
        }
      }).finally(() => {
        self.loading = false
        params.done && params.done(hasMore)
      })
    },

    //  进入详情
    detail (item) {
      this.$router.push({name: 'taskFile', query: {task_id: item.id}})
    },
    task_detail (item) {
      this.$router.push({name: 'task_detail', query: {task_id: item.id}})
    },
    // 重复任务详情
    repetitive_detail (item) {
      this.$router.push({name: 'repetitive_tasks_detail', query: {schedule_id: item.id}})
    },
    // 时间对比
    date_contrast (date) {
      return moment(this.date) > moment(date)
    }
  },
  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_word_list: function (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.id) {
          vm.list.splice(i, 1)
        }
      }
    },
    update_efficiency_detail_word_list_undo: function (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.id) {
          vm.list[i].status = 5
        }
      }
    }
  },
  // 组件挂载完成
  mounted () {
    this.screen_list[0].list.push(...this.$store.getters.point_types)
  }
}
</script>
<style scoped lang="less">
/deep/ .van-tab__text {
  font-size: 0.3rem;
}
.body_com{height: calc(100% - 2.8rem); position: relative;}
.my_publish_list{
  .van-cell__title{
    line-height: 36px;
  }
  .value{
    flex: none;
    line-height: 36px;
  }
}
.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{
      color: #26a2ff;
      background: #26a2ff33;
    }
  }
}
.title{
  // display: inline-flex;
  span{
    line-height: 36px;
    display: inline-block;
    font-weight: 400;
    font-size: 0.36rem;
  }
}
.color_yellow2{
  color: #FFCC00;
  background-color: #FFCC001a;
  border-radius: 3px;
  padding: 0.06rem
}
.color_yellow.bg{
  background-color: #FF96001a;
  border-radius: 3px;
  padding: 0.06rem
}
.color_red.bg{
  background-color: #F56C6C1a;
  border-radius: 3px;
  padding: 0.06rem
}
.color_green.bg{
  background-color: #4BD9641a;
  border-radius: 3px;
  padding: 0.06rem
}
.van-cell-group{
  margin-top: 0;
}
.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>
