<template>
  <div id="menuResource">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>菜单管理</BreadcrumbItem>
      <BreadcrumbItem>菜单资源</BreadcrumbItem>
    </Breadcrumb>
    <div>
      <Button type="primary" ghost icon="ios-arrow-back" @click="returnBack">返回</Button>
    </div>
    <div class="buttonGroup">
      <ButtonGroup size="large" shape="circle">
        <Button type="primary" ghost icon="md-add" @click="addNew" v-show="add.platformBtn || add.partnerBtn || add.clinicBtn">新增</Button>
      </ButtonGroup>
    </div>
    <div>
      <Table border :columns="columns" :data="tableData"></Table>
    </div>
    <!--弹出框-->
    <div class="addRole" v-show="showModel">
      <div class="modelBox">
        <p class="modelTitle">
          <span>{{showTitle}}</span>
          <span class="exit"><Icon type="md-close" @click="cancelAdd"/></span>
        </p>
        <div class="roleMsg">
          <div class="searchBox">
            <div class="item">
              <span>名称:</span>
              <Input type="text" v-model="name" placeholder="请输入菜单名称" style="width:180px"/>
            </div>
            <div class="item">
              <span>URL:</span>
              <Input type="text" v-model="url" placeholder="请输入URL" style="width:180px"/>
            </div>
            <div class="item">
              <Button type="primary" @click="searchBtn">查询</Button>
              <Button type="primary" ghost @click="resetBtn">重置</Button>
            </div>
          </div>
          <div>
            <Table width="880" height="390" ref="selection" border :columns="columns2" :data="tableData2" @on-selection-change="selTable"></Table>
          </div>
          <div class="page2">
            <Page :total="pageTotal" show-total show-elevator show-sizer @on-change="getNewPages1" @on-page-size-change="getNewPages2"/>
          </div>
        </div>
        <div class="buttons">
          <Button type="primary" ghost @click="cancelAdd">取消</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="resourceCancelDel">关闭</Button>
        <Button type="error" @click="sureDel">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from './../../assets/js/axios';
    export default {
        name: "MenuResource",
        data(){
          return{
            id:'',//页面id
            menuId:'',//菜单id
            menuName:'',
            menuPage:'',
            showModel:false,
            showTitle:'',
            rCategoryList:[],
            subsystemList:[],
            methodList:[],
            delId:'',
            delMsg:false,
            delMsgName:'',
            name:'',
            url:'',
            page:1,
            pageSize:10,
            pageTotal:0,
            selArr:[],
            /*配置表格*/
            columns: [
              {title: '名称', key: 'name',},
              {title: '子系统', key: 'subsystem'},
              {title: '分类', key: 'category'},
              {title: 'URL', key: 'url'},
              {title: '方法', key: 'method'},
              {title: '操作', key: 'action', width: 80,align: 'center',
                render: (h, params) => {
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'error',
                        size: 'small'
                      },
                      style:{
                        display:(this.remove.platformBtn || this.remove.partnerBtn || this.remove.clinicBtn)?'inline-block':'none'
                      },
                      on: {
                        click: () => {
                          this.removeResource(params.row.id,params.row.name);
                        }
                      }
                    }, '删除'),
                  ]);
                }
              }
            ],
            tableData: [],
            columns2: [{type: 'selection',width: 60,align: 'center'},
                        {title: '名称', key: 'name',},
                        {title: '子系统', key: 'subsystem'},
                        {title: '分类', key: 'category'},
                        {title: 'URL', key: 'url'},
                        {title: '方法', key: 'method'}],
            tableData2: [],
            tableBtn:[],
            add:{
              platformBtn:false,
              partnerBtn:false,
              clinicBtn:false
            },
            remove:{
              platformBtn:false,
              partnerBtn:false,
              clinicBtn:false
            },

          }
        },
      mounted(){
        this.id=this.$route.params.id;
        this.menuId=this.$route.params.menuId;
        this.menuName=this.$route.params.menuName.split('_')[0];
        this.menuPage=this.$route.params.menuName.split('_')[1];
        this.getButton();
        this.getMenu();
        this.getPage();
      },
      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 === 'platformMenuResourceAdd' && this.menuName=="platform") {this.add.platformBtn = true}
              if (i.code === 'partMenuResourceAdd' && this.menuName=="partner") {this.add.partnerBtn = true}
              if (i.code === 'clinicMenuResourceAdd' && this.menuName=="clinic") {this.add.clinicBtn = true}
              if (i.code === 'platformMenuResourceRemove' && this.menuName=="platform") {this.remove.platformBtn = true}
              if (i.code === 'partMenuResourceRemove' && this.menuName=="partner") {this.remove.partnerBtn = true}
              if (i.code === 'clinicMenuResourceRemove' && this.menuName=="clinic") {this.remove.clinicBtn = true}
            }
          },
          returnBack(){
            this.tableData=[];
            let current=this.menuName+'_'+this.menuPage;
            this.$router.push({path:'/index/system/menuManagement/'+this.id+'/'+current});
          },
          getPage(){
            if(this.menuName=="platform"){
              this.getPagePlat();
            }else if(this.menuName=="partner"){
              this.getPagePartner();
            }else if(this.menuName=="clinic"){
              this.getPageClinic();
            }
          },
          getPagePlat(){
            let _this=this;
            axios.post('/platform-upms/menuResource/listByMenu',{
              id:_this.menuId
            }).then(res=> {
              if(res){
                  let temp=res.data.data;
                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;
              }
            })
          },
          getPagePartner(){
            let _this=this;
            axios.post('/partner-upms/menuResource/listByMenu',{
              id:_this.menuId
            }).then(res=>{
              if(res){
                  let temp=res.data.data;
                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;
              }
            })
          },
          getPageClinic(){
            let _this=this;
            axios.post('/clinic-upms/menuResource/listByMenu',{
              id:_this.menuId
            }).then(res=>{
              if(res){
                let temp=res.data.data;
                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;
              }
            })
          },
          addNew(){
            if(this.menuName=="platform"){
              this.addNewPlat();  
            }else if(this.menuName=="partner"){
              this.addNewPartner();
            }else if(this.menuName=="clinic"){
              this.addNewClinic();
            }
          },
          addNewPlat(){
            let _this=this;
            _this.showModel=true;
            _this.showTitle="新增菜单资源";
            axios.post('/platform-upms/menuResource/pageWithMenu',{
              current:_this.page,
              menuId:_this.menuId,
              name:_this.name,
              size:_this.pageSize,
              url:_this.url
            }).then(res=>{
              if(res){
                  _this.pageTotal=res.data.data.total;
                let temp=res.data.data.records;
                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.tableData2=temp;
              }
            })
          },
          addNewPartner(){
            let _this=this;
            _this.showModel=true;
            _this.showTitle="新增菜单资源";
            axios.post('/partner-upms/menuResource/pageWithMenu',{
              current:_this.page,
              menuId:_this.menuId,
              name:_this.name,
              size:_this.pageSize,
              url:_this.url
            }).then(res=>{
              if(res){
                 _this.pageTotal=res.data.data.total;
                let temp=res.data.data.records;
                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.tableData2=temp;
              }
            })
          },
          addNewClinic(){
            let _this=this;
            _this.showModel=true;
            _this.showTitle="新增菜单资源";
            axios.post('/clinic-upms/menuResource/pageWithMenu',{
              current:_this.page,
              menuId:_this.menuId,
              name:_this.name,
              size:_this.pageSize,
              url:_this.url
            }).then(res=>{
              if(res){
                 _this.pageTotal=res.data.data.total;
                let temp=res.data.data.records;
                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.tableData2=temp;
              }
            })
          },
          getNewPages1(current){
            this.page=current;
            this.tableData2=[];
            if(this.menuName=="platform"){
              this.addNewPlat();
            }else if(this.menuName=="partner"){
              this.addNewPartner();
            }else if(this.menuName=="clinic"){
              this.addNewClinic();
            }
          },
          getNewPages2(size){
            this.pageSize=size;
            this.tableData2=[];
            if(this.menuName=="platform"){
              this.addNewPlat();
            }else if(this.menuName=="partner"){
              this.addNewPartner();
            }else if(this.menuName=="clinic"){
              this.addNewClinic();
            }
          },
          removeResource(id,name){
            this.delId=id;
            this.delMsg=true;
            this.delMsgName=name;
          },
          /*弹出框*/
          resetBtn(){
            this.name='';
            this.url='';
          },
          searchBtn(){
            this.tableData2=[];
            if(this.menuName=="platform"){
              this.addNewPlat();
            }else if(this.menuName=="partner"){
              this.addNewPartner();
            }else if(this.menuName=="clinic"){
              this.addNewClinic();
            }
          },
          confirmBtn(){
            if(this.menuName=="platform"){
              this.surePlat();
            }else if(this.menuName=="partner"){
              this.surePartner();
            }else if(this.menuName=="clinic"){
              this.sureClinic();
            }
          },
          surePlat(){
            let _this=this;
            let temp=[];
            for(let i of _this.selArr){
              temp.push(i.id);
            }
            axios.post('/platform-upms/menuResource/add',{
               menuId:_this.menuId,
               resourceIds:temp
            }).then(res=>{
              if(res){
                 _this.showModel=false;
                _this.tableData2=[];
                temp=[];
                _this.resetBtn();
                _this.getPagePlat();
              }
            })
          },
          surePartner(){
            let _this=this;
            let temp=[];
            for(let i of _this.selArr){
              temp.push(i.id);
            }
            axios.post('/partner-upms/menuResource/add',{
               menuId:_this.menuId,
               resourceIds:temp
            }).then(res=>{
              if(res){
                _this.showModel=false;
                _this.tableData2=[];
                temp=[];
                _this.resetBtn();
                _this.getPagePartner();
              }
            })
          },
          sureClinic(){
            let _this=this;
            let temp=[];
            for(let i of _this.selArr){
              temp.push(i.id);
            }
            axios.post('/clinic-upms/menuResource/add',{
               menuId:_this.menuId,
               resourceIds:temp
            }).then(res=>{
              if(res){
                _this.showModel=false;
                _this.tableData2=[];
                temp=[];
                _this.resetBtn();
                _this.getPageClinic();
              }
            })
          },
          cancelAdd(){
            this.showModel=false;
            this.showTitle='';
            this.tableData2=[];
            this.resetBtn();
          },
          selTable(selection){
            this.selArr=selection;
          },
          /*删除 */
          sureDel(){
            if(this.menuName=="platform"){
              this.removePlat();
            }else if(this.menuName=="partner"){
              this.removePartner();
            }else if(this.menuName=="clinic"){
              this.removeClinic();
            }
          },
          removePlat(){
            let _this=this;
            axios.post('/platform-upms/menuResource/delete',{
              id:_this.delId
            }).then(res=>{
              if(res){
                _this.delMsgName='';
                _this.delId='';
                _this.delMsg=false;
                _this.getPagePlat();
                _this.$Message.info('删除成功');
              }
            })
          },
          removePartner(){
            let _this=this;
            axios.post('/partner-upms/menuResource/delete',{
              id:_this.delId
            }).then(res=>{
              if(res){
                  _this.delMsgName='';
                _this.delId='';
                _this.delMsg=false;
                _this.getPagePartner();
                _this.$Message.info('删除成功');
              }
            })
          },
          removeClinic(){
            let _this=this;
            axios.post('/clinic-upms/menuResource/delete',{
              id:_this.delId
            }).then(res=>{
              if(res){
                _this.$Message.info('删除成功');
                _this.resourceCancelDel()
                _this.getPageClinic();
                
              }
            })
          },
          resourceCancelDel(){
            this.delId="";
            this.delMsg=false;
            this.delMsgName="";
          }
      }
    }
</script>

<style scoped>
  #menuResource{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  #menuResource .bread{
    font-size: 13px;
    white-space: nowrap;
    margin-bottom:20px;
  }
  #menuResource .buttonGroup{
    padding: 20px 0 10px 10px;
  }
  #menuResource .pages{
    padding: 30px 0;
    text-align: center;
  }
   /*弹出框*/
  #menuResource .addRole{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top:0;
    left:0;
    z-index: 999;
  }
  #menuResource .modelBox{
    position: absolute;
    width: 940px;
    min-height: 300px;
    top:10px;
    left: 50%;
    background-color: #fff;
    margin-left: -470px;
    border-radius: 10px;
    padding-bottom: 20px;
  }
  #menuResource .modelTitle{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    background-color: #00507e;
    color: #fff;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }
  #menuResource .exit{
    position: absolute;
    font-size: 20px;
    right: 20px;
    cursor: pointer;
  }
  #menuResource .roleMsg{
    height: 500px;
    margin: 10px 20px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #menuResource .roleMsg .searchBox{
    display: flex;
    padding: 10px 0;
  }
  #menuResource .roleMsg .searchBox .item{
    width: 240px;
  }
  #menuResource .roleMsg .searchBox .item:last-child{
    width: 120px;
  }
  #menuResource .roleMsg .page2{
    padding-top: 10px;
    text-align: center;
  }
  #menuResource .modelBox .buttons{
    text-align:center;
  }
  #menuResource .modelBox .buttons button{
    margin: 10px;
  }
</style>
