<template>
  <div id="information">
    <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:140px" v-model="username" />
        </div>
        <div class="item">
          <span>预约日期:</span>
          <DatePicker type="date" v-model="beginTime" format="yyyy-MM-dd"  placeholder="开始时间" style="width: 140px" @on-change="beginTime1"></DatePicker>
            至
          <DatePicker type="date" v-model="endTime" format="yyyy-MM-dd" placeholder="结束时间" style="width: 140px" @on-change="endTime1"></DatePicker>
        </div>
        <div class="item">
          <span>预约记录状态:</span>
          <Select v-model="type" style="width:140px">
            <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"
export default {
  data(){
    return{
      total:0,
      page:1,
      size:10,
      username:'',
      beginTime:'',
      endTime:'',
      times:'',
      type:'',
      typeList:[
        {
          id:0,
          name:'所有信息'
        },
        {
          id:1,
          name:'预约成功'
        },
        {
          id:2,
          name:'已取号'
        },
        {
          id:3,
          name:'已过期'
        },
        {
          id:4,
          name:'已取消'
        },
      ],
      columns:[
        {title:'患者姓名',key: 'patientName',align:'left'},
        {title:'手机号',key:'patientMobile',align:'left'},
        {title:'预约日期',key:'appointmentDate',align:'left'},
        {title:'预约时间段',key:'times',align:'left'},
        {title:'状态',key:'status',align:'left',
          render:(h,params)=>{
            switch (params.row.status){
                case 1:
                  return h('span','预约成功');
                  break;
                case 2:
                  return h('span','已取号');
                  break;
                case 3:
                  return h('span','已过期');
                  break;
                case 4:
                  return h('span','已取消');
                  break;
            }
          }
        },
        {title:'微信用户姓名',key:'userName',align:'left'},
      ],
      data:[],
    }
  },
  mounted(){
    this.getpage()
  },
  methods:{
    getpage(){
      axios.post('patient/patientUser/selectPatientAppointmentByList',{
        current:this.page,
        size:this.size,
        name:this.username,
        startTime:this.beginTime,
        endTime:this.endTime,
        type:this.type
      }).then(res=>{
        let temp=res.data.data.records;
        for(let i of temp){
          let arrNew = new Array()
          arrNew.push(i.appointmentBeginTime)
          arrNew.push(i.appointmentEndTime)
          this.times=arrNew.join('-')
          i.times = this.times
        }
        this.data = temp
        // console.log(this.data)
        // this.page = res.data.data.current
        // this.size = res.data.data.size
        this.total = res.data.data.total
      })
    },
    beginTime1(a,b){
      this.beginTime = a
    },
    endTime1(a,b){
      this.endTime = a
    },
    search(){
      if(this.beginTime>this.endTime){
        this.$Message.warning('开始时间不能大于结束时间')
        return false
      }
      this.page=1
      this.getpage()
    },
    resert(){
      this.username = ''
      this.page = 1
      this.beginTime = ''
      this.endTime = ''
      this.type = ''
      this.getpage()
    },
    changePage(page){
      this.page = page
      this.getpage();
    },
    changePage2(size){
      this.page = 1
      this.size = size
      this.getpage();
    },
  }
}
</script>


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