<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" min-width="150"/>
          <el-table-column label="任务名称" prop="name" align="center" min-width="150"/>
          <el-table-column label="类型" prop="typeName" align="center" min-width="100"></el-table-column>
          <el-table-column label="状态" prop="statusName" align="center" min-width="100"/>
          <el-table-column label="总数" prop="totalNum" align="center" min-width="100"/>
          <el-table-column label="存疑" prop="problemNum" align="center" min-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" min-width="100"/>
          <el-table-column label="打标人账号" prop="markUserAccount" align="center" min-width="100"/>
          <el-table-column label="完成时间" prop="completeTimeStr" align="center" min-width="150"/>
          <el-table-column label="抽样总数" prop="totalSampleNum" align="center" min-width="100"/>
          <el-table-column label="验证成功" prop="successNum" align="center" min-width="100"/>
          <el-table-column label="验证失败" prop="failedNum" align="center" min-width="100"/>
          <el-table-column label="抽样成功率" prop="successRate" align="center" min-width="100"/>
          <el-table-column label="操作" align="center" fixed="right" width="260">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="openDialog(scope.row)">
                抽样验证
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          background
          :current-page.sync="pageNum"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="changePage"
        />
        <div class="block" style="height: 200px;text-align: center">
          <el-button type="primary" :loading="addLoading" @click="verifyProject">验证完成</el-button>
        </div>
      </div>
    </el-card>
    <el-dialog :close-on-click-modal="false" title="抽样验证" :visible.sync="sampleVisible" width="600px">
      <el-form label-position="left" label-width="150px" style="margin-top: 20px;height: 100px">
        <el-form-item label="设置抽样数量:">
          <el-input-number v-model="sampleForm.sampleNum" placeholder="请填写抽样数量"></el-input-number>
        </el-form-item>
        <div class="block" style="height: 200px;text-align: center">
          <el-button type="primary" :loading="addLoading" @click="savaSample">保存</el-button>
          <el-button @click="closeDialog(0)">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getProjectById, getTaskPage, verifyProject} from "@/api/project";

export default {
  name: "SampleTaskPage",
  data() {
    return {
      projectId: null,
      projectName: '',
      searchBtnLoading: false,
      addLoading: false,
      sampleVisible: false,
      taskPage: [],
      pageNum: 1,
      total: 0,
      sampleForm: {
        taskId: null,
        sampleNum: null
      },
    }
  },
  mounted() {
    this.projectId = this.$route.params.projectId;
    this.fetchTaskPage(1)
    this.fetchProjectBaseInfo(this.projectId)
  },
  methods: {
    search() {
      this.fetchTaskPage(1)
    },
    fetchProjectBaseInfo(projectId) {
      getProjectById(projectId).then(res => {
        this.projectName = res.result.projectName
      }, err => {

      })
    },
    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.sampleForm = {
        taskId: row.taskId,
        sampleNum: null
      }
      this.sampleVisible = 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.sampleForm = {
          taskId: null,
          sampleNum: null
        }
        this.sampleVisible = false
      }
    },
    savaSample() {
      if (this.sampleForm.sampleNum == null || this.sampleForm.sampleNum == '') {
        this.$message.error('请填写抽样数量')
        this.addLoading = false
        return false
      }
      let reg = /^[1-9]\d*$/
      if (!(reg.test(this.sampleForm.sampleNum))) {
        this.$message.error("请填写正确数量（正整数）");
        return false
      }
      this.toSampleMarkPage(this.sampleForm.taskId, this.sampleForm.sampleNum)
      this.closeDialog(0)

    },
    toSampleMarkPage(taskId, sampleNum) {
      this.$router.push({
        name: `SampleMarkPage`,
        params: {flush: true, taskId: taskId, sampleNum: sampleNum}
      })
    },
    verifyProject() {
      this.$confirm('确认项目验证完成吗?', '提示', {type: 'error'}).then(() => {
        this.addLoading = true
        verifyProject(this.projectId).then(res => {
          this.addLoading = false
          this.$message.success('项目验证完成')
        }, err => {
          this.addLoading = false
        })
      }, () => {
      })

    }
  }
}
</script>

<style scoped>

</style>
