<template>
  <div id="microServiceManagement">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>微服务管理</BreadcrumbItem>
    </Breadcrumb>
    <div>
      <div class="topSearch">
        <div class="item">
          <span>编码：</span>
          <Input type="text" v-model="code" style="width: 200px" placeholder="请输入编码"/>
        </div>
        <div class="item">
          <span>名称：</span>
          <Input type="text" v-model="name" style="width: 200px" placeholder="请输入名称"/>
        </div>
        <div class="item">
          <Button type="primary" icon="md-search" @click="searchBtn">查询</Button>
          <Button type="primary" ghost icon="ios-undo" @click="resetBtn">重置</Button>
        </div>
      </div>
       <div class="buttonGroup">
          <ButtonGroup size="large" shape="circle">
            <Button type="primary" ghost icon="md-add" v-if="microSerAddBtn" @click="addNew">新增</Button>
          </ButtonGroup>
        </div>
      <div>
        <Table border :columns="columns" :data="tableData"></Table>
      </div>
      <div class="pages">
          <Page :total="pageTotal" show-total show-elevator show-sizer @on-change="getNewPages1" @on-page-size-change="getNewPages2"/>
      </div>
    </div>
     <!--弹出框-->
    <div class="addRole" v-show="showModel">
      <div class="modelBox">
        <p class="modelTitle">
          <span>{{showTitle}}</span>
          <span class="exit" @click="cancelBtn"><Icon type="md-close" /></span>
        </p>
        <div class="roleMsg">
          <div><span>编码:</span>
            <Input type="text" v-model="micro.code" style="width: 220px;"/>
          </div>
          <div><span>名称:</span>
            <Input type="text" v-model="micro.name" style="width: 220px;"/>
          </div>
          <div class="remark"><span>备注:</span><Input type="textarea" :rows="4" v-model="micro.remark"/></div>
        </div>
        <div class="buttons">
          <Button type="primary" ghost @click="cancelBtn">取消</Button>
          <Button type="primary" @click="confirmBtn">确定</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="cancelDel">关闭</Button>
        <Button type="error" @click="sureDel">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from './../../assets/js/axios';
import {formatDate} from './../../tools/tools';
  export default {
    name: "microServiceManagement",
    data(){
      return{
        id:'',
        page:1,
        pageSize:10,
        pageTotal:0,
        name:'',
        code:'',
        showModel:false,
        showTitle:'',
        sureBtn:false,
        micro:{
          code:'',
          name:'',
          remark:'',
          id:'',
        },
        delMsg:false,
        delMsgName:'',
        delMsgId:'',
        columns: [{title: '编码', key: 'code'},
          {title: '名称', key: 'name'},
          {title: '创建人', key: 'creatorName'},
          {title: '创建时间', key: 'createTime'},
          {title: '状态',key: 'action',align: 'center',width:100,
                render:(h, params) => {
                  return h('div', [
                    h('i-switch', { //数据库1是已处理，0是未处理
                      props: {
                        type: 'primary',
                        value: params.row.enabled==1?true:false,//控制开关的打开或关闭状态，官网文档属性是value
                      },
                      on: {
                        'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                          //参数value是回调值，并没有使用到
                          this.switch(params.row.id,params.row.enabled); 
                        }
                      }
                    }, )])}
              },
          {title: '操作', key: 'action', width: 170,align: 'center',
            render: (h, params) => {
              let _this=this;
              let microSerEditBtn=false;
              let microSerRemoveBtn=false;
              for(let i of _this.tableBtn){
                if(i.code=="microServiceEdit"){microSerEditBtn=true;}
                if(i.code=="microServiceRemove"){microSerRemoveBtn=true;}
              }
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    display:microSerEditBtn?'inline-block':'none'
                  },
                  on: {
                    click: () => {
                      this.showEditor(params.row.id);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style:{
                    display:microSerRemoveBtn?'inline-block':'none'
                  },
                  on: {
                    click: () => {
                      this.RemoveItem(params.row.id,params.row.name);
                    }
                  }
                }, '删除'),
              ]);
            }
          }],
        tableData: [],
        tableBtn:[],
        microSerAddBtn:false,
      }
    },
    mounted(){
      this.id=this.$route.params.id;
      this.getPage();
      this.getButton();
    },
    methods:{
      /*加载页面按钮*/
      getButton(){
        this.tableBtn=JSON.parse(sessionStorage.getItem('nMArr'));
        for(let i of this.tableBtn){
          if(i.code=="microServiceAdd"){ this.microSerAddBtn=true;}
        }
      },
      getPage(){
        let _this=this;
        axios.post('/platform-upms/microService/page',{
          code:_this.code,
          current:_this.page,
          name:_this.name,
          size:_this.pageSize
        }).then(res=>{
          if(res){
            _this.pageTotal=res.data.data.total;
            let temp=res.data.data.records;
            for(let i of temp){
              i.createTime=i.createTime?formatDate(i.createTime,'01','03'):'';
            }
            _this.tableData=temp;
          }
        })
      },
      getNewPages1(current){
        this.page=current;
        this.getPage();
      },
      getNewPages2(size){
        this.pageSize=size;
        this.getPage();
      },
      searchBtn(){
        this.tableData=[];
        this.page=1;
        this.getPage();
      },
      resetBtn(){
        this.code='';
        this.name='';
      },
      switch(id,en){
          let _this=this;
          let enabled=en==1?0:1;
          axios.post('/platform-upms/microService/enabled',{
            id:id,
            enabled:enabled
          }).then(res=>{
            if(res){
              _this.$Message.info('操作成功');
            }
          })
        },
      addNew(){
        this.showModel=true;
        this.showTitle='新增服务';
        this.sureBtn=true;
      },
      addNewBtn(){
        let _this=this;
        if(_this.micro.code==''){
        _this.$Message.error('编码不能为空');
        return false;
        }
        if(_this.micro.name==''){
          _this.$Message.error('名称不能为空');
          return false;
        }
        axios.post('/platform-upms/microService/add',{
          code:_this.micro.code,
          name:_this.micro.name,
          remark:_this.micro.remark
        }).then(res=>{
          if(res){
             _this.$Message.info('新增成功');
            _this.showModel=false;
            _this.getPage();
            _this.removeMsg();
          }
        })
      },
      removeMsg(){
        this.micro.code='';
        this.micro.name='';
        this.micro.remark='';
        this.micro.id='';
      },
      cancelBtn(){
        this.showModel=false;
        this.removeMsg();
      },
      confirmBtn(){
        if(this.sureBtn){
          this.addNewBtn();
        }else{
          this.showEditorBtn();
        }
      },
      showEditor(id){
        let _this=this;
        _this.micro.id=id;
        _this.showTitle='修改服务';
        _this.showModel=true;
        _this.sureBtn=false;
        axios.post('/platform-upms/microService/get',{
          id:id
        }).then(res=>{
          if(res){
            let temp=res.data.data;
            _this.micro.code=temp.code;
            _this.micro.name=temp.name;
            _this.micro.remark=temp.remark;
          } 
        })
      },
      showEditorBtn(){
        let _this=this;
        if(_this.micro.code==''){
        _this.$Message.error('编码不能为空');
        return false;
        }
        if(_this.micro.name==''){
          _this.$Message.error('名称不能为空');
          return false;
        }
        axios.post('/platform-upms/microService/update',{
          code:_this.micro.code,
          name:_this.micro.name,
          remark:_this.micro.remark,
          id:_this.micro.id
        }).then(res=> {
          if(res){
            _this.showModel=false;
            _this.removeMsg();
            _this.getPage();
          }
        })
      },
      RemoveItem(id,name){
        this.delMsgName=name;
        this.delMsgId=id;
        this.delMsg=true;
      },
      sureDel(){
        let _this=this;
        axios.post('/platform-upms/microService/delete',{
          id:_this.delMsgId
        }).then(res=>{
          if(res){
            _this.$Message.info('删除成功');
            _this.cancelDel()
            _this.getPage();
          }
        })
      },
      cancelDel(){
        this.delMsg=false;
        this.delMsgName='';
        this.delMsgId='';
      }
    }
  }
</script>

<style scoped>
  #microServiceManagement{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  #microServiceManagement .bread{
    font-size: 13px;
    white-space: nowrap;
    margin-bottom: 20px;
  }
  #microServiceManagement .topSearch{
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 10px;
  }
  #microServiceManagement .topSearch .item{
    width: 300px;
    margin-bottom: 10px;
  }
  #microServiceManagement .topSearch .item:last-child{
    width: 160px;
  }
  #microServiceManagement .buttonGroup{
    margin-bottom: 10px;
  }
  #microServiceManagement .pages{
    padding: 30px 0;
    text-align: center;
  }
  /*弹出框*/
  #microServiceManagement .addRole{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top:0;
    left:0;
    z-index: 999;
  }
  #microServiceManagement .modelBox{
    position: absolute;
    width: 680px;
    min-height: 300px;
    top:80px;
    left: 50%;
    background-color: #fff;
    margin-left: -340px;
    border-radius: 10px;
    padding-bottom: 20px;
  }
  #microServiceManagement .modelTitle{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    background-color: #00507e;
    color: #fff;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }
  #microServiceManagement .exit{
    position: absolute;
    font-size: 20px;
    right: 20px;
    cursor: pointer;
  }
  #microServiceManagement .roleMsg{
    display: flex;
    flex-flow: row wrap;
    font-size: 14px;
    padding: 15px 25px;
    justify-content: space-between;
  }
  #microServiceManagement .roleMsg div{
    padding: 0 0 10px 0;
    margin-left: -3px;
  }
  #microServiceManagement .roleMsg span{
    display: inline-block;
    width: 80px;
    text-align: justify;
  }
  #microServiceManagement .roleMsg input{
    outline: none;
    border: none;
    width: 210px;
    height: 30px;
    padding-left: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #microServiceManagement .roleMsg .remark{
    width: 630px;
    padding: 0;
  }
  #microServiceManagement .modelBox .buttons{
    text-align:center;
  }
  #microServiceManagement .modelBox .buttons button{
    margin: 10px;
  }
</style>
