<template>
  <div class="newly-increased-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" ></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <p class="top-title">新增居民</p>
      <el-tabs v-model="activeName2" type="card" @tab-click="handleTabClick" class="tab-list">
        <el-tab-pane label="单个录入" name="first">单个录入11</el-tab-pane>
        <el-tab-pane label="二维码录入" name="second">二维码录入22</el-tab-pane>
        <el-tab-pane label="批量导入" name="third">
          <div class="step-guide"></div>
          <p class="upload-record">上传历史记录：120</p>
          <el-table
            :data="searchData.tableData"
            class="upload-table"
            height="100"
            style="width: 100%">
            <el-table-column
              header-align="center"
              align="center"
              prop="date"
              label="文件名"
              width="180">
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="name"
              label="上传时间"
              width="180">
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="address"
              label="新导入居民数">
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="address"
              label="更新居民资料数">
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="address"
              label="处理状态">
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="address"
              label="关闭理由">
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination-style"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="searchData.totalRows"
            :current-page="1"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="searchData.pageSize"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </el-tab-pane>
    </el-tabs>
    </div>
  </div>
</template>

<script>
  import BreadCrumb from "@/components/breadcrumb.vue";
  import * as commonUtil from "@/utils/utils";
  import {
    getUploadHistory
  } from "@/utils/patients/patientsapi";

  export default {
    data() {
      return {
        curmbFirst: "居民管理",
        curmbSecond: "新增居民",
        activeName2: 'third',
        searchData: {
          pageNo: 1,  // 第几页
          pageSize: 10,  // 每页条数
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          totalRows: 0,
        }
      }
    },
    components: {
      BreadCrumb,
      
    },
    created() {
      this.goToGetUploadHistory();
    },
    // 挂载到Dom完成时
    mounted() {
      commonUtil.resizeHeight();
    },
    methods: {
      goToGetUploadHistory(){
        console.log('go get upload history>>>>>>')
        // let params = {
        //   model: {"doctor_id":101281458},
        //   pageNo: 1,
        //   pageSize: 15,
        // }
        let params = {"token":"8C036BF566E742059AC951DBDA8941CA","model":{"doctor_id":101281458},"pageSize":15,"pageNo":1};
        getUploadHistory(params).then(data => {
          console.log('go get upload record: ', data)
        })
      },
      handleTabClick(tab, event) {
        console.log(tab, event);
      },
      handleSizeChange(val){

      },
      handleCurrentChange(val){

      }
    } 
  }

</script>

<style lang="less" scoped>
  .newly-increased-wrap{
    .screenSet{
      background: #fff;
      padding: 30px;
      display: flex;
      flex-direction: column;
    }
    .top-title{
      font-size: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #efefef;
    }
  }
</style>

<style lang="less">
  .newly-increased-wrap{
    .top-title{
      border: 0 !important;
    }
    .tab-list{
      flex: 1;
      display: flex;
      flex-direction: column;
      .el-tabs__content{
        flex: 1;
        overflow: hidden;
        .el-tab-pane{
          width: 100%;
          height: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .step-guide{
            width: 100%;
            height: 200px;
            background: pink;
          }
          .upload-record{
            width: 100%;
            font-size: 12px;
            line-height: 30px;
          }
          .upload-table{
            flex: 1;
          }
          .el-table__body-wrapper{
            &::-webkit-scrollbar  
            {  
                width: 5px;  
                height: 5px;  
                background-color: #fff;  
            }  
            &::-webkit-scrollbar-thumb
            {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #bbb;
            }
          }
        }
        

      }
      .pagination-style{
        text-align: right;
        margin-top: 20px;
      }
    }
  }
  
</style>

