<template>
  <div id="wechatCode">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>微信信息</BreadcrumbItem>
      <BreadcrumbItem>微信用户验证码查询</BreadcrumbItem>
    </Breadcrumb>
    <div class="mainBox">
      <div class="toolBar">
        <div class="item">
          <span>验证码发送时间:</span>
          <DatePicker type="date" v-model="beginTime" format="yyyy-MM-dd"  placeholder="开始时间" style="width: 200px" @on-change="beginTime1"></DatePicker>
            至
          <DatePicker type="date" v-model="endTime" format="yyyy-MM-dd" placeholder="结束时间" style="width: 200px" @on-change="endTime1"></DatePicker>
        </div>
        <div class="item">
          <span>类型:</span>
          <Select v-model="type" style="width:160px">
            <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </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,
      beginTime:'',
      endTime:'',
      type:"",
      typeList:[
        {
          id:0,
          name:'全部信息'
        },
        {
          id:1,
          name:'注册'
        },
        {
          id:2,
          name:'修改信息'
        },
      ],
      columns:[
        // {title:'用户姓名',key: 'creatorName',align:'left'},
        {title:'手机号',key:'mobile',align:'left'},
        {title:'验证码发送时间',key:'createTime',align:'left'},
        {title:'验证码',key:'content',align:'left'},
        {title:'验证码返回信息',key:'response',align:'left'},
        {title:'操作类型',key:'type',align:'left',
          render:(h,params)=>{
            switch (params.row.type){
                case 1:
                  return h('span','注册');
                  break;
                case 2:
                  return h('span','修改信息');
                  break;
            }
          }
        },
        // {title:'微信ID',key:'id',align:'left'},
      ],
      data:[],
    }
  },
  mounted(){
    this.getpage()
  },
  methods:{
    getpage(){
      axios.post('patient/patientUser/selectSmsCodeByList',{
        current:this.page,
        size:this.size,
        startTime:this.beginTime,
        endTime:this.endTime,
        type:this.type
      }).then(res=>{
        let temp=res.data.data.records;
        for(let i of temp){
          i.createTime=i.createTime?formatDate(i.createTime,'01','03'):'';
          i.content = i.content.substr(8,4)
        }
        this.data=temp;
        this.total = res.data.data.total
        // this.page = res.data.data.current
      })
    },
    beginTime1(a,b){
      this.beginTime = a+' 00:00:00'
    },
    endTime1(a,b){
      this.endTime = a+' 23:59:59'
    },
    search(){
      if(this.beginTime>this.endTime){
        this.$Message.warning('开始时间不能大于结束时间')
        return false
      }
      this.page = 1
      this.getpage()
    },
    resert(){
      this.beginTime = '',
      this.endTime = '',
      this.page = 1,
      this.size = 10
      this.type = ''
      this.getpage()
    },
    changePage(page){
      this.page = page
      this.getpage();
    },
    changePage2(size){
      this.page = 1
      this.size = size
      this.getpage();
    },
  }
}
</script>


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