<template>
  <div id="svgBox" class="h-all">
    <div id="svgTop" class="SDNC-server-box">
      <div>
        <p style="margin: 0px auto;background-color: #5fa4e8;color: #ffffff;font-size: 15px;">{{ $t('ServerShowInHome.controller') }}</p>
      </div>
      <div class="controller-box">
        <div class="controller-item" v-for="item in SDNCServerList">
          <img class="controller-img" :src="handleSDNCServerImage(item)" v-bind:key="item.serverKey" v-contextmenu:SDNCServerContextmenu/>
          <div class="controller-info">
            <span class="controller-info-name" :title="item.serverName">{{item.serverName}}</span>
            <span class="controller-info-num" :title="$t('ServerShowInHome.belongDevice') + (item.deviceNum==undefined?0:item.deviceNum)">
              {{$t('ServerShowInHome.belongDevice')}}{{item.deviceNum==undefined?0:item.deviceNum}}</span>
          </div>
        </div>
      </div>
    </div>
    <div id="svgResize"></div>
    <div id="svgDown" style="border-top: 1px solid #b5b9a9; " class="others-server-box">
      <div>
        <p style="margin: 0px auto;background-color: #5fa4e8; color: #ffffff;font-size: 15px;">{{ $t('ServerShowInHome.otherServer') }}</p>
      </div>
      <div class="controller-box">
        <div class="controller-item" v-for="item in othersServerList">
          <img class="controller-img" :src="handleOtherServerImage(item)" v-bind:key="item.serverKey" v-contextmenu:othersServerContextmenu/>
          <div class="controller-info">
            <span class="controller-info-name" :title="item.serverName">{{item.serverName}}</span>
          </div>
        </div>
      </div>
      </svg>
    </div>
      <!-- 右键单击SDNC 菜单栏 -->
      <v-contextmenu ref="SDNCServerContextmenu" @contextmenu="handleSDNCServerContextmenu">
        <v-contextmenu-item v-for="command in contextCommands" :key="command.key" @click="command.execute" :disabled="command.disabled">{{command.name}}</v-contextmenu-item>
      </v-contextmenu>
      <!-- 右键单击服务器 菜单栏 -->
      <v-contextmenu ref="othersServerContextmenu" @contextmenu="handleOthersServerContextmenu">
        <v-contextmenu-item v-for="command in contextCommands" :key="command.key" @click="command.execute" :disabled="command.disabled">{{command.name}}</v-contextmenu-item>
      </v-contextmenu>

  </div>
</template>

<script>
import ServerCommands from '../../commands/ServerCommands'
import ServerManager from '../../domain/models/ServerManager'

let curThis = ''

export default {
  name: 'ServerShowInHome',
  props: {
    commands: {},
    alarmLevelConfig: null, // 告警的颜色配置
    serverCollection: null,
    topologyCollection: null
  },
  components: {},
  data () {
    return {
      contextCommands: [],
      SDNCServerList: null,
      othersServerList: null,
      showList: {}// 管辖设备的列表对象
    }
  },
  methods: {
    /**
       * @Description  ：处理SDNC服务器右键响应函数
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/06/05
       */
    handleSDNCServerContextmenu (e) {
      curThis.$refs.othersServerContextmenu.hide()
      let serverId = e.key
      let server = curThis.serverCollection[serverId]
      let deleteFlag = 0// 判断服务器下是否有管辖设备;deleteFlag :有 -- 0；没有 -- 1；默认服务器下有管辖设备。
      if (server.deviceNum === 0 || server.deviceNum === undefined) {
        deleteFlag = 1// 此时服务器下无管辖设备,标志位置为1
      }
      curThis.contextCommands = ServerCommands.generateCommandsForSDNCService(server, curThis.commands, deleteFlag, curThis.showList)
    },

    /**
       * @Description  ：处理其他服务器右键响应函数
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/06/05
       */
    handleOthersServerContextmenu (e) {
      curThis.$refs.SDNCServerContextmenu.hide()
      let serverId = e.key
      let server = curThis.serverCollection[serverId]
      curThis.contextCommands = ServerCommands.generateCommandsForOtherService(server, curThis.commands)
    },

    /**
       * @Description  ：上下拖动改变控制器div大小
       * @author       : yjz
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/03/04
       */
    dragControllerDiv: function () {
      $(document).ready(function () {
        var h = window.screen.height
        var svgResize = document.getElementById('svgResize')
        var svgTop = document.getElementById('svgTop')
        var svgDown = document.getElementById('svgDown')
        var svgBox = document.getElementById('svgBox')
        // svgBox.style.height = h * 0.5 + "px";

        svgResize.onmousedown = function (e) {
          var startY = e.clientY
          svgResize.top = svgResize.offsetTop
          document.onmousemove = function (e) {
            var endY = e.clientY
            var moveLen = svgResize.top + (endY - startY)
            var maxT = svgBox.clientHeight - svgResize.offsetHeight
            if (moveLen < 30) moveLen = 30
            if (moveLen > maxT - 30) moveLen = maxT - 30
            svgResize.style.top = moveLen
            svgTop.style.height = moveLen + 'px'
            svgDown.style.height = (svgBox.clientHeight - moveLen - 5) + 'px'
          }
          document.onmouseup = function (evt) {
            document.onmousemove = null
            document.onmouseup = null
            svgResize.releaseCapture && svgResize.releaseCapture()
          }
          svgResize.setCapture && svgResize.setCapture()
          return false
        }
      }
      )
    },

    /**
       * @Description  ：初始化所需数据
       * @author       : yjz
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    initServerData () {
      let ServerMgr = ServerManager(this.serverCollection)
      let SDNCServerListObject = ServerMgr.getSDNCServer()
      this.SDNCServerList = Object.values(SDNCServerListObject)
      let OtherServerListObject = ServerMgr.getOtherServer()
      this.othersServerList = Object.values(OtherServerListObject)
    },

    /**
       * @Description  ：处理SDNC图片地址
       * @author       : yjz
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    handleSDNCServerImage (d) {
      let imagePath = curThis.alarmLevelConfig[d.status]['controllerAlarmImagePath']
      return imagePath
    },

    /**
       * @Description  ：处理其他服务器地址
       * @author       : yjz
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    handleOtherServerImage (d) {
      let imagePath = curThis.alarmLevelConfig[d.status]['othersServerAlarmImagePath']
      return imagePath
    }

  },
  computed: {},
  watch: {
    // 监听prop，更新本地缓存数据
    serverCollection: {
      handler (newVal, OldVal) {
        this.serverCollection = newVal
        // this.drawView();
        this.initServerData()
      },
      deep: true
    },
    // 监听prop，更新本地缓存数据
    showList: {
      handler (newVal, OldVal) {
        this.showList = newVal
        this.$emit('showDeviceOfController', this.showList)
      },
      deep: true
    }
  },
  // 无法获取 data中的数据、methods中的方法
  beforeCreate () {},
  // 常用的生命周期，可以调用methods中的方法、改变data中的数据
  created () {
    // 将this对象进行转换，避免出现对象未定义错误
    curThis = this
  },
  // 在挂载开始之前被调用
  beforeMount () {},
  mounted () {
    this.dragControllerDiv()
    this.initServerData()
    document.addEventListener('contextmenu', function (event) {
      if (event.target.className != 'controller-img') {
        curThis.$refs.othersServerContextmenu.hide()
        curThis.$refs.SDNCServerContextmenu.hide()
      }
    })
  },
  // 运行期间
  beforeUpdate () {},
  updated () {
  },
  // 销毁期间
  beforeDestroy () {},
  destroyed () {}
}

</script>

<style>
  #svgBox{
    width:100%;
    height: 100%;
    position: relative;
    overflow:hidden;
    border-left: 1px solid #DCDFE6;
  }
  #svgTop{
    height:calc(70% - 5px);
    width:100%;
    float:left;
    overflow: hidden;
  }

  #svgResize{
    position: relative;
    height:5px;
    width:100%;
    cursor: s-resize;
    float:left;
  }

  #svgDown{
    height:30%;
    width:100%;
    float:left;
    overflow: hidden;
  }

  .SDNC-server-box,.others-server-box{
    display: flex;
    flex-direction: column;
  }
  .controller-box{
    flex:1;
  }
  .controller-box:after{
    clear: both;
    content: '.' ;
    display:block;
    width: 0;
    height: 0;
    visibility: hidden;
  }
  .controller-item{
    width: 50%;
    float: left;
    padding: 5px;
    text-align: left;
  }
  #svgTop .controller-img{
    width: 40px;
    cursor: pointer;
  }
  #svgDown .controller-img{
    height: 35px;
  }
  .controller-info-name,.controller-info-num{
    display: block;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
</style>
