<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="任务:">
          <el-input
            v-model="queryForm.nameOrId"
            clearable
            size="small"
            style="width: 250px;margin-left: 5px;"
            placeholder="请输入任务名称或项目ID"
          />
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="queryForm.status" style="width: 130px;margin-left: 5px;" size="small"
                     class="user-search-input" filterable placeholder="请选择状态">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="即将到期:">
          <el-select v-model="queryForm.expiredDays" style="width: 130px;margin-left: 5px;" size="small"
                     class="user-search-input" filterable placeholder="">
            <el-option
              v-for="item in expiredList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="存疑:">
          <el-select v-model="queryForm.hasProblem" style="width: 130px;margin-left: 5px;" size="small"
                     class="user-search-input" filterable placeholder="">
            <el-option
              v-for="item in hasProblemList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="有效期:">
          <el-date-picker
            v-model="queryForm.validBeginTime"
            type="date"
            placeholder="开始时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 00:00:00"
            class="user-search-input"
          >
          </el-date-picker>
          <span>---</span>
          <el-date-picker
            v-model="queryForm.validEndTime"
            type="date"
            placeholder="结束时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 23:59:59"
            class="user-search-input"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" style="margin-left: 10px" type="primary" :loading="searchBtnLoading" @click="search">
            查询
          </el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <el-card style="margin-top: 10px;">
      <div>
        <div style="float: left">
          <h3>待完成 {{ notCompleteNum }} 项, 5日内将过期 {{ expiredSoonNum }} 项</h3>
        </div>
      </div>
      <div style="margin-top: 50px">
        <HR/>
      </div>
      <div style="margin-top: 50px">
        <el-table
          v-loading="searchBtnLoading"
          size="small"
          :data="taskPage"
          border
          fit
          highlight-current-row
        >
          <el-table-column label="任务ID" prop="taskId" align="center" width="150"/>
          <el-table-column label="任务名称" prop="name" align="center" min-width="150"/>
          <el-table-column label="类型" prop="typeName" align="center" min-width="80"></el-table-column>
          <el-table-column label="状态" prop="statusName" align="center" min-width="80"/>
          <el-table-column label="进度" align="center" width="300">
            <template slot-scope="scope">
              <div style="width: 175px;float: left;">
                <el-progress :show-text="false" :percentage="(scope.row.markedNum/scope.row.totalNum)*100"
                             :color="getColor(scope.row.status)"/>
              </div>
              <div style="float:right;width: 100px;margin-right: 0px;">
                <span :style="{color:getColor(scope.row.status)}">({{ scope.row.markedNum }}/{{
                    scope.row.totalNum
                  }})</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="存疑" prop="problemNum" align="center" min-width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.problemNum>0" style="color: orangered">{{ scope.row.problemNum }}</span>
              <span v-else>{{ scope.row.problemNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="忽略" prop="ignoreNum" align="center" min-width="80"/>
          <el-table-column label="开始时间" prop="beginTimeStr" align="center" width="140"/>
          <el-table-column label="完成时间" prop="completeTimeStr" align="center" width="140"/>
          <el-table-column label="到期时间" prop="endTimeStr" align="center" width="140"/>
          <el-table-column label="操作" align="center" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="toMarkPage(scope.row)"
                         v-if="(scope.row.status == 1 || scope.row.status == 2)&&checkPermission(PROJECT_PERMS.mark)">
                打标
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          background
          :current-page.sync="queryForm.pageNum"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="changePage"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {getMyTaskStatistics, getTaskPageByParam} from "@/api/project";
import {PROJECT_PERMS} from "@/permission/permission-project";
import permissionMixin from '../../mixins/permission-mixin'

export default {
  mixins: [permissionMixin],
  name: "MyTaskPage",
  data() {
    return {
      PROJECT_PERMS,
      projectId: null,
      projectName: '',
      searchBtnLoading: false,
      addLoading: false,
      reassignVisible: false,
      taskPage: [],
      total: 0,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        nameOrId: '',
        status: 100,
        expiredDays: 100,
        hasProblem: 100,
        validBeginTime: null,
        validEndTime: null
      },
      statusList: [
        {value: 100, label: '全部'},
        {value: 0, label: '待开始'},
        {value: 1, label: '进行中'},
        {value: 2, label: '已完成'},
        {value: 3, label: '已过期'}
      ],
      expiredList: [
        {value: 100, label: '全部'},
        {value: 1, label: '1日内'},
        {value: 2, label: '2日内'},
        {value: 3, label: '3日内'},
        {value: 4, label: '4日内'},
        {value: 5, label: '5日内'},
        {value: 6, label: '5日以上'}
      ],
      hasProblemList: [
        {value: 100, label: '全部'},
        {value: 1, label: '是'},
        {value: 0, label: '否'}
      ],
      notCompleteNum: 0,
      expiredSoonNum: 0
    }
  },
  mounted() {
    this.queryForm.pageNum = 1
    this.fetchTaskPage(this.queryForm)
    this.fetchTaskStatistics()
  },
  methods: {
    search() {
      this.queryForm.pageNum = 1
      this.fetchTaskPage(this.queryForm)
      this.fetchTaskStatistics()
    },
    changePage(page) {
      this.queryForm.pageNum = page
      this.fetchTaskPage(this.queryForm)
    },
    //查询任务列表
    fetchTaskPage(queryForm) {
      this.searchBtnLoading = true
      getTaskPageByParam(queryForm).then(res => {
        this.taskPage = res.result.result
        this.total = Number(res.result.total)
        this.searchBtnLoading = false
      }, err => {
        this.searchBtnLoading = false
      })
    },
    //查询任务完成情况
    fetchTaskStatistics() {
      getMyTaskStatistics().then(res => {
        this.notCompleteNum = res.result.notCompleteNum
        this.expiredSoonNum = res.result.expiredSoonNum
      })
    },
    toMarkPage(row) {
      this.$router.push({
        name: `MarkPage`,
        params: {flush: true, taskId: row.taskId}
      })
    },
    getColor(status) {
      if (status == 0) {
        return '409EFF'
      } else if (status == 1) {
        return 'orange'
      } else if (status == 2) {
        return '#67C23A'
      } else {
        return '#909399'
      }

    }
  }
}
</script>

<style scoped>

</style>
