<template>
  <div class="course-training-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <p class="course-p">地区：{{ queryData.region }}</p>
      <p class="course-p">选择机构：{{ queryData.organization }}</p>
      <el-form
        class="form-update"
        ref="serchForm"
        :model="formData"
        label-width="100px"
        style="width:40%;"
      >
        <el-form-item v-if="tableType == 1" label="课程完成状态:">
          <el-select
            v-model="formData.learnFlag"
            size="small"
            style="width: 100%;"
            placeholder="请选择状态"
          >
            <el-option
              v-for="(item,index) in statusList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="tableType == 2" label="考试成绩等级:">
          <el-select v-model="formData.gradeFlag" size="small" style="width: 100%;" placeholder="请选择状态">
            <el-option
              v-for="(item,index) in rankList"
              :key="index"
              :label="item.gradeName"
              :value="item.gradeFlag"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询姓名:  ">
          <el-input size="small" placeholder="查询姓名" v-model="formData.doctorName"></el-input>
        </el-form-item>
      </el-form>
      <div class="form-button">
        <el-button @click="searchData()" type="primary">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </div>
      <el-table :data="tableData" class="course-table">
        <el-table-column prop="doctorName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="doctorSex" label="性别" align="center"></el-table-column>
        <el-table-column prop="doctorAge" label="年龄" align="center"></el-table-column>
        <el-table-column prop="doctorTitle" label="职称" align="center"></el-table-column>
        <el-table-column prop="hospitalName" label="机构" align="center"></el-table-column>
        <el-table-column prop="countyName" label="地区" align="center"></el-table-column>
        <el-table-column v-if="tableType == 1" prop="learnStatus" label="参与课程状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.learnStatus | joinStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="tableType == 1"
          prop="finishedTime"
          label="完成培训日期"
          align="center"
          min-width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.finishedTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="tableType == 2"
          prop="passTime"
          label="通过考试日期"
          min-width="150"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.passTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="tableType == 2"
          prop="gradeName"
          label="考试成绩等级"
          min-width="80"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.gradeName }}</span>
          </template>
        </el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png">
            <p>没有相关数据，请重新选择查询范围</p>
          </div>
        </div>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formData.pageNo"
          :page-sizes="[10, 30, 50]"
          :page-size="formData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  props: {
    formInline: {
      type: Object
    }
  },
  data() {
    return {
      curmbFirst: "学情报告",
      curmbSecond: "项目管理",
      formData: {
        doctorName: "",
        learnFlag: -1,
        gradeFlag: 1,
        pageNo: 1,
        pageSize: 10,
      },
      region: "",
      organization: "",
      tableData: [],
      tableType: 1,
      totalRows: 0,
      statusList: [
        {
          value: -1,
          label: "全部"
        },
        {
          value: 0,
          label: "未参与"
        },
        {
          value: 1,
          label: "参与中"
        },
        {
          value: 2,
          label: "已完成"
        }
      ],
      rankList: [],
      queryData: {}
    };
  },
  // computed: {
  //   ...mapGetters([
  //     "_token",
  //   ])
  // },
  created() {
    vm = this;
    vm.getInitData();
    vm.search();
  },
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    getHostital() {
      let req = {
        projectId: vm.queryData.projectId,
        hospitalIds: vm.queryData.ids,
      };
      vm.reportGET("report/portal/getHostitalName", req).then(res => {
        if (res.code == "000000") {
        }
      });
    },
    getInitData() {
      vm.queryData = this.$route.query;
      vm.tableType = vm.queryData.tableType;
      console.log("queryData", vm.queryData);
      if(vm.queryData.type == 4) {
        vm.getHostital();
      }
    },
    searchData() {
      vm.formData.pageNo = 1;
      vm.search();
    },
    search() {
      let query = this.queryData;
      if (this.tableType == 1) {
        //课程分析
        // console.log('this.tableType',this.tableType)
        let req = {
          projectId: query.projectId,
          originalFlag: query.originalFlag,
          ids: query.ids,
          type: query.type,
          courseId: query.courseId,
          learnFlag: vm.formData.learnFlag,
          doctorName: vm.formData.doctorName,
          pageNo: vm.formData.pageNo,
          pageSize: vm.formData.pageSize,
        };
        console.log("course req", req);
        openLoading(vm);
        vm.reportGET("report/portalProjectCourse/getUserList", req).then(res => {
          closeLoading(vm);
          if (res.code == "000000") {
            vm.tableData = res.data.list;
            vm.totalRows = res.data.totalCount;
          }
        });
      } else if (this.tableType == 2) {
        //考试分析
        let reqRank = {
          projectId: query.projectId,
        }
        vm.reportGET("report/portalProjectExam/getGradeList", reqRank).then(res => {
          if (res.code == "000000") {
            vm.rankList = res.data.list;
          }
        });
        let req = {
          projectId: query.projectId,
          originalFlag: query.originalFlag,
          ids: query.ids,
          type: query.type,
          examId: query.examId,
          gradeFlag: vm.formData.gradeFlag,
          doctorName: vm.formData.doctorName,
          pageNo: vm.formData.pageNo,
          pageSize: vm.formData.pageSize,
        };
        console.log("exam req", req);
        openLoading(vm);
        vm.reportGET("report/portalProjectExam/getUserList", req).then(res => {
          closeLoading(vm);
          if (res.code == "000000") {
            vm.tableData = res.data.list;
            vm.totalRows = res.data.totalCount;
          }
        });
      }
    },
    resetForm() {
      vm.formData = Object.assign(
        {},
        {
          name: "",
          status: "",
          pageNo: 1,
          pageSize: 10
        }
      );
      vm.search();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formData.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formData.pageNo = val;
      this.search();
    }
  }
};
</script>
<style lang="scss">
.course-training-wrap {
  .component-content {
    background: #fff;
    padding: 10px;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .course-p {
      margin: 30px 0 20px 30px;
      font-size: 13px;
      color: #606266;
    }
    .form-update {
      margin: 30px 0px 0px 20px;
    }
    .form-button {
      width: 45%;
      top: -62px;
      position: relative;
      left: 50%;
    }
  }
}
</style>