<template>
  <view class="">
    <view class="calendar">
      <picker mode="date" fields="month" @change="bindDateChangeMonth">
        <view class="date">
          <view class="month">{{nowDate.m}}月</view>
          <view>{{nowDate.y}}</view>
        </view>
      </picker>
      <uni-calendar :insert="true" @change="changeDate" :date="nowYMD" :showMonth="false" />
    </view>
    <view class="task_list">
      <uni-section class="title" titleFontSize="32rpx" :title="'任务清单 '+ nowYMD" type="line"></uni-section>
      <u-skeleton :loading="skeleton" :style="{margin: skeleton?'0 28rpx':'0'}" :animate="true" title rows="2" rows-width="100%" rowsHeight="56">
        <block v-for="item in list" :key="item.id">
          <taskItem :datas="item"></taskItem>
        </block>
      </u-skeleton>
      <u-empty v-if="!skeleton&&list.length==0" icon="/static/img/empty/data.png" text="没有任务"></u-empty>
    </view>
  </view>
</template>

<script>
  import taskItem from "@/components/task/taskItem.vue"
  import { taskLists } from "@/api/task.js"
  export default {
    components:{
      taskItem
    },
    data() {
      return {
        current: 0,
        skeleton: true,
        nowDate: {
          y: '',
          m: '',
          d: ''
        },
        loadConfig: {
          page: 1,
          limit: 25,
          loadingText: '努力加载中',
          loadmoreText: '轻轻上拉',
          nomoreText: '没有更多账单了~~',
          status: 'loadmore'
        },
        list: []
      }
    },
    onLoad() {
      this.initDate();
    },
    onReady() {
      this.loadTaskList();
    },
    computed: {
      nowYMD() {
        let m = this.nowDate.m < 10 ? '0' + this.nowDate.m : this.nowDate.m;
        let d = this.nowDate.d < 10 ? '0' + this.nowDate.d : this.nowDate.d;
        return this.nowDate.y + '-' + m + '-' + d;
      },
    },
    methods: {
      initDate() {
        let date = new Date();
        this.nowDate.y = date.getFullYear();
        this.nowDate.m = date.getMonth() + 1;
        this.nowDate.d = date.getDate();
      },
      // 选择日期
      changeDate(e) {
        this.nowDate.y = e.year;
        this.nowDate.m = +e.month;
        this.nowDate.d = e.date;
        this.loadConfig.page = 1;
        this.loadConfig.status = 'loadmore';
        this.loadTaskList();
      },
      async loadTaskList(){
        this.skeleton = true;
        let res = await taskLists({
          page: 1,
          date_time: this.nowYMD
        })
        this.list = res.data;
        this.$u.sleep(200).then(()=>this.skeleton = false);
      },
      // 选择月份
      bindDateChangeMonth(e) {
        this.nowDate.y = e.detail.value.split('-')[0];
        let m = e.detail.value.split('-')[1];
        this.nowDate.m = m < 10 ? +m : m;
      },
      navTo(url) {
        url ?
          uni.navigateTo({
            url: url
          }) : Toast('暂未开放')
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .calendar {
    background-color: #fff;
    padding-bottom: 28rpx;

    .date {
      display: flex;
      align-items: flex-end;
      background-color: #fff;
      padding: 28rpx;
      color: #333333;
      font-size: 25rpx;

      .month {
        margin-right: 15rpx;
        height: 49rpx;
        font-size: 35rpx;
        font-weight: bold;
      }
    }
  }

  .task_list {
    .title {
      background-color: transparent;
    }

    
  }
</style>