<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">地区：{{ region }}</p>
      <p class="course-p">选择机构：{{ organization }}</p>
      <el-form class="form-update" ref="serchForm" :model="formData" label-width="100px" style="width:40%;">
        <el-form-item label="课程完成状态:">
          <el-select
            v-model="formData.status"
            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 label="查询姓名:  ">
          <el-input size="small" placeholder="查询姓名" v-model="formData.name">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="form-button">
        <el-button @click="search()" type="primary">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </div>
      <el-table
        :data="tableData"
        class="course-table">
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center">
        </el-table-column>
        <el-table-column prop="professional" label="职称" align="center">
        </el-table-column>
        <el-table-column prop="organization" label="机构" align="center">
        </el-table-column>
        <el-table-column prop="region" label="地区" align="center">
        </el-table-column>
        <el-table-column v-if="tableType == 1" prop="join" label="参与课程状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.join | joinStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="tableType == 1" prop="date" label="完成培训日期" align="center" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.date | liveDateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="tableType == 2" prop="paddTime" label="通过考试日期" min-width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.passDate | liveDateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="tableType == 2" prop="level" label="考试成绩等级" min-width="80" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.rank | recordValue }}</span>
          </template>
        </el-table-column>
      </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: {
        name: '',
        status: '',
        pageNo: 1,
        pageSize: 10,
      },
      region: '',
      organization: '',
      tableData: [],
      tableType: 1,
      totalRows: 0,
      statusList: [
        {
          value: 1,
          label: '未参与'
        },
        {
          value: 2,
          label: '参与中'
        },
        {
          value: 3,
          label: '已完成'
        },
      ]
    };
  },
  // computed: {
  //   ...mapGetters([
  //     "_token",
  //   ])
  // },
  created() {
    vm = this;
    // console.log("formInline:", this.formInline);
    vm.getUrlData();
    vm.search();
  },
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    getUrlData() {
      let url = window.location.href;
      this.tableType = vm.getUrlSearch(url,"tableType");
      this.region = vm.getUrlSearch(url,"region");
      this.organization = vm.getUrlSearch(url,"organization");
    },
    search() {
      console.log(this.formData.name);
      this.tableData = [{
        name: '张三',
        sex: '男',
        age: '30',
        professional: '主任医师',
        post: '医生',
        organization: '上海复旦大学附属华山医院',
        region: '上海静安区',
        join: 1,
        complete: 1,
        date: 1562144416000,
        passDate: 1562155416000,
        rank: 1,
      }];
    },
    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>