<template>
  <div class="work-task">
    <ai-top-fixed>
      <u-tabs :list="tabs" height="88" bar-width="136" :current="index" @change="change"></u-tabs>
    </ai-top-fixed>
    <div class="list" v-if="list.length">
      <div class="card" v-for="(item,index) in list" :key="index" @click="handleClick(item)">
        <header>{{ item.taskTitle }}</header>
        <u-gap height="24"></u-gap>
        <u-row>
          <text>任务类型：</text>
          <text>{{ $dict.getLabel("workTaskType", item.type) }}</text>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <text>截止时间：</text>
          <text>{{ item.lastTime }}</text>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <text>剩余时间：</text>
          <text :style="{color:item.isOverTime==1?'#FF4466':'#1365DD'}">{{ item.overTimeStatus }}</text>
        </u-row>
        <u-gap height="24"></u-gap>
        <span>已完成{{ item.percent }}%</span>
        <u-gap height="16"></u-gap>
        <div class="progress">
          <div class="active" :style="{width: item.percent + '%'}"></div>
        </div>
        <img :src="$cdn + tag(item.status)" alt="">
      </div>
    </div>
    <AiEmpty v-else></AiEmpty>
    <u-loadmore :status="status" v-if="list.length"/>
    <ai-add @add="add"></ai-add>
  </div>
</template>

<script>
import AiTopFixed from "../../components/AiTopFixed";
import AiAdd from "../../components/AiAdd";
import AiEmpty from "../../components/AiEmpty";

export default {
  name: "workTask",
  components: {AiTopFixed, AiAdd, AiEmpty},
  data() {
    return {
      index: 0,
      current: 1,
      list: [],
      status: "加载更多",
      userSelect: false,
    }
  },
  computed: {
    tabs() {
      return [
        {name: "我执行的"},
        {name: "我完成的"},
        {name: "我发起的"},
        {name: "我督办的"},
        {name: "抄送我的"},
      ]
    },
  },

  onLoad() {
    this.$dict.load("workTaskType")
  },

  methods: {
    tag(status) {
      return {
        "0": "common/1jxz.png",
        "1": "common/1ywc.png",
        "2": "common/1ygb.png"
      }[status]
    },
    handleClick(item) {
      uni.navigateTo({
        url: "/pages/workTask/components/detail?id=" + item.id + "&taskCode=" + item.taskCode + "&isMine=" + this.index
      })
    },
    add() {
      uni.navigateTo({
        url: "/pages/workTask/components/create"
      })
    },

    change(e) {
      this.index = e
      this.current = 1
      this.getList()

    },

    map(index) {
      return {
        "0": {
          taskRole: 1,
          status: 0,
        },
        "1": {
          taskRole: 1,
          status: 1,
        },
        "2": {
          taskRole: 0,
        },
        "3": {
          taskRole: 2,
        },
        "4": {
          taskRole: 3,
        }
      }[index]
    },

    getList() {
      this.$http.post("/app/appworktaskinfo/list", null, {
        params: {
          ...this.map(this.index),
          size: 10,
          current: this.current
        }
      }).then(res => {
        if (res && res.data) {
          if (this.current > 1 && this.current > res.data.pages) {
            this.status = "已经到底啦"
          }
          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
        }
      })
    }
  },

  onReachBottom() {
    this.current = this.current + 1;
    this.getList()
  },

  onShow() {
    uni.pageScrollTo({
      duration: 0,
      scrollTop: 0
    })
    this.current = 1
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.work-task {
  min-height: 100%;
  background-color: #F5F5F5;
  padding-bottom: 32px;

  ::v-deep .content {
    padding: 0;
  }

  .list {
    box-sizing: border-box;
    padding: 32px 32px 0 32px;

    .card {
      background: #FFFFFF;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 32px;
      position: relative;
      margin-bottom: 32px;

      & > header {
        font-size: 32px;
        font-weight: 600;
        color: #333333;
      }

      & > .u-row {
        text {
          font-size: 30px;
          color: #999999;
          line-height: 42px;
        }
      }

      & > span {
        font-size: 26px;
        color: #649EFD;
      }

      .progress {
        width: 100%;
        height: 4px;
        background: #F0F1F2;
        border-radius: 2px;
        position: relative;

        .active {
          position: absolute;
          left: 0;
          top: 0;
          height: 4px;
          background: #639EFD;
          border-radius: 2px;
        }
      }

      & > img {
        width: 112px;
        height: 112px;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
</style>
