<template>
  <div>
    <el-card style="margin-top: 10px;">
      <div>
        <div style="display: inline;float: left">
          <h3>项目名称:{{ projectName }}</h3>
        </div>
        <div style="float: right">
          <el-button size="small" style="margin-left: 10px" type="primary" :loading="searchBtnLoading" @click="search">
            查询
          </el-button>
          <el-button size="small" type="primary" @click="cancel(true)">返回</el-button>
        </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="160"/>
          <el-table-column label="任务名称" prop="name" align="center" width="150"/>
          <el-table-column label="类型" prop="typeName" align="center" width="100"></el-table-column>
          <el-table-column label="状态" prop="statusName" align="center" width="100"/>
          <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" width="100">
            <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" width="100"/>
          <el-table-column label="开始时间" prop="beginTimeStr" align="center" width="150"/>
          <el-table-column label="完成时间" prop="completeTimeStr" align="center" width="150"/>
          <el-table-column label="到期时间" prop="endTimeStr" align="center" width="150"/>
          <el-table-column label="操作" align="center" fixed="right" width="260">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="toMarkPage(scope.row)" v-if="checkPermission(PROJECT_PERMS.mark)">
                打标
              </el-button>
              <el-button size="small" type="text" @click="openDialog(scope.row)" v-if="checkPermission(PROJECT_PERMS.reassign)">
                重新指派
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="打标人账号" prop="markUserAccount" align="center" width="100"/>
        </el-table>
        <el-pagination
          class="pagination"
          background
          :current-page.sync="pageNum"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="changePage"
        />
      </div>
    </el-card>
    <el-dialog :close-on-click-modal="false" title="重新指派" :visible.sync="reassignVisible" width="600px">
      <h3>任务名称: {{ taskDetail.name }}</h3>
<!--      <div style="margin-top:10px">类型:{{ taskDetail.typeName }}</div>-->
<!--      <div style="margin-top:10px">状态:{{ taskDetail.statusName }}</div>-->
<!--      <div style="margin-top:10px">总数:{{ taskDetail.totalNum }}</div>-->
<!--      <div style="margin-top:10px">已完成:{{ taskDetail.markedNum }}</div>-->
<!--      <div style="margin-top:10px">未完成:{{ taskDetail.totalNum - taskDetail.markedNum }}</div>-->
<!--      <div style="margin-top:10px">存疑:{{ taskDetail.problemNum }}</div>-->
<!--      <div style="margin-top:10px">忽略:{{ taskDetail.ignoreNum }}</div>-->
<!--      <div style="margin-top:10px">原标注员:{{ taskDetail.markUserName }}</div>-->
<!--      <div style="margin-top:10px">原有效期:{{ taskDetail.validTimeStr }}</div>-->
      <el-form label-position="left" label-width="120px" style="margin-top: 20px">
        <el-form-item label="类型:">{{ taskDetail.typeName }}</el-form-item>
        <el-form-item label="状态:">{{ taskDetail.statusName }}</el-form-item>
        <el-form-item label="总数:">{{ taskDetail.totalNum }}</el-form-item>
        <el-form-item label="已完成:">{{ taskDetail.markedNum }}</el-form-item>
        <el-form-item label="未完成:">{{ taskDetail.totalNum - taskDetail.markedNum}}</el-form-item>
        <el-form-item label="存疑:">{{ taskDetail.ignoreNum }}</el-form-item>
        <el-form-item label="忽略:">{{ taskDetail.typeName }}</el-form-item>
        <el-form-item label="原标注员:">{{ taskDetail.markUserName }}</el-form-item>
        <el-form-item label="原有效期:">{{ taskDetail.validTimeStr }}</el-form-item>
        <el-form-item label="重新指派打标人:">
          <el-select v-model="assignForm.markUserId" style="width: 300px;margin-left: 5px;" size="small"
                     class="user-search-input" clearable filterable placeholder="请选择标注员">
            <el-option
              v-for="item in markPersonList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="有效时间:">
          <el-date-picker
            style="width: 300px;margin-left: 5px;"
            v-model="validTimeRange"
            :editable="false"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>
        <div class="block" style="height: 200px;text-align: center;margin-top: 10px">
          <el-button type="primary" :loading="addLoading" @click="savaReassign">保存</el-button>
          <el-button @click="closeDialog(0)">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getTaskPage, reAssignTask, getProjectById} from "@/api/project";
import {getMarkPersonList} from "@/api/system/user";
import moment from "moment";
import {PROJECT_PERMS} from "@/permission/permission-project";
import permissionMixin from '../../mixins/permission-mixin'
export default {
  mixins: [permissionMixin],
  name: "ProjectTaskPage",
  data() {
    return {
      PROJECT_PERMS,
      projectId: null,
      projectName: '',
      searchBtnLoading: false,
      addLoading: false,
      reassignVisible: false,
      taskPage: [],
      pageNum: 1,
      total: 0,
      assignForm: {
        projectId: null,
        taskId: null,
        markUserId: null,
        beginTime: null,
        endTime: null
      },
      taskDetail: {
        name: '',
        typeName: '',
        statusName: '',
        totalNum: null,
        markedNum: null,
        problemNum: null,
        ignoreNum: null,
        markUserName: '',
        validTimeStr: ''
      },
      markPersonList: [],
      validTimeRange: []
    }
  },
  mounted() {
    this.projectId = this.$route.params.projectId;
    this.fetchTaskPage(1)
    this.fetchMarkPerson()
    this.fetchProjectBaseInfo(this.projectId)
  },
  methods: {
    search(){
      this.fetchTaskPage(1)
    },
    fetchProjectBaseInfo(projectId) {
      getProjectById(projectId).then(res => {
        this.projectName = res.result.projectName
      },err=>{

      })
    },
    //查询待选标注员
    fetchMarkPerson() {
      getMarkPersonList(0).then(res => {
        this.markPersonList = res.result
      })
    },
    changePage(page) {
      this.fetchTaskPage(page)
    },
    //查询任务列表
    fetchTaskPage(page) {
      this.searchBtnLoading = true
      getTaskPage(this.projectId, page).then(res => {
        this.taskPage = res.result.result
        this.total = Number(res.result.total)
        this.searchBtnLoading = false
      }, err => {
        this.searchBtnLoading = false
      })
    },
    openDialog(row) {
      this.assignForm = {
        projectId: this.projectId,
        taskId: row.taskId,
        markUserId: null,
        beginTime: null,
        endTime: null
      }
      this.taskDetail = {
        name: row.name,
        typeName: row.typeName,
        statusName: row.statusName,
        totalNum: row.totalNum,
        markedNum: row.markedNum,
        problemNum: row.problemNum,
        ignoreNum: row.ignoreNum,
        markUserName: row.markUserName,
        validTimeStr: row.validTimeStr
      }
      this.reassignVisible = true
    },
    cancel(val) {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$router.push({name: 'ProjectManagement', params: {flush: val}})
      })
    },
    closeDialog(type) {
      if (type == 0) {
        this.assignForm = {
          projectId: null,
          taskId: null,
          markUserId: null,
          beginTime: null,
          endTime: null
        }
        this.taskDetail = {
          name: '',
          typeName: '',
          statusName: '',
          totalNum: null,
          markedNum: null,
          problemNum: null,
          ignoreNum: null,
          markUserName: '',
          validTimeStr: ''
        }
        this.validTimeRange = []
        this.reassignVisible = false
      }
    },
    savaReassign() {
      this.addLoading = true
      if (this.assignForm.markUserId == null || this.assignForm.markUserId == '') {
        this.$message.error('请选择打标人')
        this.addLoading = false
        return false
      }
      if (this.validTimeRange == null || this.validTimeRange == [] || this.validTimeRange.length < 2) {
        this.$message.error('请选择有效期')
        this.addLoading = false
        return false
      }
      this.assignForm.beginTime = moment(this.validTimeRange[0]).format('yyyy-MM-DD 00:00:00');
      this.assignForm.endTime = moment(this.validTimeRange[1]).format('yyyy-MM-DD 23:59:59');
      reAssignTask(this.assignForm).then(res => {
        this.$message.success('重新指派成功')
        this.fetchTaskPage(1)
        this.addLoading = false
        this.closeDialog(0)
      }, err => {
        this.addLoading = false
      })
    },
    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>

.el-form-item{
  margin-bottom: 3px;
}
</style>
