<template>
  <Card title="进度任务">
    <div class="tabs">
      <div :class="['tab', { checked: activeTab == 0 }]" @click="handleTabClick(0)">待办事项</div>
      <div :class="['tab', { checked: activeTab == 1 }]" @click="handleTabClick(1)">未来提醒</div>
    </div>
    <div class="list" style="position: relative;">
      <vue-scroll v-if="todoList.length">
        <div class="list-item" v-for="(item, i) in todoList" :key="i">
          <div class="todo">{{ item.subitemProjectName }}</div>
          <div class="startTime">
            <span class="grey">计划开始时间：</span><span class="blue">{{ item.startTime }}</span>
          </div>
          <div class="endTime">
            <span class="grey">计划结束时间：</span><span class="blue">{{ item.endTime }}</span>
          </div>
          <div class="delay orange" v-if="item.deferreddays > 0">已延期 {{ item.deferreddays }} 天</div>
        </div>
      </vue-scroll>
      <div v-else class="empty" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">
        <img src="@/assets/images/noData3.png">
        <div style="text-align: center;color: #5b626b;font-size: 14px;">暂无数据</div>
      </div>
    </div>
  </Card>
</template>

<script>
import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
import { mapState } from 'vuex'

import Card from '../components/Card.vue'
export default {
  components: { Card },
  data() {
    return {
      // 激活的tab
      activeTab: 0,
      // 待办事项列表
      todoList: [],
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapState(['projectSn'])
  },
  methods: {
    /** 查询待办事项列表 */
    getList() {
      if (this.activeTab == 0) {
        listProgressOfTheTask({ projectSn: this.projectSn, state: 1 }).then(res => {
          console.log('查询待办事项列表: ', res);
          this.todoList = res.result;
        })
      } else {
        listProgressOfTheTask({ projectSn: this.projectSn, state: 0 }).then(res => {
          console.log('查询未来提醒列表: ', res);
          this.todoList = res.result;
        })
      }
    },
    /** tab点击事件 */
    handleTabClick(index) {
      if (this.activeTab == index) return
      this.activeTab = index;
      this.getList()
    },
  },
}
</script>

<style lang="less" scoped>
.tabs {
  display: flex;
  color: #fff;
  .tab {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    &.checked {
      color: #2de1fa;
    }
  }
}
.list {
  padding-left: 20px;
  height: calc(100% - 40px);
  color: #fff;
  .list-item {
    &:not(:last-child) {
      margin-bottom: 30px;
    }
    div {
      &:not(:first-child) {
        font-size: 12px;
        margin-top: 6px;
      }
    }
  }
}

.grey {
  color: #ccc;
}
.blue {
  color: #2de1fa;
}
.orange {
  color: #f56c36;
}
</style>
