<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="项目组:">
          <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.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-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 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-date-picker
            v-model="queryForm.assignBeginTime"
            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.assignEndTime"
            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-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 type="primary" size="small" @click="toGroupPage" v-if="checkPermission(PROJECT_PERMS.addGroup)">
            项目分组维护
          </el-button>
          <el-button type="primary" size="small" @click="toAddProjectPage"
                     v-if="checkPermission(PROJECT_PERMS.addProject)">新增项目
          </el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <el-card style="margin-top: 10px;">

      <el-table
        v-loading="searchBtnLoading"
        size="small"
        :data="projectPage"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="项目ID" prop="projectId" align="center" min-width="100"/>
        <el-table-column label="项目名称" prop="name" align="center" min-width="100"/>
        <el-table-column label="所属任务组" prop="groupName" align="center" min-width="100"></el-table-column>
        <el-table-column label="状态" prop="statusText" align="center" min-width="100"/>
        <el-table-column label="分配时间" prop="assignTimeStr" align="center" min-width="100"/>
        <el-table-column label="完成时间" prop="completeTimeStr" align="center" min-width="100"/>
        <el-table-column label="有效期" prop="validTimeStr" align="center" width="145"/>
        <el-table-column label="存疑数量" prop="problemNum" 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="toDetailPage(scope.row.projectId,scope.row.name)">
              查看
            </el-button>
            <el-button size="small" type="text" @click="toEditPage(scope.row.projectId)"
                       v-if="checkPermission(PROJECT_PERMS.deleteProject) && scope.row.status == 2">
              修改
            </el-button>
            <el-button size="small" type="text" @click="deleteProject(scope.row.projectId,scope.row.name)"
                       v-if="checkPermission(PROJECT_PERMS.deleteProject) && scope.row.status == 2" >
              删除
            </el-button>
            <el-button size="small"
                       v-if="checkPermission(PROJECT_PERMS.check)&&(scope.row.status == 5||scope.row.status == 7)"
                       type="text" @click="toSamplePage(scope.row.projectId)">
              验证
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        :page-size="queryForm.pageSize"
        :current-page.sync="queryForm.pageNum"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="changePage"
      />
    </el-card>


  </div>
</template>

<script>
import {deleteProject, getGroupTree, getProjectPage} from "@/api/project";
import SelectTree from "@/components/SelectTree";
import {PROJECT_PERMS} from "@/permission/permission-project";
import permissionMixin from '../../mixins/permission-mixin'

export default {
  mixins: [permissionMixin],
  name: "ProjectManagement",
  components: {
    SelectTree
  },
  data() {
    return {
      PROJECT_PERMS,
      pageRadio: '0',
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        nameOrId: '',
        groupId: null,
        status: 100,
        validBeginTime: null,
        validEndTime: null,
        completeBeginTime: null,
        completeEndTime: null,
        assignBeginTime: null,
        assignEndTime: null
      },
      total: 0,
      statusList: [
        {value: 100, label: '全部'},
        {value: 2, label: '待分配'},
        {value: 3, label: '已分配'},
        {value: 4, label: '已开始'},
        {value: 5, label: '已完成'},
        {value: 6, label: '部分过期'},
        {value: 7, label: '已验证'}
      ],
      searchBtnLoading: false,
      projectPage: [],
      groupTree: [],
      groupProps: {
        value: "value",
        label: "label",
        children: "children",
      },

    }
  },
  mounted() {
    this.search()
    this.fetchGroupTree()
  },
  methods: {
    //查询树结构
    fetchGroupTree() {
      this.treeLoading = true
      getGroupTree().then(res => {
        this.groupTree = res.result
        this.treeLoading = false
      }, err => {
        this.treeLoading = false
      })
    },
    search() {
      this.queryForm.pageNum = 1
      this.fetchProjectPage(this.queryForm)
    },
    changePage(page) {
      this.queryForm.pageNum = page
      this.fetchProjectPage(this.queryForm)
    },
    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 {
        this.queryForm.pageSize = 10
      }
    },
    //查询项目列表
    fetchProjectPage(queryForm) {
      this.searchBtnLoading = true
      getProjectPage(queryForm).then(res => {
        this.projectPage = res.result.result
        this.total = Number(res.result.total)
        this.searchBtnLoading = false
      }, err => {
        this.searchBtnLoading = false
      })
    },
    //跳转到分组页面
    toGroupPage() {
      this.$router.push({name: `ProjectGroupManagement`, params: {flush: true}})
    },
    //跳转到新增项目页面
    toAddProjectPage() {
      this.$router.push({name: `AddProjectPage`, params: {flush: true}})
    },
    //跳转到详情页面
    toDetailPage(projectId, name) {
      this.$router.push({name: `ProjectTaskPage`, params: {flush: true, projectId: projectId, projectName: name}})
    },
    //跳转到编辑页面
    toEditPage(projectId) {
      this.$router.push({name: `EditProjectPage`, params: {flush: true, projectId: projectId}})
    },
    //跳转到抽样任务页面
    toSamplePage(projectId) {
      this.$router.push({name: `SampleTaskPage`, params: {flush: true, projectId: projectId}})
    },
    //删除项目
    deleteProject(id, name) {
      this.$confirm('确认删除项目吗?', '提示', {type: 'error'}).then(() => {
        deleteProject(id).then(res => {
          this.$message.success('删除成功')
          this.queryForm.pageNum = 1
          this.fetchProjectPage(this.queryForm)
        }, err => {

        })
      }, () => {
      })

    }
  }
}
</script>

<style scoped>

</style>
