<template>
  <view class="wrapper top-bg">
    <view class="top-nav" :style="{height: capHeight+ capTop+'px'}">
      <view class="nav-title" :style="{paddingTop: capTop+5+'px'}">任务</view>
    </view>
    <view class="tabs">
      <view class="tab-item"  :class="{active: activeTab === '20'}" @tap="setActive('20')">
        进行中
      </view>
      <view class="tab-item"  :class="{active: activeTab === '30'}" @tap="setActive('30')">
        已完成
      </view>
      <view class="tab-item"  :class="{active: activeTab === '40'}" @tap="setActive('40')">
        已取消
      </view>
    </view>
    <scroll-view :scrollY="true" @scrolltolower="!finished && loadNextPage()" class="task-container">
      <view class="task-item" v-for="(item, key) in listData" :key="key" @tap="gotoDetail(item.id)">      
        <view class="task-title">{{item.task_name}}</view>
        <view class="publisher content-item">
          <text class="title">发布人:</text>
          <text class="value">{{item.author_nickname}}</text>
        </view>
        <view class="publisher content-item">
          <text class="title">开始时间:</text>
          <text class="value">{{item.start_time}}</text>
          <text class="place"></text>
          <!-- <text class="title">结束时间:</text>
          <text class="value">{{item.end_time}}</text> -->
        </view>      
      </view>
      <view class="loading" v-if="listData.length">
        {{finished ? '- 加载完成 -' : '加载中...'}}
      </view>
      <data-empty v-if="!listData?.length"></data-empty>
    </scroll-view>
  </view>  
</template>

<script lang="ts" setup>
  import { navigateTo } from "@tarojs/taro";
  import { watch } from "@vue/runtime-core";
  import { usePagingData } from "any-hooks/common/usePagingData";
  import { useAppInitInfo } from "src/hooks/common/useAppInitInfo";
  import { ref } from "vue";
  import { useInjector, useState } from "vue-vulcan";

  const { listData, loadNextPage, finished, setFilter } = usePagingData<TaskData>('/getTaskList', {params: {task_status: '20'}});
  
  watch(listData, console.log)

  const { rect }  = useInjector(useAppInitInfo); 
  const capTop    = ref(rect.top);
  const capHeight = ref(rect.height+15);

  const tabsInfo = ref(['进行中', '已完成', '已取消']);
  const [activeTab, setActive] = useState('20');
  watch(activeTab, value => {
    setFilter('task_status', value)
  })

  const gotoDetail = (id: string) => {
    navigateTo({url: `/pages/task-detail/index?id=${id}`})
  }

 
</script> 

<style lang="less">
page{
  width:100%;
  height: 100%;
}
.wrapper{
  width: 100%;
  height: 100%;
  display: flex; 
  flex-direction: column;
  .top-nav{
    text-align: center;
    .nav-title{
      color: #fff;
    }
  }
  .tabs{
    display: flex;
    .tab-item{
      padding: 20px 0;
      margin: 0 20px;
      color: #fff;
      &.active{
        border-bottom: 2px solid #fff;
        font-weight: bold;
      }
    }
  }
  .task-container{
    flex: 1;
    height: 300px;
    background: #efefef;
    .task-item{
      background: #fff;
      margin: 20px;
      padding: 20px;
      border-left: 5px solid #4880FF;
      .task-title{
        font-weight: bold;
      }
      .content-item{
        padding-top: 10px;
        .title{
          color: #999;
        }
      }
      .place{
        display: inline-block;
        width: 20px;
      }
    }
  }
  .loading{
    text-align: center;
    padding: 10px 0;
    color: #999;
    font-size: small;
  }
}

</style>