<template>
  <div id="orgContainer">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>组织管理</BreadcrumbItem>
    </Breadcrumb>
    <div class="mainBox">
      <div class="leftBox">
        <Tree :data="treeData" @on-select-change="selectTree"></Tree>
      </div>
      <div class="rightBox">
        <div class="btnBox">
          <Button type="primary" v-if="orgAddBtn" @click="addNew">新增</Button>
          <Button type="success" v-if="orgEditBtn" @click="editItem">编辑</Button>
          <Button type="error" v-if="orgRemoveBtn" @click="deleteItem">删除</Button>
        </div>
        <div class="itemBox">
          <Row class="rowBox">
            <Col span="4" class="itemBoxName">组织名称：</Col>
            <Col span="20"><Input type="text" v-model="name" :maxlength='64' :disabled="inputDis"/></Col>
          </Row>
          <Row class="rowBox">
            <Col span="4" class="itemBoxName">联系人：</Col>
            <Col span="20"><Input type="text" v-model="contact" :maxlength='32' :disabled="inputDis"/></Col>
          </Row>
          <Row class="rowBox">
            <Col span="4" class="itemBoxName">联系电话：</Col>
            <Col span="20"><Input type="text" v-model="phone" :disabled="inputDis"/></Col>
          </Row>
          <Row class="rowBox">
            <Col span="4" class="itemBoxName">区域：</Col>
            <Col span="20">
              <Select v-model="regionId" :disabled="inputDis" :placeholder="regionName">
                <Option v-for="item in cityList" :value="item.id" :key="item.id">{{ item.name}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="rowBox">
            <Col span="4" class="itemBoxName">组织地址：</Col>
            <Col span="20"><Input type="text" v-model="address" :disabled="inputDis"/></Col>
          </Row>
          <Row class="rowBox">
            <Col span="4" class="itemBoxName">组织邮箱：</Col>
            <Col span="20"><Input type="text" v-model="email" :disabled="inputDis"/></Col>
          </Row>
          <Row class="rowBox">
            <Col span="4" class="itemBoxName">备注：</Col>
            <Col span="20"><Input type="textarea" :rows="4" v-model="remark" :disabled="inputDis"/></Col>
          </Row>
          <div class="bottomBtn" v-if="view">
            <Button type="primary" ghost @click="cancelBtn">取消</Button>
            <Button type="primary" @click="confirmBtn">确定</Button>
          </div>
        </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>
  </div>
</template>

<script>
  import axios from './../../assets/js/axios';
  export default {
    name: "orgManagement",
    data(){
      return{
        PageId:'',//页面id
        name:'',
        regionId:'',
        regionName:'',
        contact:'',
        phone:'',
        id:'',
        addNewId:'',
        address:'',
        email:'',
        remark:'',
        cityList: [{id: 'New York',name: 'New York'}],
        parentId:'',
        treeData:[],
        view:false,
        inputDis:true,
        sureBtn:true,
        delMsg:false,
        delMsgName:'',
        delId:'',
        tableBtn:[],
        orgAddBtn:false,
        orgEditBtn:false,
        orgRemoveBtn:false,
      }
    },
    mounted(){
      this.pageId=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=="orgAdd"){ this.orgAddBtn=true;}
          if(i.code=="orgEdit"){ this.orgEditBtn=true;}
          if(i.code=="orgRemove"){ this.orgRemoveBtn=true;}
        }
      },
      /*获取页面*/
      getPage(){
        let _this=this;
        axios.post('/platform-upms/org/tree',{
        }).then(res=>{
          if(res){
            let temp=res.data.data;
            _this.treeData=_this.getTree(temp);
          }
        })
      },
      /*解析数据*/
      getTree(tree = []) {
        let arr = [];
        if (!!tree && tree.length !== 0) {
          tree.forEach(item => {
            let obj = {};
            obj.title = item.name;
            obj.id=item.id;
            obj.expand = false;
            obj.selected = false;
            obj.expand=true;
            obj.children = this.getTree(item.children); // 递归调用
            arr.push(obj);
          });
        }
        return arr;
      },
      /*点击树节点时发触*/
      selectTree(arr){
        let _this=this;
        _this.inputDis=true;
        _this.view=false;
        if(arr.length>0){
          _this.removeMsg();
           _this.id=arr[0].id;
           axios.post('/platform-upms/org/get',{
             id:_this.id
           }).then(res=>{
             if(res){
               let temp=res.data.data;
               _this.name=temp.name;
               _this.id=temp.id;
               _this.regionId=temp.regionId;
               _this.regionName=temp.regionName;
               _this.contact=temp.contact;
                _this.phone=temp.phone;
                _this.address=temp.address;
                _this.remark=temp.remark;
                _this.email=temp.email;
               _this.parentId=temp.id;
               _this.delMsgName=temp.name;
             } 
           })
        }
      },
      /*清除数据*/
      removeMsg(){
        this.name='';
        this.regionId='';
        this.regionName='';
        this.contact='';
        this.phone='';
        this.id='';
        this.address='';
        this.email='';
        this.remark='';
      },
      getArea(code,name){
        let _this=this;
        let qs=require('qs');
        axios.post('/common/common/selectNextList',qs.stringify({
          regionCode:code
        })).then(res=>{
          if(res){
             let temp=res.data.data;
            // if(name!=='中国'){
              temp.unshift({id:code,name:name});
            // }
            _this.cityList=temp;
          }
        })
      },
      /*新增*/
      addNew(){
        let _this=this;
        if(_this.parentId==''){
          _this.$Message.info('请选择左侧新增数据的父级');
        }else{
          _this.getArea(_this.regionId,_this.regionName);
          _this.removeMsg();
          _this.inputDis=false;
          _this.view=true;
          _this.sureBtn=true;
        }
      },
      addNewBtn(){
        let _this=this;
        let reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        let regTel=/^([0-9]{3,4}-)?[0-9]{7,8}$/;
        let regPhone=/^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
       if(_this.name==''){
          _this.$Message.error('组织名称不能为空');
          return false;
       }
        if(_this.email){
          if(!reg.test(_this.email)){
            _this.$Message.error('邮箱格式不正确');
            return false;
          }
        }
        if(_this.contact==''){
          _this.$Message.error('联系人不能为空');
          return false;
        }
        if(_this.phone==''){
          _this.$Message.error('联系电话不能为空');
          return false;
        }else if (!regTel.test(_this.phone) && !regPhone.test(_this.phone)) {
          _this.$Message.error('请填写正确的联系电话');
          return false;
        }
        axios.post('/platform-upms/org/add',{
          address:_this.address,
          contact:_this.contact,
          email:_this.email,
          name:_this.name,
          phone:_this.phone,
          parentId:_this.parentId,
          regionId:_this.regionId,
          remark:_this.remark
        }).then(res=>{
          if(res){
            _this.getPage();
            _this.removeMsg();
            _this.parentId='';
            _this.$Message.info('新增成功');
          }
        })
      },
      cancelBtn(){
        this.view=false;
        this.inputDis=true;
        this.removeMsg();
      },
      editItem(){
        let _this=this;
        if(_this.id==''){
          _this.$Message.info('请选择要编辑的组织');
        }else{
          _this.cityList=[{id:_this.regionId,name:_this.regionName}];
          _this.inputDis=false;
          _this.view=true;
          _this.sureBtn=false;
        }
      },
      editBtn(){
        let _this=this;
        let reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        let regTel=/^([0-9]{3,4}-)?[0-9]{7,8}$/;
        let regPhone=/^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
        if(_this.name==''){
          _this.$Message.error('组织名称不能为空');
          return false;
        }
        if(_this.regionId===''){
          _this.$Message.error('区域不能为空');
          return false;
        }
        if(_this.email){
          if(!reg.test(_this.email)){
            _this.$Message.error('邮箱格式不正确');
            return false;
          }
        }
        if(_this.contact==''){
          _this.$Message.error('联系人不能为空');
          return false;
        }
        if(_this.phone==''){
          _this.$Message.error('联系电话不能为空');
          return false;
        }else if (!regTel.test(_this.phone) && !regPhone.test(_this.phone)) {
          _this.$Message.error('请填写正确的联系电话');
          return false;
        }
        axios.post('/platform-upms/org/update',{
          address:_this.address,
          id:_this.id,
          contact:_this.contact,
          email:_this.email,
          name:_this.name,
          phone:_this.phone,
          regionId:_this.regionId,
          remark:_this.remark
        }).then(res=>{
          if(res){
            _this.getPage();
            _this.removeMsg();
            _this.parentId='';
            _this.$Message.info('修改成功');
            _this.inputDis=true;
            _this.view=false;
          }
        })
      },
      confirmBtn(){
        if(this.sureBtn){
          this.addNewBtn();
        }else{
          this.editBtn();
        }
      },
      deleteItem(){
        let _this=this;
        if(_this.id==''){
          _this.$Message.info('请选择要删除的组织');
        }else{
          _this.delMsg=true;
          _this.delId=_this.id;
        }
      },
      ok(){
        let _this=this;
        axios.post('/platform-upms/org/delete',{
          id:_this.delId
        }).then(res=>{
          if(res){
             _this.$Message.info('删除成功');
            _this.delMsg=false
            _this.delId = ''
            _this.getPage()
            _this.removeMsg()
          }
        })
      },
      cancel(){
        this.delMsg = false
        this.delId = ''
      }
    }
  }
</script>

<style scoped>
  #orgContainer{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  #orgContainer .bread{
    font-size: 13px;
    white-space: nowrap;
  }
  #orgContainer .mainBox{
    margin-top: 20px;
    padding-top: 10px;
    height: 92%;
    display: flex;
    justify-content: space-between;
    border-top:1px solid #ccc;
  }
  #orgContainer .mainBox .leftBox{
    width: 40%;
    height: 100%;
    padding: 15px 0 0 20px;
    overflow-y:auto;
    overflow-x: hidden;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #orgContainer .mainBox .rightBox{
    width: 59%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px 20px 0 20px;
  }
  #orgContainer .mainBox .rightBox .btnBox{
    text-align: right;
    margin-bottom: 20px;
  }
  #orgContainer .rightBox .itemBox{
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
  }
  #orgContainer .rightBox .itemBox .rowBox{
    margin-bottom: 10px;
    line-height: 32px;
  }
  #orgContainer .rightBox .itemBox .rowBox .itemBoxName{
    font-weight:600;
    color:#999;
  }
  #orgContainer .bottomBtn{
    text-align: center;
    margin-top: 30px;
  }
  #orgContainer .bottomBtn button{
    margin: 0 10px;
  }
</style>
