<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="success"
                     @click="importToExcelInit"
                     v-if="deleteLinkCommand.visible">
            {{$t("common.importBtn")}}
          </el-button>
          <el-button size='mini' icon="el-icon-download" type="success" @click="exportToExcelInit">
            {{$t("common.exportBtn")}}
          </el-button>
          <el-button size='mini' icon="el-icon-circle-plus-outline" type="primary"
                     v-if="deleteLinkCommand.visible"
                     @click="createLinkInit">
            {{$t("common.createBtn")}}
          </el-button>
          <el-button size='mini' icon="el-icon-delete" type="danger"
                     v-if="deleteLinkCommand.visible"
                     @click="deleteLinkInit">
            {{$t("common.deleteBtn")}}
          </el-button>
          <div class="search">
            <div class="search-input-box">
              <label>{{ $t('LinkConfigurationManagement.linkName') }}：</label>
              <el-input size='mini' :placeholder="$t('common.placeholder')"
                        style="width: 180px"
                        v-model="queryLinkNameInput"
                        clearable>
              </el-input>
            </div>
            <div class="search-input-box">
              <label>{{ $t('LinkConfigurationManagement.startNodeName') }}：</label>
              <el-select size="mini" v-model="queryStartNodeNameInput"
                         :placeholder="$t('LinkConfigurationManagement.selectStartDevicePlaceholder')"
                         :clearable="true">
                <el-option
                  v-for="item in deviceList"
                  :key="item.deviceKey"
                  :label="item.displayName"
                  :value="item.deviceKey"></el-option>
              </el-select>
            </div>
            <div class="search-input-box">
              <label>{{ $t('LinkConfigurationManagement.endNodeName') }}：</label>
              <el-select size="mini" v-model="queryEndNodeNameInput"
                         :placeholder="$t('LinkConfigurationManagement.selectStartDevicePlaceholder')"
                         :clearable="true">
                <el-option
                  v-for="item in deviceList"
                  :key="item.deviceKey"
                  :label="item.displayName"
                  :value="item.deviceKey"></el-option>
              </el-select>
            </div>
            <el-button icon="el-icon-search" type="primary" size='mini' @click="queryLinkDataByCondition"
                       v-loading.fullscreen.lock="fullscreenLoading">{{ $t('common.queryBtn')}}
            </el-button>
          </div>
        </div>
      </el-header>
      <el-main class="adapt-height-box">
        <el-table
          :empty-text="$t('common.noData')"
          header-row-class-name="table-header"
          cell-class-name="table-cell"
          class="adapt-height"
          height="auto"
          border
          ref="singleTable"
          :data="linkList"
          stripe
          tooltip-effect="dark"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="28">
          </el-table-column>
          <el-table-column
            prop="linkKey"
            v-if="false"
            :label="$t('LinkConfigurationManagement.linkId')">
          </el-table-column>
          <el-table-column
            prop="linkName"
            :label="$t('LinkConfigurationManagement.linkName')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="startDeviceName"
            :label="$t('LinkConfigurationManagement.startDeviceName')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="startPortName"
            width="150"
            :label="$t('LinkConfigurationManagement.startDevicePort')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="endDeviceName"
            :label="$t('LinkConfigurationManagement.endDeviceName')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="endPortName"
            :label="$t('LinkConfigurationManagement.endDevicePort')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            width="105px"
            v-if="updateLinkCommand.visible"
            :label="$t('common.operation')">
            <template slot-scope="scope">
              <el-button
                size="mini"
                style="background: #175BE3"
                :title="$t('common.copyBtn')"
                @click="handleCopy(scope.row)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi"></use>
                </svg>
              </el-button>
              <el-button
                size="mini"
                style="background: #008000"
                :title="$t('common.updateBtn')"
                @click="updateLinkInit(scope.row)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
              </el-button>
            </template>
          </el-table-column>
<!--          <el-table-column-->
<!--            prop="startGroupID"-->
<!--            :label="$t('LinkConfigurationManagement.startGroupID')"-->
<!--            :show-overflow-tooltip="true">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--          prop="endGroupID"-->
<!--          :label="$t('LinkConfigurationManagement.endGroupID')"-->
<!--          :show-overflow-tooltip="true">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--          prop="linkStatus"-->
<!--          :formatter="formatLinkStatus"-->
<!--          :label="$t('LinkConfigurationManagement.linkStatus')"-->
<!--          :show-overflow-tooltip="true">-->
<!--          </el-table-column>-->
        </el-table>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-main>
    </el-container>

    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>

  </div>
</template>

<script>
import DeviceCommands from '../../../commands/DeviceCommands'
import CommandExecuteContext from '@/commands/CommandExecuteContext'
import LinkService from '@/domain/services/LinkService'
import DeviceService from '@/domain/services/DeviceService'
import loading from '../../../utils/Loading'
import HelperUtil from '../../../utils/HelperUtil'

export default {
  name: 'LinkConfigurationManagement',

  components: {
    CommandExecuteContext
  },
  computed: {

    importCommand () {
      return DeviceCommands.importLinkCommand(this.commandContext)
    },
    createAndCopyCommand () {
      return DeviceCommands.createAndCopyLinkCommand(this.createAndCopyTitle, this.createAndCopyInitList, this.commandContext)
    },
    deleteLinkCommand () {
      return DeviceCommands.deleteLinkCommand(this.deleteList, this.commandContext)
    },
    updateLinkCommand () {
      return DeviceCommands.updateLinkCommand(this.updateInitList, this.commandContext)
    }

  },
  // 存放 数据
  data: function () {
    return {

      // 命令
      commandContext: {},

      // 为了创建复制初始化传参
      createAndCopyInitList: [],
      createAndCopyTitle: '',

      // 删除相关
      deleteList: [],
      selectList: [],

      // 为修改传参数
      updateInitList: [],

      // 条件查询输入框
      queryLinkNameInput: '',
      queryStartNodeNameInput: '',
      queryEndNodeNameInput: '',
      // 表格宽度
      formLabelWidth: '120px',
      beginItem: 1,
      endItem: 100,
      total: 100,
      currentPage: 1,
      pageSize: 100,
      // 获取设备信息时的表格内容
      linkList: [],
      deviceList: [],
      multipleSelection: [],
      fullscreenLoading: false
    }
  },
  // 存放 方法
  methods: {
    /**
     * @Description  : 存值
     * @author       : ls
     * @date         : 2020/6/24 9:46
     * @param        :
     * @return       :
     */
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    /**
     * @Description  : 获取链路
     * @author       : ls
     * @date         : 2020/6/24 9:49
     * @param        :
     * @return       :
     */
    queryLink: function () {
      this.beginItem = 1
      this.setSelectList()
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      LinkService.queryLinkTotalNumber(_this.selectList).then(result => {
        _this.Loading.closeLoading(loadingInstance)
        _this.total = result
        if (_this.total === 0 || _this.total < 0) {
          _this.deviceList = []
        } else {
          if (_this.total < 100 && _this.total > 0) {
            _this.endItem = _this.total
          } else {
            _this.endItem = 100
          }
          _this.linkByConditionCurrentPage()
        }
      }).catch(err => {
        _this.endItem = 100
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 分页查询
     * @author       : ls
     * @date         : 2020/6/24 9:53
     * @param        :
     * @return       :
     */
    linkByConditionCurrentPage: function () {
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      LinkService.queryLinkDataSplitNumber(this.beginItem, this.endItem, this.selectList).then(result => {
        // 成功
       _this.linkList  =  Object.values(result)
        console.log( Object.values(result));//lianlu链路信息
        _this.Loading.closeLoading(loadingInstance)
      }).catch(err => {
        // 失败
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 变化
     * @author       : ls
     * @date         : 2020/6/24 10:03
     * @param        :
     * @return       :
     */
    handleCurrentChange (val) {
      this.currentPage = val
      this.beginItem = ((val - 1) * 100) + 1
      this.endItem = this.beginItem + 99
      if (this.endItem > this.total) {
        this.endItem = this.total
      }
      this.LinkByConditionCurrentPage()
    },
    /**
     * @Description  : 条件查询
     * @author       : ls
     * @date         : 2020/6/24 10:08
     * @param        :
     * @return       :
     */
    queryLinkDataByCondition: function () {
      this.beginItem = 1
      this.setSelectList()
      this.queryLinkTotalNumber()
    },
    /**
     * @Description  : 条件查询
     * @author       : ls
     * @date         : 2020/6/24 10:11
     * @param        :
     * @return       :
     */
    queryLinkTotalNumber: function () {
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      LinkService.queryLinkTotalNumber(_this.selectList).then(result => {
        _this.Loading.closeLoading(loadingInstance)
        _this.total = result
        if (_this.total === 0 || _this.total < 0) {
          _this.linkList = []
          _this.InfoTip.warningTip_alarm(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
        } else {
          if (_this.total < 100 && _this.total > 0) {
            _this.endItem = _this.total
          } else {
            _this.endItem = 100
          }
          _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
          _this.linkByConditionCurrentPage()
        }
      }).catch(err => {
        _this.endItem = 100
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取链路
     * @author       : ls
     * @date         : 2020/6/24 9:46
     * @param        :
     * @return       :
     */
    getAllLinkInit: function () {
      let _this = this
      let loadingInstance = loading.openLoading()
      LinkService.getAllLinkCollection().then(result => {
        // 成功
        _this.linkList = Object.values(result)
        loadingInstance.close()
      }).catch(err => {
        // 失败
        loadingInstance.close()
        this.InfoTip.errorTip(this, err)
      })
    },
    getAllLink: function (vue) {
      console.log('获取全部链路信息：')
      // 为了测试其他先注释了
      let loadingInstance = loading.openLoading()
      LinkService.getAllLinkCollection().then(result => {
        // 成功
        vue.linkList = Object.values(result)
        console.log(vue.linkList);
        loadingInstance.close()
      }).catch(err => {
        // 失败
        loadingInstance.close()
        this.InfoTip.errorTip(this, err)
      })
    },

    /**
       * @Description  :获取全部网元信息
       * @author       ::
       * @date         :
       */
    getAllDeviceInit: function () {
      console.log('获取全部网元信息:')

      let loadingInstance = loading.openLoading()
      DeviceService.getAllDeviceCollection().then(result => {
        // 成功
        this.deviceList = Object.values(result)
        loadingInstance.close()
      }).catch(err => {
        // 失败
        loadingInstance.close()
        this.InfoTip.errorTip(this, err)
      })
    },
    /**
     * @description   : 导入
     * @author        : ls
     * @date          : 2020/6/23 19:25
     * @param         :
     * @return        :
     **/
    importToExcelInit: function () {
      this.importCommand.execute()
    },
    /**
     * @description   : 导出
     * @author        : ls
     * @date          : 2020/6/23 21:58
     * @param         :
     * @return        :
     **/
    exportToExcelInit: function () {
      let _this = this
      _this.setSelectList()
      let loadingInstance = _this.Loading.openLoading()
      LinkService.downloadLinkFile(_this.selectList).then(result => {
        _this.Loading.closeLoading(loadingInstance)
      }).catch(err => {
        _this.Loading.closeLoading(loadingInstance)
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
       * @Description  ：创建链路初始化
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 13:29
       */
    createLinkInit: function () {
      this.createAndCopyTitle = this.$t('LinkConfigurationManagement.createLinkInfo')// {{$t('DeviceConfigurationManagement.copyDeviceInfo')"}}

      this.createAndCopyInitList = {
        'linkKey': '',
        'linkName': '',
        'startDeviceKey': '',
        'startPortName': '',
        'endDeviceKey': '',
        'endPortName': '',
        'linkStatus': 0,
        'linkType': 0,
        'delFlag': 0,
        'modifyTime': ''

      }
      this.createAndCopyCommand.execute()
    },
    /**
       * @Description  ：检查链路添加时，端口名称的合法性（必须是数字）
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/28 14:45
       */
    portNameCheck: function (text) {
      var reg = /^[0-9]*$/
      var re = new RegExp(reg)
      if (!re.test(text)) {
        return true
      } else {
        return false
      }
    },

    /**
       * @Description  ：在表格数据重新载入时，对条件查询框进行清空
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/1/10 19:03
       */
    clearQueryInput: function () {
      this.queryLinkNameInput = ''
      this.queryStartNodeNameInput = ''
      this.queryEndNodeNameInput = ''
    },

    /**
       * @Description  ：删除链路信息初始化(支持批量)
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 13:32
       */
    deleteLinkInit: function () {
      if (this.multipleSelection.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DELETE_SELECT_CODE))
      } else {
        this.deleteList = []
        for (var i = 0; i < this.multipleSelection.length; i++) {
          var obj = {'linkKey': this.multipleSelection[i]['linkKey']}
          this.deleteList.push(obj)
        }
        this.deleteLinkCommand.execute()
      }
    },
    /**
     * @description   : 条件查询
     * @author        : ls
     * @date          : 2020/6/23 22:05
     * @param         :
     * @return        :
     **/
    queryLinkByCondition: function () {
      let _this = this
      _this.setSelectList()
      let loadingInstance = _this.Loading.openLoading()
      LinkService.conditionQueryLink(_this.selectList).then(result => {
        _this.Loading.closeLoading(loadingInstance)
        _this.linkList = Object.values(result)
        _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
      }).catch(err => {
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 设置条件
     * @author       : ls
     * @date         : 2020/6/24 9:52
     * @param        :
     * @return       :
     */
    setSelectList: function () {
      this.selectList = []
      if (this.queryLinkNameInput !== '' && this.queryLinkNameInput != null) {
        this.selectList.push({
          quaryAttribute: 'linkName',
          compareSymbol: 'like',
          compareValue: this.queryLinkNameInput
        })
      }
      if (this.queryStartNodeNameInput !== '' && this.queryStartNodeNameInput != null) {
        this.selectList.push({
          quaryAttribute: 'startDeviceKey',
          compareSymbol: '=',
          compareValue: this.queryStartNodeNameInput
        })
      }
      if (this.queryEndNodeNameInput !== '' && this.queryEndNodeNameInput != null) {
        this.selectList.push({
          quaryAttribute: 'endDeviceKey',
          compareSymbol: '=',
          compareValue: this.queryEndNodeNameInput
        })
      }
    },
    /**
     * @Description  : 复制
     * @author       : ls
     * @date         : 2020/6/23 13:53
     * @param        :
     * @return       :
     */
    handleCopy: function (val) {
      this.createAndCopyTitle = this.$t('LinkConfigurationManagement.copyLinkInfo')
      this.createAndCopyInitList = val
      this.createAndCopyCommand.execute()
    },
    /**
     * @Description  :  修改链路
     * @author       : ls
     * @date         : 2020/6/23 13:50
     * @param        :
     * @return       :
     */
    updateLinkInit: function (val) {
      this.updateInitList = val
      this.updateLinkCommand.execute()
    },
    formatStartDeviceKey: function (row, column) {
      for (var j = 0; j < this.deviceList.length; j++) {
        if (row.startDeviceKey == this.deviceList[j]['deviceKey']) {
          return this.deviceList[j]['displayName']
        }
      }
    },

    formatEndDeviceKey: function (row, column) {
      for (var j = 0; j < this.deviceList.length; j++) {
        if (row.endDeviceKey == this.deviceList[j]['deviceKey']) {
          return this.deviceList[j]['displayName']
        }
      }
    },

    formatLinkStatus: function (row, colum) {
      let result = row.linkStatus
      if (row.linkStatus === 0) {
        result = this.$t('LinkConfigurationManagement.inUsing')
      }
      if (row.linkStatus === 1) {
        result = this.$t('LinkConfigurationManagement.unplaned')
      }
      if (row.linkStatus === 2) {
        result = this.$t('LinkConfigurationManagement.logicalBreak')
      }
      return result
    }
  },
  watch: {
    commandContext (newVal, oldVal) {
      if (JSON.stringify(newVal) === '{}') {
        this.queryLinkNameInput = ''
        this.queryStartNodeNameInput = ''
        this.queryEndNodeNameInput = ''
        // this.getAllLink(this)
        this.queryLink()
        this.$refs.singleTable.clearSelection()
      }
      deep: true
    }
  },
  created () {
    // this.getAllLinkInit()
    this.queryLink()
    this.getAllDeviceInit()
  },
  // mounted(){
  //     console.log(vue.linkList);
  // }
}
</script>

<style scoped>

</style>