<template>
  <view class="all_box">
    <!-- 任务搜索框 -->
    <view class="task_box">
      <u-search shape="round" placeholder="搜索任务状态、优先级、部门等"></u-search>
      <!-- 筛选按钮 -->
      <view>
        <u-popup :show="show" @close="close" @open="open" mode="top" overlayStyle="position: fixed;top:100rpx">
          <view class="search_box">
            <view class="">
              <view class="first_order" v-for="item in orderData" :key="item.id" :class="item.id==typeid?'choose':''">
                <text>{{item.first_order}}</text>
              </view>
            </view>
            <view class="second_order">
              <view class="second" v-for="item in orderList" :key="item.id" @click="getInfo(item.info,item.id)">
                {{item.info}}
              </view>
            </view>
          </view>
        </u-popup>
        <view @click="show = true" class="screening" :class="show?'choose_style':''">筛选</view>
      </view>
    </view>
    <!-- 新建任务 -->
    <!-- <view class="new_task" @click="goNewTask">+新建任务</view> -->
    <!-- 事件列表 -->
    <view class="task_list">
      <!-- <taskCard class="task_card" v-for="item in 10" :key="item"></taskCard> -->
    </view>
   <!-- <view class="eventList_box" v-for="item in eventData" :key="item.id">
      <view class="head_box">
        <text class="title">{{item.title}}</text>
        <text class="status" :class="item.status=='驳回'?'another_color':''">{{item.flow_name}}</text>
      </view>
      <view class="line"></view>
      <view class="responsible">
        <text>负责人:{{item.director_name}}</text>
        <text class="department">{{item.did_name ? item.did_name :'' }}</text>
      </view>
      <view class="responsible">
        <text>协办人:{{item.assist_admin_names}}</text>
      </view>
      <view class="responsible">
        <text>发布人:{{item.admin_name}}</text>
      </view>
      <view class="responsible">
        <text v-if="item.is_bug==0">任务性质:部门工作</text>
        <text v-if="item.is_bug==1">任务性质:部门协助</text>
        <text v-if="item.is_bug==2">任务性质:临时任务</text>
      </view>
      <view class="end_time">预计结束时间:{{item.end_time}}</view>
    </view> -->
    <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
    <!-- <tabbar></tabbar> -->
  </view>
</template>

<script>
  import { getTaskListApi } from '@/api/oa'
  import { Toast } from '@/libs/uniApi.js'
  
  // import tabbar from '../components/tabbar'
  export default {
    components: {
      // tabbar
    },
    data() {
      return {
        status: 'loadmore',
        params: {
          page: '1',
          limit: '10',
          flow_status: "1",
        },
        lastpage: '',
        loadingText: '努力加载中',
        loadmoreText: '轻轻上拉',
        nomoreText: '我也是有底线的~~',
        orderList: [{
          id: 1,
          info: '未开始'
        }, {
          id: 2,
          info: '进行中'
        }, {
          id: 3,
          info: '待验收'
        }, {
          id: 5,
          info: '已关闭'
        }, {
          id: 6,
          info: '已验收'
        }, ],
        orderData: [{
          id: 1,
          first_order: '任务状态',
        }, ],
        show: false,
        typeid: 1,
        eventData: [],
      }
    },
    onReady() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#3175f9'
      })
    },
    onLoad() {

    },
    onShow() {
      // this.params.page = '1'
      // this.eventData = []
      // //获取任务列表
      // this.getTaskList(this.params)
    },
    onPageScroll() {
      //页面滚动关闭筛选
      this.close()
    },
    methods: {
      //获取任务列表
      async getTaskList(data) {
        const res = await getTaskListApi(data)
        this.eventData = [...this.eventData, ...res.data]
        if (this.eventData.length < this.params.limit) {
          this.status = 'nomore'
        }
        this.lastpage = res.last_page
      },
      open() {

      },
      close() {
        this.show = false
      },
      //选中筛选字段
      getInfo(val, status) {
		  Toast('开发中')
		  return
        this.eventData = []
        this.params = {
          page: '1',
          limit: '10',
          flow_status: status
        }
        this.params.flow_status = status + ''
        this.getTaskList(this.params)
        this.close()
      },
      //跳转到新建任务列表
      goNewTask() {
        uni.navigateTo({
          url: "/pages/views/new_task"
        })
      }

    },
    onPullDownRefresh() {
      this.close()
      uni.stopPullDownRefresh()
    },
    onReachBottom() {
      if (this.params.page < this.lastpage) {
        this.params.page++
        this.getTaskList(this.params)
        // this.status = 'loading'
      } else {
        this.status = 'nomore'
        return
      }
    },
  }
</script>

<style lang="scss" scoped>
  /deep/.u-search__content {
    width: 527rpx;
    height: 63rpx;

  }

  /deep/.u-search__action--active {
    display: none;
  }

  /deep/.u-search {
    width: 527rpx;
    height: 63rpx;
    display: flex;
    flex: none;
  }

  /deep/.u-popup__content {

    top: 100rpx;
  }

  .all_box {
    padding-bottom: 21rpx;
  }

  .task_box {
    margin: 0 auto;
    width: 750rpx;
    height: 98rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28rpx;

    .screening {
      margin-left: 10px;
      width: 149rpx;
      height: 63rpx;
      line-height: 63rpx;
      text-align: center;
      background: #FFFFFF;
      border-radius: 35rpx;
      border: 2rpx solid #E6E5E5;
      color: #666;
      font-size: 28rpx;
    }

    .choose_style {
      background-color: #3274F9;
      color: #fff;
    }
  }

  // 筛选按钮
  .search_box {
    width: 750rpx;
    // height: 368rpx;
    background: #FFFFFF;
    display: flex;

    .first_order {
      width: 250rpx;
      height: 73rpx;
      text-align: center;
      color: #666666;
      font-size: 28rpx;
      line-height: 73rpx;
      background-color: #f5f5f5;

    }

    .choose {
      background-color: #fff;
      color: #3274F9;
    }

    .second_order {
      text-align: center;
      width: 500rpx;

      .second {
        line-height: 73rpx;
        height: 73rpx;
        border-bottom: 2rpx solid #E6E6E6;
      }
    }

  }

  // 新建任务
  .new_task {
    margin: 0 auto;
    margin-top: 21rpx;
    width: 500rpx;
    height: 66rpx;
    line-height: 66rpx;
    color: #fff;
    text-align: center;
    border-radius: 30rpx;
    background-color: $theme-oa-color;
  }
  
  .task_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-top: 21rpx;
    .task_card{
      margin-bottom: 21rpx;
    }
  }

  .eventList_box {
    margin: 0 auto;
    margin-top: 21rpx;
    width: 694rpx;
    height: 345rpx;
    background: #FFFFFF;
    padding: 0 24.5rpx;
    border-radius: 7rpx;

    .head_box {
      width: 100%;
      height: 82rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        text-overflow: ellipsis;
        /* 溢出显示省略号 */
        overflow: hidden;
        /* 溢出隐藏 */
        white-space: nowrap;
        /* 强制不换行 */
        color: #333333;
        width: 445rpx;
        font-weight: 500;
        font-size: 32rpx;
      }

      .status {
        font-size: 32rpx;
        color: #34A853;
      }

      .another_color {
        color: #F9AA32;
      }
    }

    .line {
      width: 646rpx;
      height: 0rpx;
      border-bottom: 1rpx solid #CCCCCC;
      margin-bottom: 14.02rpx;
    }

    .responsible {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 39rpx;
      font-size: 28rpx;
      margin-bottom: 7.01rpx;

      .department {
        font-size: 25rpx;
        color: $theme-oa-color;
      }
    }

    .end_time {
      margin-top: 14rpx;
      font-size: 25rpx;
      color: #999;
    }
  }
</style>
