<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>
      <div class="course-search">
        <el-input placeholder="查询姓名" v-model="formData.name" class="input-with-select">
          <el-button class="course-button" type="primary" slot="append" @click="search">查询</el-button>
        </el-input>
      </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="post" 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 prop="join" label="是否参与培训" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.join | joinTraining }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="complete" label="是否完成培训" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.complete | joinTraining }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="完成培训日期" align="center">
        </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, 100]"
          :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: '',
        pageNo: 1,
        pageSize: 10,
      },
      region: '浙江省/杭州市/西湖区',
      organization: '杭州市中心医院',
      tableData: [],
      totalRows: 0,
    };
  },
  // computed: {
  //   ...mapGetters([
  //     "_token",
  //   ])
  // },
  created() {
    vm = this;
    // console.log("formInline:", this.formInline);
    this.search();
  },
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    search() {
      console.log(this.formData.name);
      this.tableData = [{
        name: '张三',
        sex: '男',
        age: '30',
        professional: '主任医师',
        post: '医生',
        organization: '上海复旦大学附属华山医院',
        region: '上海静安区',
        join: '1',
        complete: '1',
        date: '2019-10-11',
      }];
    },
    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;
    }
    .course-search {
      margin: 35px auto;
      width: 800px;
    }
    .course-button {
      color: #fff;
    }
  }
}
</style>