<template>
  <div id="main" class="h-all">
    <el-container class="h-all">
      <el-header height="auto">
        <div class="header-button-box">
          <el-button size='mini' icon="el-icon-upload2" type="primary" @click="importToExcelInit"
                     v-if="importNetworkPhysicsCommand.visible">{{$t('common.importBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-download" type="primary" @click="exportToExcelInit">{{$t('common.exportBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-circle-plus-outline" type="primary" @click="createNetworkPhysicsLinkInit"
                     v-if="createAndCopyCommand.visible">{{$t('common.createBtn')}}
          </el-button>
          <el-button size = 'mini' icon="el-icon-document" type="primary" @click="copyNetworkPhysicsLinkInit"
                     v-if="createAndCopyCommand.visible">{{$t('common.copyBtn')}}</el-button>
          <el-button size='mini' icon="el-icon-edit" type="primary" @click="updateNetworkPhysicsLinkInit"
                     v-if="updateNetworkPhysicsCommand.visible">{{$t('common.updateBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-delete" type="primary" @click="deleteNetworkPhysicsLinkInit"
                     v-if="deleteNetworkPhysicsCommand.visible">
            {{$t('common.deleteBtn')}}
          </el-button>
        </div>
        <!-- 条件查询工具栏 -->
        <div class="header-search">
          <div class="search-input-box">
            <label>{{$t('NetworkPhysicsLinkConfigurationManagement.NodeNameQuery')}}</label>
            <el-input size = 'mini' :placeholder="$t('common.placeholder')"  v-model="querySelectNode" clearable></el-input>
          </div>
          <div class="search-input-box">
            <label>{{$t('NetworkPhysicsLinkConfigurationManagement.AccessBusinessQuery')}}</label>
            <el-input size = 'mini' :placeholder="$t('common.placeholder')"  v-model="querySelectBusiness" clearable></el-input>
          </div>
          <div class="search-input-box">
            <label>{{$t('NetworkPhysicsLinkConfigurationManagement.DeviceNameQuery')}}</label>
            <el-select v-model="querySelectDevice" size="mini" :placeholder="$t('NetworkPhysicsLinkConfigurationManagement.SelectDevice')" :clearable="true">
              <el-option
                v-for="item in QueryDeviceList"
                :key="item.deviceKey"
                :label="item.deviceName"
                :value="item.deviceKey">
              </el-option>
            </el-select>
          </div>
          <div class="search-input-box">
            <el-button icon="el-icon-search" type="primary" size = 'mini' @click="queryNetworkPhysicsLinkByCondition" v-loading.fullscreen.lock="fullscreenLoading">{{$t('common.queryBtn')}}</el-button>
          </div>
        </div>
      </el-header>
      <!-- table数据表格 -->
      <el-main class="adapt-height-box">
        <el-table
          :empty-text="$t('common.noData')"
          tooltip-effect="dark"
          stripe
          header-row-class-name="table-header"
          cell-class-name="table-cell"
          class="adapt-height"
          height="auto"
          border
          ref="singleTable"
          :data="NetworkPhysicsLinkList"
          highlight-current-row
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange">

          <el-table-column
            type="selection"
            width="28">
          </el-table-column>
          <el-table-column
            prop="nodeName"
            :label="$t('NetworkPhysicsLinkConfigurationManagement.NodeName')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="description"
            :label="$t('NetworkPhysicsLinkConfigurationManagement.Description')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="deviceKey"
            :label="$t('NetworkPhysicsLinkConfigurationManagement.DeviceKey')"
            :show-overflow-tooltip="true"
            :formatter="formatDeviceKey">
          </el-table-column>
          <el-table-column
            prop="port"
            :label="$t('NetworkPhysicsLinkConfigurationManagement.Port')"
            :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>

  </div>
</template>

<script>

  import CommandExecuteContext from '@/commands/CommandExecuteContext'
  import NetworkPhysicsCommands from "@/commands/NetworkPhysicsCommands"
  import DeviceService from '@/domain/services/DeviceService'
  import NetworkPhysicsService from '@/domain/services/NetworkPhysicsService'
  import HelperUtil from '@/utils/HelperUtil'
  import loading from "../../utils/Loading";

  export default {
    name: "NetworkPhysicsLinkConfigurationManagement",
    data: function () {
      return{
        //命令
        commandContext: {},
        //为了创建复制初始化传参
        createAndCopyInitList: [],
        createAndCopyTitle: '',
        //删除相关
        deleteList: [],
        //为修改传参数
        updateInitList: [],

        fullscreenLoading: false,

        //条件查询
        querySelectNode:"",//条件查询节点名称
        querySelectBusiness:"",//条件查询接入业务
        querySelectDevice:"",//条件查询设备名称

        formLabelWidth: '120px',

        form:{
          nodeName:"",
          description:"",
          deviceKey:"",
          port:"",
        },

        //双向绑定展示数据
        NetworkPhysicsLinkList: [],
        //双向绑定展示数据
        QueryDeviceList:[],
        // value: '',
        //保存当前行数据
        currentRow: null,
        //保存多选行数据
        multipleSelection: [],

        //查询条件
        selectList: [],
        deviceList: [],

      }
    },
    mounted: function () {
      this.getAllNetworkPhysicsLinkInit()
    },
    components: {
      CommandExecuteContext,
    },
    watch: {
      commandContext(newVal, oldVal) {
        if (JSON.stringify(newVal) === '{}') {
          this.querySelectNode = ''
          this.querySelectBusiness = ''
          this.querySelectDevice = ''
          this.getAllNetworkPhysicsLink(this);
          this.$refs.singleTable.clearSelection();
        }
        deep: true
      },
    },
    created: function () {
      this.getAllNetworkPhysicsLinkInit()
      this.getAllDeviceInit()
    },
    computed: {
      openTab() {
        return this.$store.state.openTab;
      },
      activeIndex: {
        get() {
          return this.$store.state.activeIndex;
        },
        set(val) {
          this.$store.commit('set_active_index', val);
        }
      },
      //命令
      createAndCopyCommand() {
        return NetworkPhysicsCommands.createNetworkPhysicsCommand(this.createAndCopyTitle, this.createAndCopyInitList, this.commandContext)
      },
      deleteNetworkPhysicsCommand() {
        return NetworkPhysicsCommands.deleteNetworkPhysicsCommand(this.deleteList, this.commandContext)
      },
      updateNetworkPhysicsCommand() {
        return NetworkPhysicsCommands.updateNetworkPhysicsCommand(this.updateInitList, this.commandContext)
      },
      importNetworkPhysicsCommand() {
        return NetworkPhysicsCommands.importNetworkPhysicsCommand(this.commandContext)
      }

    },
    methods: {
      /**
       * @Description  ：单选一行，将所选行进行保存
       * @author       ::zyh
       */
      handleCurrentChange(val) {
        this.currentRow = val;
      },


      /**
       * @Description  ：表格多选框改变时，将所选行进行保存
       * @author       ::zyh
       */
      handleSelectionChange(val) {
        this.multipleSelection = val
      },

      /**
       * @Description  :获取全部网元信息
       * @author       ::zyh
       */
      getAllDeviceInit: function () {
        let loadingInstance=loading.openLoading();
        let _this = this;
        DeviceService.getAllDeviceCollection().then(result => {
          //成功
          this.QueryDeviceList =  Object.values(result)
          loadingInstance.close();
        }).catch(err => {
          //失败
          loadingInstance.close();
          this.InfoTip.errorTip(_this,err);
        })
      },


      /**
       * @Description  ：获取所有网络物理连接初始化
       * @author       :zyh
       */
      getAllNetworkPhysicsLinkInit: function () {
        let _this = this;
        NetworkPhysicsService.getAllNetPhyLinkCollection().then(result => {
          _this.NetworkPhysicsLinkList = Object.values(result);
          console.log(NetworkPhysicsLinkList)
        }).catch(err => {
          //失败
          _this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause);
        });
      },


      /**
       * @Description  ：获取所有网络物理连接信息
       * @author       :zyh
       */
      getAllNetworkPhysicsLink: function(vue){
        let _this = vue;
        NetworkPhysicsService.getAllNetPhyLinkCollection().then(result => {
          _this.NetworkPhysicsLinkList = Object.values(result);

        }).catch(err => {
          //失败
          _this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause);
        });
      },



      /**
       * @Description  ：创建网络物理连接初始化
       * @author       :zyh
       */
      createNetworkPhysicsLinkInit: function () {
        this.createAndCopyTitle = this.$t('NetworkPhysicsLinkConfigurationManagement.dialogNetworkPhysicsCreate');
        this.createAndCopyInitList = {
          "nodeName": "",
          "description": "",
          "deviceKey": "",
          "port": "",
        };
        this.createAndCopyCommand.execute();
      },


      /**
       * @Description  ：复制网络物理连接初始化
       * @author       :zyh
       */
      copyNetworkPhysicsLinkInit: function (){
        if(this.multipleSelection.length == 0){
          //请选择一条信息进行复制
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.COPY_SELECT_CODE))
          return;
        }else if(this.multipleSelection.length > 1){
          //请只选择一条信息进行复制
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.COPY_ONLY_ONE_CODE))
          return;
        }else{
          this.createAndCopyTitle = this.$t('NetworkPhysicsLinkConfigurationManagement.dialogNetworkPhysicsCopy');
          this.createAndCopyInitList = this.multipleSelection[0]
          this.createAndCopyCommand.execute();
        }
      },


      /**
       * @Description  ：修改网络物理连接初始化
       * @author       :zyh
       */
      updateNetworkPhysicsLinkInit: function () {
        if (this.multipleSelection.length == 0) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.UPDATE_SELECT_CODE))
          return;
        } else if (this.multipleSelection.length > 1) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.UPDATE_SELECT_CODE))
          return;
        } else {
          this.updateInitList = {
            "nodeName": this.multipleSelection[0].nodeName,
            "description": this.multipleSelection[0].description,
            "deviceKey": this.multipleSelection[0].deviceKey,
            "port": this.multipleSelection[0].port,
          };
          this.updateNetworkPhysicsCommand.execute();
        }
      },


      /**
       * @Description  :删除网络物理连接初始化（支持批量）
       * @author       :zyh
       */
      deleteNetworkPhysicsLinkInit: function () {
        if (this.multipleSelection.length == 0) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DELETE_SELECT_CODE))
          return;
        } else {
          this.deleteList = []
          for (var i = 0; i < this.multipleSelection.length; i++) {
            this.deleteList.push(this.multipleSelection[i]['nodeName']);
          }
          this.deleteNetworkPhysicsCommand.execute();
        }
      },


      /**
       * @Description  :条件查询网络物理连接
       * @author       :zyh
       */
      queryNetworkPhysicsLinkByCondition: function () {
        let _this = this;
        _this.selectList = this.handleQueryCondition();
        let loadingInstance = _this.Loading.openLoading();
        NetworkPhysicsService.conditionQueryNetPhyLink(_this.selectList).then(result => {
          _this.NetworkPhysicsLinkList = Object.values(result);
          _this.Loading.closeLoading(loadingInstance);
          _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE));
        }).catch(err => {
          _this.Loading.closeLoading(loadingInstance);
          _this.InfoTip.errorTip(_this, err);
        })
      },

      importToExcelInit: function () {
        console.log('导入文件：');
        this.importNetworkPhysicsCommand.execute()
      },


      /**
       * @Description  :导出网络物理连接文件
       * @author       :zyh
       */
      exportToExcelInit: function () {
        let _this = this;
        _this.selectList = this.handleQueryCondition();
        let loadingInstance = loading.openLoading();
        NetworkPhysicsService.downloadNetPhyLink(_this.selectList).then(result => {
          loadingInstance.close();
        }).catch(err => {
          loadingInstance.close();
          this.InfoTip.errorTip(this, err);
        });
      },

      handleQueryCondition: function () {
        let selectList = new Array();
        if (this.querySelectNode != '' && this.querySelectNode != null) {
          selectList.push({
            quaryAttribute: '_key',
            compareSymbol: "like",
            compareValue: this.querySelectNode,
          })
        }
        if (this.querySelectBusiness != '' && this.querySelectBusiness != null) {
          selectList.push({
            quaryAttribute: 'description',
            compareSymbol: "like",
            compareValue: this.querySelectBusiness,
          })
        }
        if (this.querySelectDevice != '' && this.querySelectDevice!= null) {
          selectList.push({
            quaryAttribute: 'deviceKey',
            compareSymbol: "like",
            compareValue: this.querySelectDevice,
          })
        }
        return selectList;
      },


      /**
       * @Description  :过滤deviceKey，转为显示deviceName
       * @author       :zyh
       */
      formatDeviceKey: function (row, column) {
        for (var i = 0; i < this.QueryDeviceList.length; i++) {
          if (this.QueryDeviceList[i]['deviceKey'] == row.deviceKey) {
            return this.QueryDeviceList[i]['deviceName']
            break
          }
        }
      },

    },
  }
</script>

<style scoped>

</style>