<template>
  <div class="name-list-wrap">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
      :curmbThird="curmbThird"
      :curmbFouth="curmbFouth"
      :jumPathThird="jumPathThird"
      :jumPathFouth="jumPathFouth"
    ></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:value="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:value="formData.gradeFlag"
            size="small"
            style="width: 100%"
            placeholder="请选择状态"
          >
            <el-option
              v-for="(item, index) in rankList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询姓名:  ">
          <el-input
            size="small"
            placeholder="查询姓名"
            v-model:value="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">
          <template v-slot="scope">
            <span>{{ $filters.nullOfValue(scope.row.doctorName) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
          <template v-slot="scope">
            <span>{{ $filters.sexValue(scope.row.sex) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center">
          <template v-slot="scope">
            <span>{{ $filters.nullOfValue(scope.row.age) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="titleName" label="职称" align="center">
          <template v-slot="scope">
            <span>{{ $filters.nullOfValue(scope.row.titleName) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="hospitalName"
          label="机构"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="countyName"
          label="区/县"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="townName"
          label="乡镇/街道"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="addressName"
          label="地区"
          align="center"
        ></el-table-column>
        <el-table-column
          v-if="tableType == 1"
          prop="finishFlag"
          label="参与课程状态"
          align="center"
        >
          <template v-slot="scope">
            <span>{{
              $filters.finishFlagType([scope.row.finishFlag, base])
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="tableType == 1"
          prop="finishTime"
          label="完成培训日期"
          align="center"
          min-width="150"
        >
          <template v-slot="scope">
            <span>{{ $filters.nullOfValue(scope.row.finishTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="tableType == 2"
          prop="passTime"
          label="通过考试日期"
          min-width="150"
          align="center"
        >
          <template v-slot="scope">
            <span>{{ $filters.nullOfValue(scope.row.passTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="tableType == 2"
          prop="gradeName"
          label="考试成绩等级"
          min-width="80"
          align="center"
        >
          <template v-slot="scope">
            <span>{{ scope.row.gradeName }}</span>
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div>
            <div class="table-empty">
              <img src="../../assets/image/noData.png" />
            </div>
          </div>
        </template>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formData.pageNo"
          :page-sizes="[20, 50, 100, 200]"
          :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'
import * as operationData from '../../utils/operation'
let vm = null
export default {
  components: {
    BreadCrumb,
  },
  props: {
    formInline: {
      type: Object,
    },
  },
  data() {
    return {
      curmbFirst: '学情报告',
      curmbSecond: '项目管理',
      curmbThird: '',
      curmbFouth: '',
      jumPathThird: '/item-manager',
      jumPathFouth: '',
      formData: {
        doctorName: '',
        learnFlag: -1,
        gradeFlag: -1,
        pageNo: 1,
        pageSize: 20,
      },
      region: '',
      organization: '',
      tableData: [],
      tableType: 1,
      totalRows: 0,
      statusList: [],
      rankList: [
        {
          value: -1,
          label: '全部',
        },
        {
          value: 0,
          label: '无成绩',
        },
        {
          value: 1,
          label: '优秀',
        },
        {
          value: 2,
          label: '良好',
        },
        {
          value: 3,
          label: '及格',
        },
        {
          value: 4,
          label: '不及格',
        },
        {
          value: 5,
          label: '通过',
        },
        {
          value: 6,
          label: '不通过',
        },
      ],
      queryData: {},
      base: null,
    }
  },
  // computed: {
  //   ...mapGetters([
  //     "_token",
  //   ])
  // },
  created() {
    vm = this
    vm.base = vm.getUrlSearch(window.location.href, 'base')
    vm.getInitData()
    vm.search()
    vm.initStatusList()
  },
  mounted: function () {
    commonUtil.resizeHeight()
  },
  methods: {
    initStatusList() {
      if (vm.base == null) {
        vm.statusList = [
          {
            value: -1,
            label: '全部',
          },
          {
            value: 0,
            label: '未参与',
          },
          {
            value: 1,
            label: '未完成',
          },
          {
            value: 2,
            label: '已完成',
          },
        ]
      } else {
        vm.statusList = [
          {
            value: -1,
            label: '全部',
          },
          {
            value: 0,
            label: '未参与',
          },
          {
            value: 1,
            label: '已参与',
          },
        ]
      }
    },
    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
      vm.curmbThird = vm.getUrlSearch(window.location.href, 'projectName')
      vm.jumPathFouth =
        '/item-list?id=' +
        vm.queryData.projectId +
        '&projectName=' +
        vm.queryData.projectName
      console.log('queryData', vm.queryData)
      // if(vm.queryData.hospitalIdList.length > 0) {
      //   vm.getHostital();
      // }
    },
    searchData() {
      vm.formData.pageNo = 1
      vm.search()
    },
    search() {
      let query = this.queryData
      if (this.tableType == 1) {
        vm.curmbFouth = '课程培训情况'
        //课程分析
        // console.log('this.tableType',this.tableType)
        let req = {
          projectId: query.projectId,
          beginDate: query.beginDate,
          endDate: query.endDate,
          hospitalIdList: operationData.getHospitalIdList(query.hospitalIdList),
          originalFlag: query.originalFlag,
          regionId: query.regionId,
          timeFlag: query.timeFlag,
          courseId: query.courseId,
          type: vm.formData.learnFlag,
          name: vm.formData.doctorName,
          pageNo: vm.formData.pageNo,
          pageSize: vm.formData.pageSize,
        }
        let reqUrl = ''
        if (vm.base == null) {
          reqUrl = 'stats/report/courseDetail'
        } else {
          reqUrl = 'stats/export/time/info/course'
        }
        console.log('course req', req, reqUrl)
        openLoading(vm)
        vm.POST(reqUrl, req).then((res) => {
          closeLoading(vm)
          if (res.code == '000000') {
            if (res.data.totalCount == 0) {
              vm.$message('没有相关数据，请重新选择查询范围')
            }
            vm.tableData = res.data.list
            vm.totalRows = res.data.totalCount
          } else {
            vm.$message(res.message)
          }
        })
      } else if (this.tableType == 2) {
        vm.curmbFouth = '考试培训情况'
        //考试分析
        let req = {
          projectId: query.projectId,
          beginDate: query.beginDate,
          endDate: query.endDate,
          hospitalIdList: operationData.getHospitalIdList(query.hospitalIdList),
          originalFlag: query.originalFlag,
          regionId: query.regionId,
          timeFlag: query.timeFlag,
          examId: query.examId,
          gradeFlag: vm.formData.gradeFlag,
          doctorName: vm.formData.doctorName,
          pageNo: vm.formData.pageNo,
          pageSize: vm.formData.pageSize,
        }
        let reqUrl = ''
        if (vm.base == null) {
          reqUrl = 'stats/report/getUserList'
        } else {
          reqUrl = 'stats/export/time/info/exam'
        }
        // console.log("exam req", req);
        openLoading(vm)
        vm.POST(reqUrl, req).then((res) => {
          closeLoading(vm)
          if (res.code == '000000') {
            if (res.data.totalCount == 0) {
              vm.$message('没有相关数据，请重新选择查询范围')
            }
            vm.tableData = res.data.list
            vm.totalRows = res.data.totalCount
          } else {
            vm.$message(res.message)
          }
        })
      }
    },
    resetForm() {
      vm.formData = Object.assign(
        {},
        {
          doctorName: '',
          learnFlag: -1,
          gradeFlag: -1,
          pageNo: 1,
          pageSize: 20,
        }
      )
      vm.search()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formData.pageSize = val
      this.formData.pageNo = 1
      this.search()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formData.pageNo = val
      this.search()
    },
  },
}
</script>

<style lang="scss">
.name-list-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%;
    }
    .table-empty {
      img {
        height: 24px;
        width: 106px;
      }
    }
  }
}
</style>
