<template>
    <div class="workInterface">
        <el-dialog :visible.sync="visible" class="dialog-workTopu" @close="$emit('update:show', false)">
            <div class="deviceInfoTopu">
                <div class="message-box">
                    <div class="message-box-header">
                        <div class="message-box-title">
                            <span>设备信息</span>
                        </div>
                        <i class="icon icon-close" @click="$emit('update:show', false)"></i>
                    </div>
                    <div class="message-box-content">
                        <div class="device-info-form">
                            <ul>
                                <li class="item-info" v-for="(item,index) in deviceInfo" :key="index">
                                    <label class="item-info-label">{{item.label}}：</label>
                                    <div class="item-info-content">{{item.value}}</div>
                                </li>
                            </ul>
                        </div>
                        <div class="device-view-tab" v-show="true">
                            <span class="device-view" :class="{'active': viewType === 'virtual' ? true : false}" @click="toggleView('virtual')">虚拟视图</span>
                            <span class="device-view" :class="{'active': viewType === 'actual' ? true : false}" @click="toggleView('actual')">实际视图</span>
                        </div>
                        <div class="device-list">
                            <el-scrollbar>
                                <ul v-if="viewType === 'virtual'">
                                    <li v-for="(item,index) in deviceList" :key="index" :class="item.class">
                                        <el-popover placement="right" width="380" trigger="click">
                                            <div class="devicePopUp">
                                                <ul>
                                                    <li><span class="pop-title">设备编码:</span><span class="pop-content">{{item.devId}}</span></li>
                                                    <li><span class="pop-title">接口名称:</span><span class="pop-content">{{item.ifDescription?item.ifDescription:'N/A'}}</span></li>
                                                    <li><span class="pop-title">接口类型:</span><span class="pop-content">{{item.ifTypeDesc?item.ifTypeDesc:'N/A'}}</span></li>
                                                    <li><span class="pop-title">IP地址:</span><span class="pop-content">{{item.ifHash?item.ifHash:'N/A'}}</span></li>
                                                    <li><span class="pop-title">管理状态:</span><span class="pop-content">{{item.adminStatusDesc?item.adminStatusDesc:'N/A'}}</span></li>
                                                    <li><span class="pop-title">显示状态:</span><span class="pop-content">{{item.statusDesc?item.statusDesc:'N/A'}}</span></li>
                                                    <li><span class="pop-title">操作状态:</span><span class="pop-content">{{item.operationStatusDesc?item.operationStatusDesc:'N/A'}}</span></li>
                                                    <li><span class="pop-title">接口速度:</span><span class="pop-content">{{item.ifspeed?item.ifspeed:'N/A'}}</span></li>
                                                    <li><span class="pop-title">接口别名:</span><span class="pop-content">{{item.ifAlias?item.ifAlias:'N/A'}}</span></li>
                                                    <li><span class="pop-title">物理地址:</span><span class="pop-content">{{item.phyAddress?item.phyAddress:'N/A'}}</span></li>
                                                    <li><span class="pop-title">上次改变时间:</span><span class="pop-content">{{item.lastChangeTime?item.lastChangeTime:'N/A'}}</span></li>
                                                    <li><span class="pop-title">VPN:</span><span class="pop-content">{{item.vpnName?item.vpnName:'N/A'}}</span></li>
                                                </ul>
                                            </div>
                                            <div slot="reference">
                                                <i class="icon icon-checked" v-if="item.checked"></i>
                                                <i class="icon deviceIcon" :class="item.class" @contextmenu.prevent="handleClick(index)"></i>
                                                <span class="deviceNo" @contextmenu.prevent="handleClick(index)">{{item.ifAlias}}</span>
                                                <!--①子接口模式不判断主接口的状态，都可以进入子接口界面-->
                                                <!--在子接口界面：-->
                                                <!--;是否可以删除，跟主接口的判断是一样的，不是用户现在操作的VPN的业务是不可以删除的-->
                                                <!--(界面直接隐藏掉)-->
                                                <!--新增时，有一种特殊的情况：如果子接口没有关联业务，但是IP不为“N/A”(也就是IP地址不为空时是不能进行【新增业务】操作的，对应的字段为ifHash)-->
                                                <div  v-if="ifType=='2'">
                                                    <!--子接口-->
                                                    <!--业务那块 灰色的子接口不能右键操作了-->
                                                    <div v-if="item.class!='icon-gray-port'">
                                                        <p class="tooltip" v-if="item.isClick" v-on:click="handlePopUp(item,$event)">
                                                            <i :class="item | deviceClassFilter" class="icon"></i>
                                                            <span>选择子接口</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div v-else>
                                                    <!--物理接口-->
                                                    <div v-if="item.vpnName != dataSet.vpnName">
                                                        <!--不同名不可删除-->
                                                        <div v-if="item.class=='icon-blue-port'&& item.isClick">
                                                            <!--<p class="tooltip"  v-on:click="handlePopUp(item,$event)">-->
                                                            <!--<i :class="item | deviceClassFilter" class="icon"></i>-->
                                                            <!--<span>{{item | deviceTextFilter}}</span>-->
                                                            <!--</p>-->
                                                        </div>
                                                        <div v-else>
                                                            <p class="tooltip" v-if="item.class!='icon-gray-port' && item.isClick"  v-on:click="handlePopUp(item,$event)">
                                                                <i :class="item | deviceClassFilter" class="icon"></i>
                                                                <span>{{item | deviceTextFilter}}</span>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div v-else>
                                                        <p class="tooltip" v-if="item.class!='icon-gray-port' && item.isClick"  v-on:click="handlePopUp(item,$event)">
                                                            <i :class="item | deviceClassFilter" class="icon"></i>
                                                            <span>{{item | deviceTextFilter}}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-popover>
                                    </li>
                                </ul>
                                <!--设备信息实际视图-->
                                <actual-view v-else-if="viewType === 'actual'"
                                             :device-type="deviceType"
                                             :grove-list="actualSectionList"
                                             :if-type="ifType"
                                             :data-set="dataSet"
                                             @if-right-click="handleIfRightClick"
                                             @pop-up-click="handlePopUp"
                                />
                            </el-scrollbar>
                        </div>
                    </div>
                    <div class="message-box-footer" slot="footer">
                        <div class="message-box-btn btn-group">
                            <button class="vpnButton primary" @click="handleSure">确定</button>
                            <button class="vpnButton cancel"  @click="$emit('update:show', false)">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="subVisible" class="dialog-subInterface" v-if="ifType=='2'" @close="$emit('update:subVisible', false)">
            <div class="subInterface">
                <div class="message-box">
                    <div class="message-box-header">
                        <div class="message-box-title">
                            <span>子接口列表</span>
                        </div>
                        <i class="icon icon-close" @click="subVisible=false"></i>
                    </div>
                    <div class="message-box-content">
                        <el-form :inline="true" :model="form" label-width="0" class="subInterfaceForm">
                            <el-form-item>
                                <el-input v-model="form.ifDescription" placeholder="请输入子接口名称" clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="form.ip" placeholder="请输入ip地址" clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <button class="vpnButton primary"  type="button" @click="handleSubSearch">查询</button>
                            </el-form-item>
                            <i class="button_plus" @click="handlePlus" type="button"></i>
                        </el-form>
                        <div class="interfaceTabel">
                            <el-scrollbar>
                                <el-table :data="subInterfaceList" style="width: 100%" size="mini">
                                    <el-table-column prop="" label="" width="40px">
                                        <template slot-scope="{ row, column, $index }" >
                                            <span>{{$index+1}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="" label="" width="35px">
                                        <template slot-scope="{ row, column, $index }" >
                                            <i class="icon icon-checked" v-if="row.checked"></i>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="ifDescription" label="子接口名称"></el-table-column>
                                    <el-table-column prop="ifHash" label="IP地址"></el-table-column>
                                    <el-table-column prop="statusDesc" label="状态" width="60px"></el-table-column>
                                    <el-table-column prop="isDeployed" label="业务状态">
                                        <template slot-scope="scope">
                                            <span>{{scope.row.isDeployed=='2'?'已关联':'未关联'}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="" label="" width="80px">
                                        <template slot-scope="{ row, column, $index }" >
                                            <!--①子接口模式不判断主接口的状态，都可以进入子接口界面-->
                                            <!--在子接口界面：-->
                                            <!--;是否可以删除，跟主接口的判断是一样的，不是用户现在操作的VPN的业务是不可以删除的-->
                                            <!--(界面直接隐藏掉)-->
                                            <!--新增时，有一种特殊的情况：如果子接口没有关联业务，但是IP不为“N/A”(也就是IP地址不-->
                                            <!--为空时是不能进行【新增业务】操作的，对应的字段为ifHash)-->
                                            <div v-if="row.vpnName == dataSet.vpnName">
                                                <i class="icon icon-contact" v-if="row.isDeployed=='1'||!row.isDeployed" @click="handleSubWork($index)"></i>
                                                <i class="icon icon-del" v-if="row.isDeployed=='2'" @click="handleSubDel($index)"></i>
                                            </div>
                                            <div v-if="row.vpnName != dataSet.vpnName && row.isDeployed == '1' && row.ifHash == 'N/A'">
                                                <i class="icon icon-contact"  @click="handleSubWork($index)"></i>
                                            </div>
                                            <!--新增-->
                                            <div v-if="!row.isDeployed">
                                                <i class="icon icon-contact"  @click="handleSubWork($index)"></i>
                                                <i class="icon icon-map-device-del" v-if="!row.isDeployed" @click="handleSubDelNew($index)"></i>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-scrollbar>
                        </div>
                    </div>
                    <div class="message-box-footer" slot="footer">
                        <div class="message-box-btn btn-group">
                            <button class="vpnButton primary" @click="handleSubSubmit">确定</button>
                            <button class="vpnButton cancel"  @click="handleCancelSub">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!--业务参数-->
        <work-params :show.sync="workParamVisible" :dataSet="dataSet" @isSubmit="handleWorkManage"></work-params>
        <!--删除弹框-->
        <dialog-del :show.sync="delShow" @isSure="handleDelete"></dialog-del>
    </div>
</template>
<script>
  import workService from '../../services/work.service'
  let workHttps = new workService()
  import workParams from './workParams'
  //删除弹框
  import dialogDel from '../dialog/dialogDel'
  import ActualView from '../actualView/actualView'
  export default {
    name: "deviceInfo",
    data(){
      return{
        deviceType: '',//设备类型
        devId:'',  //设别id
        ifType:'', //vpn场景
        ifCard:'', //卡编码
        visible: this.show, //接口弹窗 显示与隐藏
        subVisible:false,   //子接口列表 显示与隐藏
        workParamVisible:false, //业务参数显示与隐藏
        delShow:false,      //删除确认框
        isSelectedIndex:'', //接口 选中索引
        // 设备名称、设备IP、厂商、型号、位置、状态、出厂日期、运行时间、上一次的更新时间
        deviceInfo:[
          {reqlabel:'label',label:'设备名称',value:'暂无'},
          {reqlabel:'ip',label:'IP地址',value:'暂无'},
          {reqlabel:'vendor',label:'厂商',value:'暂无'},
          {reqlabel:'typeName',label:'型号',value:'暂无'},
          {reqlabel:'location',label:'设备位置',value:'暂无'},
          {reqlabel:'status',label:'设备状态',value:'暂无'},
          {reqlabel:'mfgDate',label:'出厂日期',value:'暂无'},
          {reqlabel:'runTime',label:'运行时间',value:'暂无'},
          {reqlabel:'lastPoll',label:'上一次更新时间',value:'暂无'},
        ],
        deviceList:[],       //接口列表
        subInterfaceList:[], //子接口列表
        totalSubInterfaceList:[], //子接口列表 总的 总对于筛选
        requestObj:{},  //设备信息
        //子接口
        form:{ifDescription:'',ip:''},
        delType:'',  //子接口删除类型
        subSelectedIndex:"",
        subRequestObj:{},  //子接口参数
        viewType: 'virtual',//视图类型：虚拟(virtual)/实际(actual)
        actualSectionList: []//实际设备信息
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      dataSet:{
        type:Object,
        default: function () {
          return {devId: '',ifType:'',vpnName:'',ifRightClickable: true }
        }
      }
    },
    components:{
      ActualView,
      workParams,dialogDel},
    filters:{
      deviceClassFilter:function (val) {
        let  textClass ="";
        let  valClass = val.class
        let type = val.sceneType
        switch (valClass) {
          case "icon-green-port":
            if(type == '1'){
              textClass='icon-contact'
            }else {
              textClass='icon-eyes'
            }
            break;
          case "icon-blue-port":
            if(type == '1'){
              textClass='icon-del'
            }else {
              textClass='icon-eyes'
            }
            break
          default:
            textClass = ""
        }
        return textClass
      },
      deviceTextFilter:function (val) {
        let  text ="";
        let  valClass = val.class
        let  type = val.sceneType
        switch (valClass) {
          case "icon-green-port":
            if(type == '1'){
              text='关联业务'
            }else {
              text='选择子接口'
            }
            break;
          case "icon-blue-port":
            if(type == '1'){
              text='删除业务'
            }else {
              text='选择子接口'
            }
            break
          default:
            text = ""
        }
        return text
      }
    },
    mounted(){},
    methods:{
      //设备信息点击确定
      handleSure(){
        this.$emit('update:show', false)
        let list = []
        for(let key in  this.requestObj){
          list = list.concat( this.requestObj[key])
        }
        this.$emit('changeWorkData',list)
      },
      //接口 li 点击
      handleClick(index){
        if (this.dataSet.ifRightClickable === false) return

        this.isSelectedIndex = index;
        if(this.deviceList[index]['isClick']){
          this.$set(this.deviceList[index],'isClick',!this.deviceList[index]['isClick'])
        }else {
          let len = this.deviceList.length;
          for(let i=0; i<len; i++){
            this.deviceList[i]['isClick'] = false
          }
          this.$set(this.deviceList[index],'isClick',true)
        }
      },
      //点击li弹出选项
      handlePopUp(item,event){
        if (event) event.stopPropagation();
        if(this.ifType=='1'){ //interface  弹出是否是业务列表还是删除框
          if(item.class=='icon-green-port'){
            this.workParamVisible = true //是否关联业务
          }else {
            this.delShow = true   //是否删除
          }
        }else if(this.ifType=='2'){
          this.popSubInterface(item)
        }
      },
      //子接口列表弹窗
      popSubInterface(item){
        //清除form表单数据
        for(let key in this.form){
          this.form[key]=""
        }
        this.subRequestObj = {},
          this.delType = ''
        this.subSelectedIndex = ''
        this.handleSubList(item)
        this.subVisible = true
        this.ifCard = item.ifDescription
      },
      //初始化 设备信息列表
      initData(){
        let  requestObj={};
        let vm = this;
        requestObj.devId = vm.devId;
        requestObj.ifType = vm.ifType;
        workHttps.getBoardListByIdAndType(requestObj).then((res)=>{
          if(res.code===0){
            if(res.data.page.length!=0){
              vm.handleDeviceInfo(res.data.page)
            }else{
              vm.handleDeviceInfo()
            }
            if(res.data.info.length==0){
              vm.deviceList =[];
            }else {
              vm.deviceList = vm.handleDeviceList(res.data.info);
            }
          }else {
            _toast(res.msg)
          }
        }).catch((err=>{
        }))
      },
      //处理设备信息
      handleDeviceInfo(page){
        if(page){
          let data = page[0];
          this.deviceInfo.map(v=>{
            if(v.reqlabel === 'typeName') {
              this.deviceType = data[v.reqlabel]
            }

            v.value = data[v.reqlabel]
            return  v
          })
        }else {
          this.deviceInfo.map(v=>{
            v.value = '暂无'
            return  v
          })
        }
      },
      //处理物理接口列表
      handleDeviceList(data){ //0灰 1绿 2蓝 isUsed
        return data.map(v=>{
          let s=v;
          if(s.isUsed=='0'){
            s.class="icon-gray-port"
          }else if(s.isUsed=='1'){
            s.class="icon-green-port"
          }else if(s.isUsed=='2'){
            s.class="icon-blue-port"
          }else {
            s.class=""
          }
          s.isClick=false
          s.checked=false
          s.sceneType = this.ifType
          return s
        })
      },
      //是否删除
      handleDelete(isDel){
        if(this.ifType=='1'){
          this.handleDeleteInter(isDel)
        }else {
          this.handleDeleteSubInter(isDel)
        }
      },
      //interface 场景下删除
      handleDeleteInter(isDel){
        let index = this.isSelectedIndex;
        if(isDel){
          //确定删除 ， mngType 为2 删除选项去掉
          this.$set(this.deviceList[index],'checked',true)
          this.$set(this.deviceList[index],'isClick',!this.deviceList[index]['isClick'])
          let tempOnj = {
            devId:  this.devId,
            mngType: '2',
            ifName: this.deviceList[index].ifDescription,
          }
          this.requestObj[this.deviceList[index].ifDescription] = Object.assign(tempOnj,{})
        }else {
          this.$set(this.deviceList[index],'isClick',!this.deviceList[index]['isClick'])
        }
      },
      //subIternface 场景下删除
      handleDeleteSubInter(isDel){
        let index = this.subSelectedIndex; //查询类别和总的列表数据保持一致
        if(isDel){
          let delifDescription = this.subInterfaceList[index].ifDescription
          let deltotalIndex = -1
          for(let i=0,len = this.totalSubInterfaceList.length;i<len;i++){
            if(this.totalSubInterfaceList[i].ifDescription == delifDescription){
              deltotalIndex = i;
              break;
            }
          }
          //确定删除 ， mngType 为0 删除选项去掉
          if(this.delType=='1'){    //删除新增子接口
            this.subInterfaceList.splice(index,1)
            this.totalSubInterfaceList.splice(deltotalIndex,1)
          }else  if(this.delType=='2'){
            this.$set(this.subInterfaceList[index],'checked',true)
            this.$set(this.totalSubInterfaceList[deltotalIndex],'checked',true)
            let tempOnj = {
              devId:  this.devId,
              mngType: '2',
              ifName: this.subInterfaceList[index].ifDescription,
            }
            this.subRequestObj[this.subInterfaceList[index].ifDescription] = Object.assign(tempOnj,{})
          }
        }
      },
      //添加业务参数
      handleWorkManage(value){
        //确定删除 ， mngType 为0 删除选项去掉 1 关联业务
        if(this.ifType=='2'){
          let index = this.subSelectedIndex;
          this.$set(this.subInterfaceList[index],'checked',true)
          let tempOnj = {
            devId:  this.devId,
            mngType: '1',
            ifName: this.subInterfaceList[index].ifDescription,
          }
          this.subRequestObj[this.subInterfaceList[index].ifDescription] =  Object.assign(tempOnj,value)

        }else if(this.ifType=='1') {
          let index = this.isSelectedIndex;
          this.$set(this.deviceList[index],'checked',true)
          this.$set(this.deviceList[index],'isClick',!this.deviceList[index]['isClick'])
          let tempOnj = {
            devId:  this.devId,
            mngType: "1",
            ifName: this.deviceList[index].ifDescription,
          }
          this.requestObj[this.deviceList[index].ifDescription] = Object.assign(tempOnj,value)
        }
      },
      //请求子接口列表
      handleSubList(item){
        let requestObj = {}
        let vm = this;
        requestObj.devId = item.devId
        requestObj.ifType = this.ifType
        requestObj.ifIndex = item.ifIndex
        workHttps.getSubInterfaceList(requestObj).then((res)=>{
          if(res.code===0){
            let list =[];
            if(res.data.page.length!=0){
              list = [...res.data.page]
              list.map((v,i)=>{
                v.checked = false
                v.isAdd = false
                return v
              })
            }
            vm.subInterfaceList = list.concat([]);
            vm.totalSubInterfaceList = list.concat([]);
          }else {
            _toast(res.msg)
          }
        }).catch((err=>{
          console.log(err)
        }))
      },
      //点击子接口列表 添加按钮 出现一列数据 依次递增
      handlePlus(){
        let obj={'isAdd':true};
        if(this.totalSubInterfaceList.length != 0){
          let ifName = this.totalSubInterfaceList[0].ifDescription;
          let nameList = ifName.split('.');
          let ifDescription = `${nameList[0]}.${parseInt(nameList[1]) +1}`;
          obj.ifDescription = ifDescription;
          this.totalSubInterfaceList.unshift(obj)
          this.subInterfaceList = [...this.totalSubInterfaceList]
        }else {
          // this.totalSubInterfaceList.push({ifDescription:'GigabitEthernet3/0.1','isAdd':true})
          this.totalSubInterfaceList.push({ifDescription:`${this.ifCard}.1`,'isAdd':true})
          this.subInterfaceList = JSON.parse(JSON.stringify(this.totalSubInterfaceList))
        }
      },
      //删除新增子接口
      handleSubDelNew(index){
        this.delShow = true
        this.subSelectedIndex = index
        this.delType = '1'
      },
      //删除已有的接口数据
      handleSubDel(index){
        this.delShow = true
        this.subSelectedIndex = index
        this.delType = '2'
      },
      //子接口新增业务
      handleSubWork(index){
        this.subSelectedIndex = index
        this.workParamVisible = true
      },
      //子接口列表搜索
      handleSubSearch(){
        let obj={};
        for(let key in this.form){
          if(this.form[key]){
            obj[key] = this.form[key];
          }
        }
        this.handleSubTabelData(obj)
      },
      //筛选数据
      handleSubTabelData(obj){
        let list = this.totalSubInterfaceList.concat([]);
        let tempList = [];
        if(JSON.stringify(obj)=='{}'){
          this.subInterfaceList = list
        }else {
          list.forEach(function (item) {
            let isPass = false;
            for(let key in obj){
              if(item[key].indexOf(obj[key])!=-1){
                isPass = true
              }
            }
            if(isPass){
              tempList.push(item)
            }
          })
          this.subInterfaceList = tempList
        }
      },
      //子接口列表点击确定 total 列表和查询列表保持一致
      handleSubSubmit(){
        let vm =this;
        let keyList = Object.keys(vm.subRequestObj);
        let lastData =[]
        keyList.forEach(function (item) {
          lastData.push(vm.subRequestObj[item])
        })
        //如果没有选择 则设备信息不会出现标志
        if(lastData.length != 0){
          this.$set(this.deviceList[this.isSelectedIndex],'checked',true)
        }
        this.$set(this.deviceList[this.isSelectedIndex],'isClick',!this.deviceList[this.isSelectedIndex]['isClick'])
        this.requestObj[this.deviceList[this.isSelectedIndex].ifDescription] = lastData
        this.subVisible = false
      },
      //子接口列表点击取消
      handleCancelSub(){
        this.subVisible = false
        this.$set(this.deviceList[this.isSelectedIndex],'isClick',!this.deviceList[this.isSelectedIndex]['isClick'])
      },
      //切换实际/虚拟视图
      toggleView(val) {
        if(this.viewType === val) {
          return
        }
        this.viewType = val;
        if(val === 'actual') {
          this.handleActualList()
        }
      },
      //获取接口实际视图数据
      handleActualList() {
        let  requestObj={};
        let vm = this;
        requestObj.devId = vm.devId;
        //requestObj.devId = 'DC000000000008';
        //requestObj.devId = 'DC000000000010';
        // requestObj.devId = 'DC000000000011';
        workHttps.getSectionListById(requestObj).then((res)=>{
          if(res.code===0){
            if(res.data.grove.length==0){
              vm.actualSectionList =[];
            }else {
              vm.actualSectionList = vm.formatActualList(res.data.grove);
            }
          }else {
            _toast(res.msg)
          }
        }).catch((err=>{
        }))
      },
      //处理实际视图接口数据
      formatActualList(data) {//0灰 1绿 2蓝 isUsed
        for (let grove of data) {
          if(grove.cardList.length > 0) {
            for(let card of grove.cardList) {
              if (card.devinterfacelist.length > 0) {
                for(let ifItem of card.devinterfacelist){
                  if(ifItem.isUsed=='0'){
                    ifItem.class="icon-gray-port"
                  }else if(ifItem.isUsed=='1'){
                    ifItem.class="icon-green-port"
                  }else if(ifItem.isUsed=='2'){
                    ifItem.class="icon-blue-port"
                  }else {
                    ifItem.class=""
                  }
                  ifItem.isClick=false
                  ifItem.checked=false
                  ifItem.sceneType = this.ifType
                }
              }
            }
          }
        }
        return data
      },
      //实际视图接口右击事件处理
      handleIfRightClick(item) {
        if (this.dataSet.ifRightClickable === false) return

        let data = this.actualSectionList
        if (item.isClick) {
          for (let grove of data) {
            if (grove.slot === item.ifSlot) {
              for (let card of grove.cardList) {
                if (card.subSlot === item.ifCard) {
                  for (let ifItem of card.devinterfacelist) {
                    if (ifItem.ifNum === item.ifNum){
                      ifItem.isClick = false
                    }
                  }
                }
              }
            }
          }
        } else {
          for (let grove of data) {
            if (grove.slot === item.ifSlot) {
              for (let card of grove.cardList) {
                if (card.subSlot === item.ifCard) {
                  for (let ifItem of card.devinterfacelist) {
                    if (ifItem.ifNum === item.ifNum){
                      ifItem.isClick = true
                    } else {
                      ifItem.isClick = false
                    }
                  }
                } else {
                  for (let ifItem of card.devinterfacelist) {
                    ifItem.isClick = false
                  }
                }
              }
            } else {
              for (let card of grove.cardList) {
                for (let ifItem of card.devinterfacelist) {
                  ifItem.isClick = false
                }
              }
            }
          }
        }
      }
    },
    watch: {
      show () {
        this.visible = this.show;
        if(this.visible) {
          this.devId = this.dataSet.devId,
            this.ifType = this.dataSet.ifType,
            this.requestObj = {}
          this.initData()
        } else {
          this.viewType = 'virtual'
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
    .workInterface{
        .icon-blue-port,.icon-gray-port,.icon-green-port{
            .icon-checked{
                position: absolute;
                right:10px;
                top:10px;
            }
        }
        .icon.icon-map-device-del{width:15px;height:15px;vertical-align: middle;margin-left:10px}
        .subInterfaceForm{
            .el-form-item{
                margin-bottom:10px;
            }
            .el-input{width:190px;}
            .button_plus{
                display: inline-block;
                float: right;
                width:34px;
                height:34px;
                background:rgba(44,171,227,1);
                border-radius:2px;
                position: relative;
                &:before, &:after{
                    display: inline-block;
                    position: absolute;
                    content: "";
                    width:14px;
                    height:2px;
                    background-color:#fff;
                    left: 50%;
                    top:50%;
                }
                &:before{
                    transform: translate(-50%);
                }
                &:after{
                    transform: rotate(90deg);
                    margin-left:-7px;
                }
            }
        }
        .interfaceTabel{
            height:430px;
            border:1px solid #DEDEDF;
        }
    }
    .el-popover.el-popper{
        .devicePopUp{
            li{
                line-height:25px;
                .pop-title{margin-right:10px}
            }
        }
    }

</style>
