<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-input
            v-model="queryForm.projectNameOrId"
            clearable
            size="small"
            style="width: 250px;margin-left: 5px;"
            placeholder="请输入项目名称或项目ID"
          />
        </el-form-item>
        <el-form-item label="所属项目组:">
          <SelectTree
            width="70"
            placeholder="请选择"
            v-model="queryForm.groupId"
            :options="groupTree"
            :props="groupProps"
          ></SelectTree>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select v-model="queryForm.type" style="width: 130px;margin-left: 5px;" size="small"
                     class="user-search-input" filterable placeholder="">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="完成时间:">
          <el-date-picker
            v-model="queryForm.completeBeginTime"
            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.completeEndTime"
            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 label="单页数量:">-->
<!--          <el-radio-group v-model="pageRadio" @change="changeRadio(pageRadio)">-->
<!--            <el-radio label="0">10条</el-radio>-->
<!--            <el-radio label="1">20条</el-radio>-->
<!--            <el-radio label="2">50条</el-radio>-->
<!--            <el-radio label="3">100条</el-radio>-->
<!--            <el-radio label="4">200条</el-radio>-->
<!--            <el-radio label="5">1条</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button size="small" style="margin-left: 10px" type="primary" :loading="searchBtnLoading" @click="search">
            查询
          </el-button>
          <el-button size="small" style="margin-left: 10px" type="primary" :loading="searchBtnLoading"
                     @click="exportVisible=true">
            导出
          </el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <el-card style="margin-top: 10px;">
      <div style="margin-top: 50px">
        <el-table
          v-loading="searchBtnLoading"
          size="small"
          :data="taskPage"
          border
          fit
          highlight-current-row
          ref="taskTable"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="任务ID" prop="taskId" align="center" min-width="120"/>
          <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="totalNum" align="center" min-width="80"/>
          <el-table-column label="忽略" prop="ignoreNum" align="center" min-width="80"/>
          <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="所属项目ID" prop="projectId" align="center" min-width="120"/>
          <el-table-column label="所属项目名称" prop="projectName" align="center" min-width="150"/>
          <el-table-column label="所属项目组" prop="projectGroup" align="center" min-width="150"/>
          <el-table-column label="完成时间" prop="completeTimeStr" align="center" min-width="100"/>
        </el-table>
<!--        <el-pagination-->
<!--          class="pagination"-->
<!--          background-->
<!--          :current-page.sync="queryForm.pageNum"-->
<!--          :page-size="queryForm.pageSize"-->
<!--          layout="total, prev, pager, next"-->
<!--          :total="total"-->
<!--          @current-change="changePage"-->
<!--        />-->
      </div>
    </el-card>

    <el-dialog :close-on-click-modal="false" title="导出" :visible.sync="exportVisible" width="600px">
      <el-form label-position="left" label-width="120px" style="margin-top: 20px;height: 200px">
        <el-form-item label="导出条件:">
          <el-checkbox label="含正常分类结果" v-model="exportForm.hasCommon"/>
          <br/>
          <el-checkbox label="含存疑" v-model="exportForm.hasProblem"/>
          <br/>
          <el-checkbox label="含忽略" v-model="exportForm.hasIgnore"></el-checkbox>
        </el-form-item>
        <div class="block" style="height: 200px;text-align: center">
          <el-button type="primary" :loading="addLoading" @click="exportResult">导出</el-button>
          <el-button @click="closeDialog(0)">取消</el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import {getMarkResultPage, exportMarkResultJson, getGroupTree} from "@/api/project";
import SelectTree from "@/components/SelectTree";

export default {
  name: "MarkResultPage",
  components:{SelectTree},
  data() {
    return {
      projectId: null,
      projectName: '',
      searchBtnLoading: false,
      exportVisible: false,
      pageRadio: '0',
      addLoading: false,
      reassignVisible: false,
      taskPage: [],
      total: 0,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        nameOrId: '',
        projectNameOrId: '',
        status: 100,
        type: 100,
        hasProblem: 100,
        validBeginTime: null,
        completeBeginTime: null,
        completeEndTime: null,
        validEndTime: null
      },
      typeList: [
        {value: 100, label: '全部'},
        {value: 0, label: '文本'},
        {value: 1, label: '图片'},
        {value: 2, label: '视频'}
      ],
      groupTree: [],
      groupProps: {
        value: "value",
        label: "label",
        children: "children",
      },
      multipleSelection: [],
      exportForm: {
        hasCommon: true,
        hasProblem: true,
        hasIgnore: true,
        taskIds: []
      }
    }
  },
  mounted() {
    this.queryForm.pageNum = 1
    this.fetchGroupTree()
    this.fetchTaskPage(this.queryForm)
  },
  methods: {
    //查询树结构
    fetchGroupTree() {
      this.treeLoading = true
      getGroupTree().then(res => {
        this.groupTree = res.result
        this.treeLoading = false
      }, err => {
        this.treeLoading = false
      })
    },
    changeRadio(value) {
      if (value == '0') {
        this.queryForm.pageSize = 10
      } else if (value == '1') {
        this.queryForm.pageSize = 20
      } else if (value == '2') {
        this.queryForm.pageSize = 50
      } else if (value == '3') {
        this.queryForm.pageSize = 100
      } else if (value == '4') {
        this.queryForm.pageSize = 200
      } else if (value == '5') {
        this.queryForm.pageSize = 1
      } else {
        this.queryForm.pageSize = 10
      }
      this.changePage(1)
    },
    search() {
      this.queryForm.pageNum = 1
      this.fetchTaskPage(this.queryForm)
    },
    changePage(page) {
      this.queryForm.pageNum = page
      this.fetchTaskPage(this.queryForm)
    },
    //查询任务列表
    fetchTaskPage(queryForm) {
      this.searchBtnLoading = true
      getMarkResultPage(queryForm).then(res => {
        this.taskPage = res.result.result
        this.total = Number(res.result.total)
        this.searchBtnLoading = false
      }, err => {
        this.searchBtnLoading = false
      })
    },
    getColor(status) {
      if (status == 0) {
        return '409EFF'
      } else if (status == 1) {
        return 'orange'
      } else if (status == 2) {
        return '#67C23A'
      } else {
        return '#909399'
      }
    },
    exportResult() {
      this.addLoading = true
      if (this.multipleSelection.length < 1) {
        this.$message.error('请选择需要导出的数据')
        this.addLoading = false
        return false
      }
      if (!this.exportForm.hasCommon && !this.exportForm.hasProblem && !this.exportForm.hasIgnore) {
        this.$message.error('请选择导出条件')
        this.addLoading = false
        return false
      }
      this.exportForm.taskIds = []
      this.multipleSelection.forEach(item => {
        this.exportForm.taskIds.push(item.taskId)
      })
      exportMarkResultJson(this.exportForm).then(res => {
        this.$message.success('导出成功')
        this.addLoading = false
        this.closeDialog(0)
      }, err => {
        this.addLoading = false

      })
    },
    closeDialog(type) {
      if (type == 0) {
        this.exportForm = {
          hasCommon: true,
          hasProblem: true,
          hasIgnore: true
        }
        this.exportVisible = false
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.taskTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.taskTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style scoped>

</style>
