<template>
  <div id="appointment">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>医院管理</BreadcrumbItem>
      <BreadcrumbItem>预约规则配置</BreadcrumbItem>
    </Breadcrumb>
    <div class="mainBox">
      <div class="toolBar">
        <div class="item">
          <Input type="text" placeholder="请输入医院编码" style="width:190px" v-model="hospatilCode" />
        </div>
        <div class="item">
          <Input tyle="text" placeholder="请输入医院名称" style="width:190px" v-model="hospatilName" />
        </div>
        <div class="btns">
          <Button type="primary" icon="md-search" @click="search">搜索</Button>
          <Button type="primary" icon="ios-undo" ghost @click="resert">重置</Button>
          <Button type="success" icon="md-add" @click="add" class="addbtn">新增医院</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 class="warrant" v-show="addModel">
      <div class="warrantBox">
        <p class="modelTitle">
          <span>{{showTitle}}</span>
          <span class="exit" @click="cancelBtn"><Icon type="md-close" /></span>
        </p>
        <div class="content">
          <div style="display:flex;">
            <div>
              <span class="red">*</span>
              <span>医院名称:</span>
              <Input type="text" placeholder="请输入医院名称" style="width:250px" v-model="icon.hospatilName" />
            </div>
            <div>
              <span class="red">*</span>
              <span>医院编码:</span>
              <Input type="text" placeholder="请输入医院编码" style="width:250px" v-model="icon.hospatilCode" />
            </div>
          </div>
          <div style="margin-top:10px;">
            <p><span>备注:</span></p>
            <Input type="text" placeholder="请输入备注" style="width:540px" v-model="icon.remark" />
          </div>
        </div>
        <div class="buttons">
          <Button type="primary" ghost @click="cancelBtn">取消</Button>
          <Button type="primary" @click="confirmBtn" v-if="this.btnName=='新增'">确定</Button>
          <Button type="primary" @click="confirmBtn2" v-if="this.btnName=='编辑'">确定</Button>
        </div>
      </div>
    </div>
    <!--删除确认框-->
    <Modal v-model="delMsg" :closable="false" :mask-closable="false" width="400" scrollable>
      <p slot="header" style="height:40px;lineHeight:40px;backgroundColor:#ED4014;color:#fff;text-align:center">
        <span>删除</span>
      </p>
      <p>确定删除 <b>"{{delMsgName}}"</b> 吗？</p>
      <div slot="footer">
        <Button type="error" ghost @click="cancel">关闭</Button>
        <Button type="error" @click="ok">确定</Button>
      </div>
    </Modal>
    <!-- 二维码弹出框 -->
    <Modal v-model="codeModel" :closable="false" width="240" scrollable>
      <Qrcode :value="code" size="200"></Qrcode>
    </Modal>
  </div>
</template>

<script>
import axios from './../../assets/js/axios';
import Qrcode from 'qrcode.vue'
export default {
  name: "Appointment",
  components:{
    Qrcode
  },
  data(){
    return{
      total:0,
      page:1,
      size:10,
      codeModel:false,
      code:'',
      hospatilCode:'',
      hospatilName:'',
      addModel:false,
      delMsg:false,
      delMsgName:'',
      delId:'',
      btnName:'',
      showTitle:'',
      icon:{
        hospatilName:'',
        hospatilCode:'',
        remark:'',
        id:''
      },
      columns:[
        {title:'序号',type: 'index',align:'left',width:60},
        {title:'医院名称',key:'name',align:'left'},
        {title:'医院编码',key:'barcode',align:'left'},
        {title:'备注',key:'remark',align:'left'},
        {title:'操作',key:'action',align:'left',minWidth:150,
          render: (h,params) => {
            return h('div',[
              h('Button',{
                props: {
                  type:'primary',
                  size:'small'
                },
                style:{
                  marginRight:'5px',
                },
                on: {
                  click: () => {
                    console.log(111)
                    let id = params.row.id
                    let name = params.row.name
                    this.$router.push({path:'/index/hospital/appointmentChild/1/1',query:{id:id,hosName:name}})
                  }
                }
              },'预约规则配置'),
              h('Button',{
                props: {
                  type:'primary',
                  size:'small'
                },
                style:{
                  marginRight:'5px',
                },
                on: {
                  click: () => {
                    this.codeModel = true
                    this.code = 'https://lis.ulabcare.com/mobileRedirect/bloodcollectionM.html?id='+params.row.id
                  }
                }
              },'预约二维码'),
              h('Button',{
                props: {
                  type:'primary',
                  size:'small'
                },
                style:{
                  marginRight:'5px',
                },
                on: {
                  click: () => {
                    this.btnName = '编辑';
                    this.edit(params.row.id)
                    this.icon.id = params.row.id
                  }
                }
              },'编辑'),
              h('Button',{
                props: {
                  type:'error',
                  size:'small'
                },
                on: {
                  click: () => {
                    this.del(params.row.id,params.row.name)
                  }
                }
              },'删除'),
            ])
          }
        },
      ],
      data:[],
    }
  },
  mounted(){
    this.getpage()
  },
  methods:{
    getpage(){
      let _this = this;
      axios.post('platform-upms/hospitalManage/listByHospital',{
        current:_this.page,
        size:_this.size,
        code:_this.hospatilCode,
        name:_this.hospatilName
      }).then(res=>{
        if(res){
          _this.total = res.data.data.total;
          _this.data = res.data.data.records;
        }
      })
    },
    search(){
      this.page = 1
      this.getpage();
    },
    resert(){
      this.hospatilName = '',
      this.hospatilCode = '',
      this.page = 1
      this.getpage()
    },
    add(){
      this.showTitle = '新增医院';
      this.addModel = true;
      this.btnName = '新增';
    },
    cancelBtn(){
      this.addModel=false;
      this.icon.hospatilName = '';
      this.icon.hospatilCode = '';
      this.icon.remark = '';
    },
    confirmBtn(){
      let _this = this;
      if(_this.icon.hospatilName.length>16){
        _this.$Message.warning('医院名称最大为16位')
        return false
      }
      if(_this.icon.hospatilCode.length>16){
        _this.$Message.warning('医院编码最大为32位')
        return false
      }
      axios.post('platform-upms/hospitalManage/addHospital',{
        code: _this.icon.hospatilCode,
        name: _this.icon.hospatilName,
        remark: _this.icon.remark
      }).then(res=>{
        if(res.data.code==0){
          _this.addModel = false
          _this.cancelBtn()
          _this.$Message.info('添加成功')
          _this.getpage()
        }else{
          _this.$Message.warning(res.data.msg)
        }
      })
    },
    confirmBtn2(){
      let _this = this;
      axios.post('platform-upms/hospitalManage/updateHospital',{
        code:_this.icon.hospatilCode,
        name:_this.icon.hospatilName,
        remark:_this.icon.remark,
        id:_this.icon.id
      }).then(res=>{
        if(res.data.code==0){
          _this.addModel = false
          _this.cancelBtn()
          _this.$Message.info('修改成功')
          _this.getpage()
        }else{
          _this.$Message.warning(res.data.msg)
        }
      })
    },
    changePage(page){
      this.page = page
      this.getpage();
    },
    changePage2(size){
      this.size = size
      this.getpage();
    },
    edit(id){
      this.showTitle = '编辑';
      this.addModel = true;
      axios.post('platform-upms/hospitalManage/hospitalById',{
        id:id
      }).then(res=>{
        this.icon.hospatilName = res.data.data.name
        this.icon.hospatilCode = res.data.data.barcode
        this.icon.remark = res.data.data.remark
      })
    },
    del(id,name){
      this.delMsg = true
      this.delMsgName = name
      this.delId = id
    },
    cancel(){
      this.delMsg=false
    },
    ok(){
      this.delMsg = false
      axios.post('platform-upms/hospitalManage/rmHospital',{
        id:this.delId
      }).then(res=>{
        this.$Message.info(res.data.data)
        this.getpage()
      })
    }
  }
}
</script>

<style scoped>
#appointment{
  width:100%;
  height:100%;
  overflow-y: auto;
}
#appointment .bread{
  font-size: 13px;
  white-space: nowrap;
}
#appointment .mainBox{
  margin-top:20px;
  padding-top:10px;
  height:92%;
  border-top:1px solid #ccc;
}
#appointment .toolBar{
  display:flex;
  flex-flow: row warp;
}
#appointment .toolBar .item{
  margin-left:10px;
  margin-bottom:20px;
}
#appointment .toolBar .btns{
  margin-left:10px;
  margin-bottom:20px;
}
#appointment .toolBar .btns button{
  height:32px;
}
#appointment .toolBar .btns .addbtn{
  width:100px;
  height:32px;
  margin-left:30px;
}
#appointment .mainBox .pages{
  width:100%;
  margin-top:20px;
  text-align: right;
}
/*新增模态框*/
#appointment .warrant{
  position:absolute;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.4);
  top:0;
  left:0;
  z-index:999;
}
#appointment .warrantBox{
  position: absolute;
  width:620px;
  top:80px;
  left:50%;
  background-color:#fff;
  margin-left:-310px;
  border-radius:10px;
  padding-bottom:20px;
}
#appointment .modelTitle{
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  background-color: #00507e;
  color: #fff;
  border-radius: 10px 10px 0 0;
  text-align: center;
}
#appointment .exit{
  position: absolute;
  font-size: 20px;
  right: 20px;
  cursor: pointer;
}
#appointment .content{
  padding:15px 25px;
}
#appointment .content .red{
  color:red;
}
#appointment .buttons{
  text-align: right;
  margin-right:40px;
}
#appointment .buttons button{
  margin: 10px;
}
</style>