<template>
  <div @click="hindsetting1()">
    <!--    <div class="system-main" id="box" v-el:box v-if="!isManger">-->
    <!--      <div class="system-logo" style="height: auto">-->
    <!--        <img :src="imgs.logoimg" alt=""/>-->
    <!--        <label>{{systemname}}</label>-->
    <!--        <div class="system-logo-chi" >-->
    <!--          <div  v-if="userpane"  class="auto system-logo-prompt" style="float: right">-->
    <!--            <span>{{orgpathnames}}</span>-->
    <!--          </div>-->
    <!--          &lt;!&ndash;<div class="system-logo-chi-img1" style="float: right" @mouseenter="mouseenteruser()"  @mouseleave="mouseleaveuser()"></div>&ndash;&gt;-->
    <!--          <span  style="float: right; padding-top: 2px"  @mouseenter="mouseenteruser()"  @mouseleave="mouseleaveuser()"  class="system-logo-chi-span-1">{{$login.f.name}}</span>-->
    <!--          <span style="border-left: 1px solid;float: right;padding-top: 2px" class="system-logo-chi-span-1"> <img src="../../static/newStyle/login-f.png" height="20" width="20"> </span>-->
    <!--          <a href="index.html" onclick="return confirm('您确定要退出系统吗？');" style="float: right;padding-top: 2px">-->
    <!--            <img src="../../static/newStyle/system-off.png" alt="" >-->
    <!--            <span class="system-logo-chi-span-1">退出系统</span>-->
    <!--          </a>-->
    <!--          <div style="float: right"  :class="{'dropstyle':setting,'dropstyle-1':!setting}">-->
    <!--            <dropdown class="auto" >-->
    <!--                      <span data-toggle="dropdown" @click="hindsetting()"  >-->
    <!--                        <img :src="srcsetting" alt=""><span>系统设置</span>-->
    <!--                      </span>-->
    <!--              <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up dropstyle-chi" >-->
    <!--                &lt;!&ndash;                <li>系统信息及设置</li>&ndash;&gt;-->
    <!--                <li style="color: #ffffff;white-space: nowrap"  @click="show=true">修改密码</li>-->
    <!--                <li style="color: #ffffff;white-space: nowrap"  @click="AddChangeMsgShow=true">系统版本</li>-->
    <!--              </ul>-->
    <!--            </dropdown>-->
    <!--          </div>-->

    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="system-left tree-flex" :class="{'system-left-1': !treeOrIcon}" id="top" v-el:top >-->
    <!--        <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}"  >-->
    <!--          <div class="span system-left-tree" >-->
    <!--            <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" :treeOrIcon="treeOrIcon"  :tabs="tabs" v-ref:tree></left-tree>-->
    <!--            &lt;!&ndash;            <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>&ndash;&gt;-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="system-foot-stretch" >-->
    <!--          <a @click="changeShow()"><img src="../../static/images/lefticon/菜单伸缩.png" alt=""></a>-->
    <!--        </div>-->
    <!--      </div>-->


    <!--      <div class="system-right" :class="{'system-right-1': !treeOrIcon}" id="bottom" v-el:bottom>-->
    <!--        <div class="span">-->
    <!--          <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>-->
    <!--          <dynamic :comps='[]' :showup="true" :showhide="false" name='main' :selecttab.sync="selecttab" @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--            <div class="system-foot"  v-el:bottom>-->

    <!--              <div class="system-foot-box">-->

    <!--              </div>-->
    <!--            </div>-->
    <!--    </div>-->
    <div class='flex-row  system-main' id="box" v-el:box v-if="!isManger">
      <div class="auto "  :class="{'login-operator1':$refs.mic.tabs.length === 0,'login-operator':$refs.mic.tabs.length != 0}">
            <span>
               <img
                 src="../assets/people.png" height="15" width="15">
              登录人：</span>
        <label>{{orgpathnames}}</label>
      </div>
      <div class="system-left tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top" v-el:top >
        <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}"  >
          <div class="span system-left-tree " style="height:85%">
            <h3>{{systemname}}</h3>
            <!--            <div class="span" style="margin-bottom:10px;padding-bottom:5px;padding-top:5px;flex: 1;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;">-->
            <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" v-show="treeOrIcon" :tabs="tabs" v-ref:tree></left-tree>
            <!--&lt;!&ndash;              <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>&ndash;&gt;-->
          </div>

          <div class="tree-flex-footer">
            <!--            <a @click="changeShow()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">菜单伸缩</span></a>-->
            <!-- <a><img src="../../../static/treeset.png" alt="">系统设置</a> -->
            <dropdown class="auto">
              <button type="button" data-toggle="dropdown">
                <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
              </button>
              <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
                <li>系统信息及设置</li>
                <!-- <li>{{name}}</li> -->
                <li>{{date}}</li>
                <li @click="show=true">修改密码</li>
                <li @click="AddChangeMsgShow=true">系统版本:1.0.0</li>
              </ul>

            </dropdown>
            <a href="index.html" onclick="return confirm('您确定要退出系统吗？');">
              <img :src="imgs.out" alt="" ><span v-if="treeOrIcon">退出系统</span>
            </a>
          </div>
        </div>
      </div>
      <!-- <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> -->

      <div class="flex right-bg  system-right" id="bottom" v-el:bottom>
        <!-- <operator-badge></operator-badge> -->
        <div class="span">
          <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>
          <dynamic :comps='[]' name='main' :selecttab.sync="selecttab" @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>
        </div>
      </div>
    </div>
    <div v-show="isManger">
      <route  v-ref:route></route>
    </div>

    <!-- 变更录入 模态框 -->
    <add-changemsg :show="AddChangeMsgShow" v-on:toggle = "AddChangeMsgShow = false"></add-changemsg>
    <!-- 修改密码组件 -->
    <modify-pw :show.sync="show" v-if="show"></modify-pw>
    <!-- 修改密码模态框 -->
  </div>
</template>

<script>
  import vue from 'vue'
  import co from 'co'

  window.onunload = () => {
    vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
  }
  window.onbeforeunload = () => {
    vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
  }
  export default {
    title: '主界面',
    props: ['functions', 'userid'],
    data () {
      return {
        // 左侧树下部三个小图标
        imgs: {
          open: '/images/lefticon/菜单伸缩.png',
          set: '/images/lefticon/系统设置.png',
          out: '/images/lefticon/退出系统.png',
          img1: '/images/newStyle/login-user.png',
          logoimg: '/static/newStyle/fife.png'
          // img2: '/images/lefticon/退出系统.png',
        },
        treeOrIcon: false,
        isManger: false,
        show: false,
        orgpathnames: `${this.$login.f.orgs}-${this.$login.f.deps}-${this.$login.f.name}`,
        systemname: '客服系统',
        date: this.$login.toStandardDateString(),
        tabs:[],       //已初始化页签数组
        selecttab:'',
        setting:true,
        srcsetting:'../../static/newStyle/setting.png'

        // headerHint: true, // 右侧顶部提示信息
        // value: 25645.26,
        // AddChangeMsgShow: false,
        // showsum: false
      }
    },
    ready () {
      let component = this.$login.getUrlCompileParames('component')
      if (component) {
        this.isManger = true
        this.$refs.route.init(component, {data: this.functions.functions})
      }
      if(this.$login.f.password == '1'){
        this.$showMessage('本地登录系统为此账户的初始密码，请确认修改密码！！！', ['confirm', 'cancel']).then((res) => {
          if(res == 'confirm')
            this.show = true
        })
      }
      console.log("系统名称",this.$appdata.getSingleValue("系统名称"))
      this.systemname = this.$appdata.getSingleValue("系统名称")? this.$appdata.getSingleValue("系统名称"):'客服系统'
      //   let oBox = this.getElement("box")
      // 	let	oTop = this.getElement("top")
      // 	let	oBottom = this.getElement("bottom")
      // 	let oLine = this.getElement("line")
      //   let that = this
      // 			oLine.onmousedown = function(e) {
      // 				let disX = (e || event).clientX
      // 				oLine.left = oLine.offsetLeft
      // 				document.onmousemove = function(e) {
      // 					let iT = oLine.left + ((e || event).clientX - disX)
      //           var e = e || window.event
      // 					let tarnameb = e.target || e.srcElement
      // 					let maxT = oBox.clientWight - oLine.offsetWidth
      // 					oLine.style.margin = 0
      // 					iT < 0 && (iT = 0)
      // 					iT > maxT && (iT = maxT)
      // 					oLine.style.left = oTop.style.width = iT + "px"
      // 					oBottom.style.width = oBox.clientWidth - iT + "px"
      //           that.$set('treeWidth', iT)
      // 					return false
      // 				}
      // 				document.onmouseup = function() {
      // 					document.onmousemove = null
      // 					document.onmouseup = null
      // 					oLine.releaseCapture && oLine.releaseCapture()
      // 				}
      // 				oLine.setCapture && oLine.setCapture()
      // 				return false
      // 			}
      this.changeShow()
    },
    methods: {
      hindsetting(){

        this.setting=!this.setting
        if(this.setting){
          this.srcsetting='../../static/newStyle/setting.png'
        }else {
          this.srcsetting='../../static/newStyle/setting1.png'
        }

      },
      hindsetting1(){

        if(!this.setting){
          this.srcsetting='../../static/newStyle/setting.png'
          this.setting=true
        }

      },
      isnodo(val){
        console.log(val,'ss')
        this.selecttab = val
      },
      unfurl () {
        if(this.showsum){
          this.showsum = false
        } else {
          this.showsum = true
        }
      },
      // getElement(id) {
      //   return document.getElementById(id)
      // },
      changeShow () {
        //   this.treeOrIcon = !this.treeOrIcon
        //   let oBox = this.getElement("box")
        // 	let	oTop = this.getElement("top")
        // 	let	oBottom = this.getElement("bottom")
        // 	let oLine = this.getElement("line")
        //   if (this.treeOrIcon) {
        //     // oLine.style.left = oTop.style.width = 300 + "px"
        //     oTop.style.width = 150 + "px"
        //     oBottom.style.width = oBox.clientWidth - 150 + "px"
        //   }else {
        //     oLine.style.left = oTop.style.width = 50 + "px"
        //     oBottom.style.width = oBox.clientWidth - 50 + "px"
        //   }
        // }
        this.treeOrIcon = !this.treeOrIcon
        // if (this.treeOrIcon) {
        //   this.$els.top.style.width = 14 + "%"
        //   this.$els.bottom.style.width = this.$els.box.clientWidth - 14 + "%"
        // }else {
        //   this.$els.top.style.width = 8 + "%"
        //   this.$els.bottom.style.width = this.$els.box.clientWidth - 8 + "%"
        // }
      },
      changeMain(userid) {
        this.$goto('res-main', {userid: this.userid}, 'self')
      },
      tabChange (name) {
        console.log(name,'tabchanage')
        this.selecttab = name
        this.$refs.tree.changeSelect(name)
      },
      tabcg(val){
        console.log(val)
        this.tabs = val
      }
    },
    computed: {
      nowDate () {
        return this.$login.getNowDate()
      }
    }
  }
</script>
<style lang="less">
  /* 组件内通用样式 */
  .select-error {
    button {
      border-bottom: 1px solid #a94442!important;
    }
  }
  // input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
  //       -webkit-appearance:textfield;
  // }
  /* 表单输入框组 */
  .form-input-group {
    display: flex;

    label {
      width: 100px;
      text-align: right;
      + * {
        flex: 1;
      }
    }
  }
  // 日期组件在表单中沾满
  .form-horizontal .datepicker {
    width: 100%;
  }
  // 下拉选择框占据剩余全部空间
  .select-overspread {
    .form-group {
      // margin: 0px 5px 10px 0px;
      .form-control {
        margin-right: 0px;
      }
    }
    .btn-group, .btn-group-vertical {
      width: 100%;
      // padding-right: 5px;
      button {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .dropdown-menu {
      width: 100%
    }
  }
  // 需要特定宽度的的样式
  .width-60 {
    width: 60px;
  }
  .userpanel {
    font-weight: 300;
    color: #333;
    position: fixed;
    right: 30px;
    top: 45px;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 4px 10px 4px 10px;
    border-radius:2px;
  }
  .width-80 {
    width: 80px;
  }
  .width-100 {
    width: 100px;
  }



  /*右侧区域的背景*/
  .right-bg {
    width: 100%;
    flex: 1;
    color: #304A66;
  }
  .tree-flex {
    height: 100%;
    // width: 150px;
    /*width: 60px;*/
    background: #4a7cae;
    color: #fff;

  }
  .tree-flex-icon {
    width: 50px;
    /*transition: 0.5s;*/
    > .span {
      overflow-x: visible;
    }
  }
  .tree-flex h3 {
    text-align: center;
    margin: 1em 0;
  }

  .tree-flex-footer {
    height: 50px;
    display: flex;
    flex-direction:column;
    color: #fff;
  }
  .tree-flex-footer a,.tree-flex-footer button{
    flex: 1;
    padding: 8px 5px;
    font-size: 1.2em;
    // border-top: 1px solid #697D93;
    border-top: 1px solid #4a7cae;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
  }
  .tree-flex-footer button {
    height: auto;
    width: 100%;
    border-radius: 0px;
    background-color: rgba(255,255,255,0);
    border: none;
    border-top: 1px solid #4a7cae;
    // border-top: 1px solid #697D93;
    text-align: left;
  }
  .tree-flex-footer button:hover{
    outline: none;
    background-color: rgba(255,255,255,0.2);
  }
  .tree-flex-footer button:focus {
    outline: none;
    background-color: rgba(255,255,255,0.5);
  }
  .tree-flex-footer a:hover {
    color: #FFF;
    background-color: rgba(255,255,255,0.2);
  }
  .tree-flex  .btn-group {
    height: 50px!important;
  }

  .tree-flex .dropdown-menu {
    /* 控制显示列表的样式 */
    background: #4a7cae;
    border-radius: 0px;
    color: #fff;
    width: auto;
    margin: 0px;
    padding: 0px;
  }
  .tree-flex .dropdown-menu-up {
    /* bottom，top控制上下，left和right控制左右*/
    left: 100%!important;
    top: auto!important;
    bottom: 0;
  }
  .tree-flex .dropdown-menu-down {
    /* bottom，top控制上下，left和right控制左右*/
    left: 100%!important;
    top: 0!important;
  }
  .tree-flex .dropdown-menu li{
    text-align: center;
    line-height: 50px;
    border-bottom: 1px solid #697D93;
    font-size: 1.2em;
    width: auto;
    white-space: nowrap;
    cursor: default;

  }
  .tree-flex .dropdown-menu li + li {
    text-align: left;
    border: 0;
    line-height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 1em;
    cursor: pointer;
  }
  .tree-flex .dropdown-menu li + li:hover {
    background-color: rgba(255,255,255,0.2);
  }
  .tree-flex .dropdown-menu li a {
    border: none;
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 1em;
    padding: 0px;
  }
  .tree-flex .dropdown-menu li a:hover {
    color: #fff;
    background-color: rgba(255,255,255,0);
  }
  .tree-flex img{
    height: 1.2em;
    width: 1.2em;
    margin-right: 15px;
    margin-left: 5px;
  }
  .line {
    height: 100%;
    width: 5px;
    background: #4C637B;
    cursor: e-resize;
  }
  /*为树（tree）组件写的样式*/
  .tree-img {
    font-size: 1.2em;
  }

  /*将较长信息截断显示，鼠标悬停显示全部信息*/
  .cutout50 {
    max-width: 50px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 滚动条样式 */
  /*---滚动条默认显示样式--*/
  ::-webkit-scrollbar-thumb{
    //  display: none;
    background-color:rgba(0,0,0,0.4);
    /*background-color:red;*/
    height:50px;
    outline-offset:-2px;
    /*outline:2px solid #fff;*/
    -webkit-border-radius:4px;
    /*border: 2px solid #fff;*/
  }

  /*---鼠标点击滚动条显示样式--*/
  ::-webkit-scrollbar-thumb:hover{
    //  display: inherit;
    background-color:rgba(0,0,0,0.4);
    height:50px;
    -webkit-border-radius:4px;
  }
  /*---滚动条大小--*/
  ::-webkit-scrollbar{
    width:8px;
    height:8px;
  }
  /*---滚动框背景样式--*/
  ::-webkit-scrollbar-track-piece{
    /* 全透明，不显示 */
    background-color:rgba(255,255,255,0);
    -webkit-border-radius:0;
  }
</style>
