<template>
  <view class="container">
    <!-- 导航栏 -->
    <u-navbar leftText="返回" title="任务中心" :placeholder="true" leftIconColor="	#409eff" @leftClick="backHomeClick" />

    <!-- 分段器 -->
    <u-subsection :list="statusList" keyName="label" :current="curNow" @change="sectionChange"></u-subsection>

    <view class="tasklist">
      <view v-for="item in list" :key="item.id">
        <u-gap height="10" bgColor="#fff"></u-gap>
        <taskcard :info="item" :dict="{'statusMap': statusMap}"></taskcard>
      </view>
    </view>

    <!-- 加载更多 -->
    <u-loadmore :status="loading" :line="true" />

    <!-- 消息提示 -->
    <u-toast ref="msg"></u-toast>

  </view>
</template>

<script>
  import taskcard from '@/components/yx-card/taskcard.vue'
  import {
    mapState
  } from 'vuex'
  // import dictData from '@/common/dict.js'
  export default {
    name: "Task",
    components: {
      taskcard
    },
    data() {
      return {
        curNow: 0,
        loading: 'loadmore',
        list: [{
          id: 10001,
          title: "#001任务名称",
          status: 1,
          productName: "xxx产品",
          hours: 80,
          number: 30,
          creator: '管理员',
          createtime: '2023-10-01 09:58:51',
          pointer: '小王',
          finishtime: '2023-10-11 19:58:51',
        }],
        page: 0,
        pageSize: 10
      }
    },
    onLoad() {
      // this.$base.test();
      this.loadData();
    },
    // 上拉触底事件
    onReachBottom() {
      this.loadData();
    },
    methods: {
      backHomeClick() {
        console.log("back home");
        uni.switchTab({
          url: '/pages/index/index'
        });
        // uni.navigateBack({
        //   delta: 999,
        //   success: () => {
        //     console.log("success");
        //   },
        //   fail: (e) => {
        //     // console.log(getCurrentPages());
        //     console.log(e.errMsg);
        //   }
        // });
      },
      sectionChange(index) {
        this.list = [{
          id: 10001,
          title: "#001任务名称",
          status: 1,
          productName: "xxx产品",
          hours: 80,
          number: 30,
          creator: '管理员',
          createtime: '2023-10-01 09:58:51',
          pointer: '小王',
          finishtime: '2023-10-11 19:58:51',
        }];
        this.curNow = index;
        this.loadData();
      },
      loadData() {
        let status = this.statusList[this.curNow].value;
        // console.log(this.statusMap);
        this.mockData();
      },
      mockData() {
        // 模拟数据请求
        if (this.page >= 3) return;
        this.loading = 'loading';
        this.page = ++this.page;
        setTimeout(() => {
          let obj = this.list[0];
          let length = this.page * this.pageSize;
          this.list = this.$base.fillArrayWithObject(obj, length);
          // console.log(this.list);
          if (this.page >= 3) this.loading = 'nomore';
          else this.loading = 'loading';
        }, 2000);
      }
    },
    computed: {
      ...mapState('dict', {
        taskStatus: state => state.dictData.taskStatus,
      }),
      statusList() {
        // console.log(this.taskStatus);
        return this.taskStatus;
      },
      statusMap() {
        return this.statusList.reduce((result, item) => {
          result[item.value] = item.label;
          return result;
        }, {});
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tasklist {
    background-color: #f9f9f9;
    // font-family: $custom-ttf;

    .item {
      padding: 24rpx 0;
      color: $u-content-color;
      font-size: 28rpx;
    }
  }
</style>
