<template>
  <div class="name-list">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
  
      <p class="text">地区: {{region}}</p>
      <p class="text">选择机构: {{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.rank"
            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="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="joinData" style="width: 100%">
        <el-table-column prop="name" label="姓名" min-width="80" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" min-width="100" align="center"></el-table-column>
        <el-table-column prop="age" label="年龄" min-width="80" align="center"></el-table-column>
        <el-table-column prop="title" label="职称" min-width="80" align="center"></el-table-column>
        <el-table-column prop="duty" label="职务" min-width="80" align="center"></el-table-column>
        <el-table-column prop="pregress" label="机构" min-width="200" align="center"></el-table-column>
        <el-table-column prop="region" label="地区" min-width="80" align="center"></el-table-column>
        <el-table-column prop="join" label="是否参与考试" min-width="80" align="center"></el-table-column>
        <el-table-column prop="pass" label="是否通过考试" min-width="80" align="center"></el-table-column>
        <el-table-column prop="paddTime" label="通过考试日期" min-width="80" align="center"></el-table-column>
        <el-table-column prop="level" label="考试成绩等级" min-width="80" align="center"></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="searchParam.pageNo"
          :page-sizes="[10, 30, 50]"
          :page-size="searchParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: "学情报告",
      curmbSecond: "项目列表",
      region: "",
      organization: "",
      formData: {
        name: '',
        rank: '',
        pageNo: 1,
        pageSize: 10,
      },
      joinData: [],
      totalRows: 0, //数据总数
      searchParam: {
        pageNo: 1, //当前是第几页
        pageSize: 20 //页面总数
      },
      rankList: [
        {
          value: 1,
          label: '不通过'
        },
        {
          value: 2,
          label: '合格'
        },
        {
          value: 3,
          label: '优秀'
        },
        {
          value: 4,
          label: '无成绩'
        },
      ]
    };
  },
  created() {
    vm = this;
    vm.getUrlData();
    vm.search();
  },
  methods: {
    getUrlData() {
      let url = window.location.href;
      this.region = vm.getUrlSearch(url,"region");
      this.organization = vm.getUrlSearch(url,"organization");
    },
    // 搜索列表
    search() {
      vm.joinData = [
        {
          name: "asd",
          sex: "男",
          age: 30,
          title: "主任医师",
          duty: "医生",
          pregress: "上海市复旦大学附属华山医院",
          region: "上海市徐汇区",
          join: "是",
          pass: "是",
          paddTime: 1562144116000,
          level: "合格"
        }
      ];
    },
    // 重置搜索信息
    resetForm() {
      vm.formData = Object.assign(
        {},
        {
          name: '',
          rank: '',
          pageNo: 1,
          pageSize: 10,
        }
      );
      vm.search();
    },
    // 更改数据显示数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      vm.searchParam.pageSize = val;
      vm.search();
    },
    // 换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      vm.searchParam.pageNo = value;
      vm.search();
    }
  }
};
</script>

<style lang='scss' rel='stylesheet/scss'>
.name-list {
  .component-content{
    padding: 10px;
    background: #fff;
    .text {
      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%;
    }
    .input-box {
      margin-top: 40px;
      .search-btn {
        color: #fff;
        border: none;
      }
    }
  }
}
</style>
