<template>
  <div class="name-list">
    <el-card class="where">
      <p>地区: {{params.address}}</p>
      <p>选择机构: {{params.pregress}}</p>
      <el-row :gutter="20" class="input-box">
        <el-col :span="12" :offset="6">
          <el-input placeholder="查询姓名" v-model="name" class="input-search">
            <el-button slot="append" class="search-btn" type="primary">查询</el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <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>
    </el-card>
     <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParam.pageNo"
        :page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
        :page-size="searchParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRows"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        address: "浙江省/杭州市/西湖区",
        pregress: "杭州市中医院、杭州市第七人民医院"
      },
      name: "",
      joinData: [{
        name: 'asd',
        sex: '男',
        age: 30,
        title: '主任医师',
        duty: '医生',
        pregress: '上海市复旦大学附属华山医院',
        region: '上海市徐汇区',
        join: '是',
        pass: '是',
        paddTime: '2019-10-10',
        level: '合格'
      }],
      totalRows: 0, //数据总数
      searchParam: {
        pageNo: 1, //当前是第几页
        pageSize: 20 //页面总数
      }
    };
  },

  methods: {
      // 搜索列表
    search(flag) {
      if(flag) vm.searchParam.pageNo = 1
      openLoading(vm);
      let params = {};
      vm.GET(url, params).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
        } else {
          vm.$message.info(res.message);
        }
      });
    },
    // 重置搜索信息
    resetMessage() {
      this.selectProgress = {
        status: "",
        name: ""
      };
      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 {
  .where {
    p {
      line-height: 40px;
    }
    .input-box {
      margin-top: 40px;
      .search-btn {
        color: #fff;
        border: none;
      }
    }
  }
}
</style>
