<template>
  <div id="resourceManagement">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>资源管理</BreadcrumbItem>
    </Breadcrumb>
    <div>
      <div class="topSearch">
        <div class="item">
          <span>名称：</span>
          <Input type="text" v-model="name" style="width: 200px" placeholder="请输入名称"/>
        </div>
        <div class="item">
          <span>子系统:</span>
          <Select style="width:200px" v-model="subsystem">
            <Option v-for="item in subsystemList" :value="item.code" :key="item.code">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="item">
          <span>分类:</span>
          <Select style="width:200px" v-model="rCategory">
            <Option v-for="item in rCategoryList" :value="item.code" :key="item.code">{{ item.name }}</Option>
          </Select>
        </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="resourceAddBtn" @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>
             <Select style="width:220px" v-model="add.rCategory">
              <Option v-for="item in rCategoryList" :value="item.code" :key="item.code">{{ item.name }}</Option>
            </Select>
          </div>
          <div><span>子系统:</span>
             <Select style="width:220px" v-model="add.subsystem">
              <Option v-for="item in subsystemList" :value="item.code" :key="item.code">{{ item.name }}</Option>
            </Select>
          </div>
          <div><span>方法:</span>
             <Select style="width:220px" v-model="add.method">
              <Option v-for="item in methodList" :value="item.code" :key="item.code">{{ item.name }}</Option>
            </Select>
          </div>
          <div><span>服务:</span>
             <Select style="width:220px" v-model="add.serviceId">
              <Option v-for="item in serviceList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <div><span>名称:</span>
            <Input type="text" style="width: 220px;" v-model="add.name"/>
          </div>
          <div><span>URL:</span>
            <Input type="text" style="width: 220px;" v-model="add.url"/>
          </div>
          <div class="remark"><span>备注:</span><Input type="textarea" :rows="4" v-model="add.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';
    export default {
        name: "resourceManagement",
        data(){
          return{
            id:'',//页面id
            page:1,
            pageSize:10,
            pageTotal:0,
            name:'',
            rCategory:'',//资源分类
            subsystem:'',
            rCategoryList:[],
            subsystemList:[],
            methodList:[],
            serviceList:[],
            showModel:false,
            showTitle:'',
            add:{
              rCategory:'',
              method:'',
              name:'',
              remark:'',
              serviceId:'',
              subsystem:'',
              url:'',
              id:''
            },
            sureBtn:false,
            delMsg:false,
            delMsgName:'',
            delId:'',
            columns: [{title: '名称', key: 'name'},
              {title: '子系统', key: 'subsystem'},
              {title: '分类', key: 'category'},
              {title: 'url', key: 'url'},
              {title: '方法', key: 'method'},
              {title: '状态',key: 'action',align: 'center',width:100,
                render:(h, params) => {
                  return h('div', [
                    h('i-switch', {
                      props: {
                        type: 'primary',
                        value: params.row.enabled==1?true:false,
                      },
                      on: {
                        'on-change': (value) => {
                          this.switch(params.row.id,params.row.enabled); 
                        }
                      }
                    }, )])}
              },
              {title: '操作', key: 'action', width: 130,align: 'center',
                render: (h, params) => {
                  let _this=this;
                  let resourceEditBtn=false;
                  let resourceRemoveBtn=false;
                  for(let i of _this.tableBtn){
                    if(i.code=="resourceEdit"){resourceEditBtn=true;}
                    if(i.code=="resourceRemove"){resourceRemoveBtn=true;}
                  }
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'primary',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px',
                        display:resourceEditBtn?'inline-block':'none'
                      },
                      on: {
                        click: () => {
                          this.showEditor(params.row.id);
                        }
                      }
                    }, '编辑'),
                    h('Button', {
                      props: {
                        type: 'error',
                        size: 'small'
                      },
                      style:{
                        display:resourceRemoveBtn?'inline-block':'none'
                      },
                      on: {
                        click: () => {
                          this.RemoveItem(params.row.id,params.row.name);
                        }
                      }
                    }, '删除'),
                  ]);
                }
              }],
            tableData: [],
            tableBtn:[],
            resourceAddBtn:false,
          }
        },
      mounted(){
        this.id=this.$route.params.id;
        this.getMenu();
        this.getPage();
        this.getServiceList();
        this.getButton();
      },
      methods:{
          /*取出字典项*/
          getMenu(){
            let _this=this;
            _this.selectList=JSON.parse(localStorage.getItem('selectList'));
            let selectList=_this.selectList;
            for(let m of selectList){
              if(m.t=="resource_category"){
                _this.rCategoryList=m.list;
              }
            }
            for(let m of selectList){
              if(m.t=="subsystem"){
                _this.subsystemList=m.list;
              }
            }
            for(let m of selectList){
              if(m.t=="method"){
                _this.methodList=m.list;
              }
            }
          },
          /*加载页面按钮*/
          getButton(){
            this.tableBtn=JSON.parse(sessionStorage.getItem('nMArr'));
            for(let i of this.tableBtn){
              if(i.code=="resourceAdd"){ this.resourceAddBtn=true;}
            }
          },
          getServiceList(){
            let _this=this;
             axios.post('/platform-upms/microService/list',{
              code: "",
              current:"",
              enabled: 1,
              name: "",
              size:""
            }).then(res=>{
              if(res){
                _this.serviceList=res.data.data;
              }  
            })
          },
          getPage(){
            let _this=this;
            axios.post('/platform-upms/resource/page',{
              name:_this.name,
              category:_this.rCategory,
              subsystem:_this.subsystem,
              current:_this.page,
              size:_this.pageSize,
            }).then(res=>{
              if(res){
                 _this.pageTotal=res.data.data.total;
                let temp=res.data.data.records;
                //console.log(temp);
                for(let i of temp){
                  for(let j of _this.rCategoryList){
                    if(i.category==j.code){
                      i.category=j.name;
                    }
                  }
                  for(let j of _this.subsystemList){
                    if(i.subsystem==j.code){
                      i.subsystem=j.name;
                    }
                  }
                }
                _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.rCategory='';
            this.subsystem='';
            this.name='';
          },
          addNew(){
            let _this=this;
            _this.showModel=true;
            _this.showTitle='新增资源';
            _this.sureBtn=true;
          },
          addNewBtn(){
            let _this=this;
            if(_this.add.rCategory==''){
            _this.$Message.error('请选择类型');
            return false;
            }
            if(_this.add.method==''){
              _this.$Message.error('请选择方法');
              return false;
            }
            if(_this.add.name==''){
              _this.$Message.error('请输入名称');
              return false;
            }
            if(_this.add.serviceId==''){
              _this.$Message.error('请选择服务');
              return false;
            }
            if(_this.add.url==''){
              _this.$Message.error('请输入url');
              return false;
            }
            axios.post('/platform-upms/resource/add',{
              category:_this.add.rCategory,
              method:_this.add.method,
              name:_this.add.name,
              remark:_this.add.remark,
              serviceId:_this.add.serviceId,
              subsystem: _this.add.subsystem,
              url:_this.add.url
            }).then(res=>{
              if(res){
                _this.showModel=false;
                _this.removeMsg();
                _this.getPage();
                _this.$Message.info('新增成功');
              }
            })
          },
          removeMsg(){
             this.add.rCategory='';
             this.add.method='';
             this.add.name='';
             this.add.remark='';
             this.add.serviceId='';
             this.add.subsystem='';
             this.add.url='';
             this.add.id='';
             this.showTitle='';
          },
          cancelBtn(){
            this.showModel=false;
            this.removeMsg();
          },
          confirmBtn(){
            if(this.sureBtn){
              this.addNewBtn();
            }else{
              this.showEditorBtn();
            }
          },
          showEditor(id){
            let _this=this;
            _this.showModel=true;
            _this.showTitle="编辑资源";
            _this.sureBtn=false;
            _this.add.id=id;
            axios.post('/platform-upms/resource/get',{
              id:id
            }).then(res=>{
              if(res){
                let temp=res.data.data;
                  _this.add.rCategory=temp.category+'';
                  _this.add.method=temp.method;
                  _this.add.name=temp.name;
                  _this.add.remark=temp.remark;
                  _this.add.serviceId=temp.serviceId;
                  _this.add.subsystem=temp.subsystem+'';
                  _this.add.url=temp.url;
              }
            })
          },
          showEditorBtn(){
            let _this=this;
            if(_this.add.rCategory==''){
            _this.$Message.error('请选择类型');
            return false;
            }
            if(_this.add.method==''){
              _this.$Message.error('请选择方法');
              return false;
            }
            if(_this.add.name==''){
              _this.$Message.error('请输入名称');
              return false;
            }
            if(_this.add.serviceId==''){
              _this.$Message.error('请选择服务');
              return false;
            }
            if(_this.add.url==''){
              _this.$Message.error('请输入url');
              return false;
            }
            axios.post('/platform-upms/resource/update',{
              category:_this.add.rCategory,
              method:_this.add.method,
              name:_this.add.name,
              remark:_this.add.remark,
              serviceId:_this.add.serviceId,
              subsystem: _this.add.subsystem,
              id:_this.add.id,
              url:_this.add.url
            }).then(res=>{
              if(res){
                _this.showModel=false;
                _this.showTitle='';
                _this.removeMsg();
                _this.getPage();
                _this.$Message.info('修改成功');
              }
            })
          },
          switch(id,en){
            let _this=this;
            let enabled=en==1?0:1;
            axios.post('/platform-upms/resource/enabled',{
              id:id,
              enabled:enabled
            }).then(res=>{
              if(res){
                 _this.$Message.info('操作成功');
              }
            })
          },
          RemoveItem(id,name){
            this.delMsg=true;
            this.delMsgName=name;
            this.delId=id;
          },
          sureDel(){
            let _this=this;
            axios.post('/platform-upms/resource/delete',{
              id:_this.delId
            }).then(res=>{
              if(res){
                _this.$Message.info('删除成功');
                _this.cancelDel()
                _this.getPage();
              }
            })
          },
          cancelDel(){
            this.delMsg=false;
            this.delMsgName='';
            this.delId='';
          }
      }
    }
</script>

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