<template>
  <div id="wechatUser">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>微信信息</BreadcrumbItem>
      <BreadcrumbItem>微信用户信息查询</BreadcrumbItem>
    </Breadcrumb>
    <div class="mainBox">
      <div class="toolBar">
        <div class="item">
          <span>用户姓名:</span>
          <Input type="text" placeholder="请输入用户姓名" style="width:190px" v-model="username" />
        </div>
        <div class="item">
          <span>手机号:</span>
          <Input tyle="text" placeholder="请输入手机号" style="width:190px" v-model="phonenum" />
        </div>
        <div class="item">
          <span>身份证号码:</span>
          <Input tyle="text" placeholder="请输入身份证号码" style="width:190px" v-model="idcader" />
        </div>
        <div class="btns">
          <Button type="primary" icon="md-search" @click="search">搜索</Button>
          <Button type="primary" icon="ios-undo" ghost @click="resert">重置</Button>
        </div>
      </div>
      <div style="width:98%;margin:auto;">
        <Table border :columns="columns" :data="data"></Table>
      </div>
      <div class="pages">
        <Page :total="total" :current="page" show-total show-elevator show-sizer @on-change="changePage" @on-page-size-change="changePage2" />
      </div>
    </div>
  </div>
</template>
<script>
import axios from './../../assets/js/axios'
import {formatDate} from './../../tools/tools'
export default {
  data(){
    return{
      total:0,
      page:1,
      size:10,
      username:'',
      phonenum:'',
      idcader:'',
      columns:[
        {title:'用户姓名',key: 'name',align:'left'},
        {title:'手机号',key:'mobile',align:'left'},
        {title:'身份证号',key:'idNumber',align:'left'},
        {title:'openId',key:'openId',align:'left',
          render:(h,params) => {
            return h('div',[
              h('span',{
                style:{
                  display: 'inline-block',
                  width: '100%',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                },
                domProps:{
                  title:params.row.openId
                }
              },params.row.openId)
            ])
          }
        },
        {title:'注册时间',key:'createTime',align:'left'},
      ],
      data:[],
    }
  },
  mounted(){
    this.getpage()
  },
  methods:{
    getpage(){
      axios.post('patient/patientUser/selectPatientUserListByPage',{
        current: this.page,
        idNumber: this.idcader.trim(),
        mobile: this.phonenum.trim(),
        name: this.username.trim(),
        size: this.size
      }).then(res=>{
        this.total = res.data.data.total,
        this.page = res.data.data.current;
        // this.data = res.data.data.records
        let temp=res.data.data.records;
        for(let i of temp){
          i.createTime=formatDate(i.createTime,'01','03')
        }
        this.data=temp;
      })
    },
    search(){
      this.page = 1
      this.getpage();
    },
    resert(){
      this.idcader = '',
      this.phonenum = '',
      this.username = '',
      this.page = 1
      this.getpage()
    },
    changePage(page){
      this.page = page
      this.getpage();
    },
    changePage2(size){
      this.size = size
      this.getpage();
    },
  }
}
</script>


<style scoped>
#wechatUser{
  width:100%;
  height:100%;
  overflow-y: auto;
}
#wechatUser .bread{
  font-size: 13px;
  white-space: nowrap;
}
#wechatUser .mainBox{
  margin-top:20px;
  padding-top:10px;
  height:92%;
  border-top:1px solid #ccc;
}
#wechatUser .toolBar{
  display:flex;
  flex-flow: row warp;
}
#wechatUser .toolBar .item{
  margin-left:10px;
  margin-bottom:20px;
}
#wechatUser .toolBar .btns{
  margin-left:10px;
  margin-bottom:20px;
}
#wechatUser .toolBar .btns button{
  height:32px;
}
#wechatUser .toolBar .btns .addbtn{
  width:100px;
  height:32px;
  margin-left:30px;
}
#wechatUser .mainBox .pages{
  width:100%;
  margin-top:20px;
  text-align: right;
}
</style>