<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="importPortCommand.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" @click="creatPortInit"
                     v-if="createAndCopyCommand.visible">{{$t("common.createBtn")}}
          </el-button>
          <el-button size='mini' icon="el-icon-delete" type="danger" @click="deletePortInit"
                     v-if="deletePortCommand.visible">{{$t("common.deleteBtn")}}
          </el-button>
          <div class="search">
            <div class="search-div">
              <label>{{ $t('DeviceCreatPort.deviceKeyForQuert') }}：</label>
              <el-select clearable size="mini" v-model="querySelectDeviceName"
                         :placeholder="$t('common.placeholderSelect')" autocomplete="off">
                <el-option v-for="item in deviceList" :key="item.deviceKey" :label="item.displayName"
                           :value="item.deviceKey"></el-option>
              </el-select>
            </div>
            <div class="search-div">
              <label>{{ $t('DeviceCreatPort.portNameForQuert') }}：</label>
              <el-input size='mini' :placeholder="$t('common.placeholder')" style="width: 180px" v-model="querySelectPortName" clearable></el-input>
            </div>
            <div class="search-div">
              <label>{{ $t('DeviceCreatPort.deviceType') }}：</label>
<!--              <el-input size='mini' :placeholder="$t('common.placeholder')" style="width: 180px" v-model="queryDeviceType" clearable></el-input>-->
              <el-select clearable size='mini' v-model="queryDeviceType"
                         :placeholder="$t('common.placeholderSelect')">
                <el-option v-for="item in deviceTypeList"
                           :key="item.deviceTypeKey"
                           :label="item.deviceTypeName"
                           :value="item.deviceTypeKey"></el-option>
              </el-select>
            </div>
            <div class="search-div">
              <el-button size='mini' icon="el-icon-search" type="primary" @click="queryPortByCondition"
                         v-loading.fullscreen.lock="fullscreenLoading">{{ $t("common.queryBtn")}}
              </el-button>
            </div>
          </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="portList"
          highlight-current-row
          stripe
          tooltip-effect="dark"
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="28">
          </el-table-column>
          <el-table-column
            prop="deviceKey"
            :label="$t('DeviceCreatPort.deviceKeyForTable')"
            :show-overflow-tooltip="true"
            :formatter="formatDeviceKey">

          </el-table-column>
          <el-table-column
            prop="portName"
            :label="$t('DeviceCreatPort.portNameForTable')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="businessDesc"
            :label="$t('DeviceCreatPort.purposeForTable')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            width="105px"
            v-if="updatePortCommand.visible"
            :label="$t('common.operation')">
            <template slot-scope="scope">
              <el-button
                size="mini"
                style="background: #175BE3"
                :title="$t('common.copyBtn')"
                @click="copyPortInit(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="updatePortInit(scope.row)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
              </el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-main>
    </el-container>

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

  </div>
</template>

<script>
import CommandExecuteContext from '@/commands/CommandExecuteContext'
import PortCommands from '@/commands/PortCommands'
import PortService from '@/domain/services/PortListService.js'
import DeviceService from '@/domain/services/DeviceService'

import ElRow from 'element-ui/packages/row/src/row'
import ElFormItem from '../../../../node_modules/element-ui/packages/form/src/form-item.vue'
import HelperUtil from '../../../utils/HelperUtil'

export default {
  components: {
    ElFormItem,
    CommandExecuteContext,
    ElRow
  },
  name: 'DeviceCreatPort',
  computed: {

    // 命令
    createAndCopyCommand () {
      return PortCommands.createAndCopyPortCommand(this.createAndCopyTitle, this.createAndCopyInitList, this.commandContext)
    },

    deletePortCommand () {
      return PortCommands.deletePortCommand(this.deleteList, this.commandContext)
    },
    updatePortCommand () {
      return PortCommands.updatePortCommand(this.updateInitList, this.commandContext)
    },
    importPortCommand () {
      return PortCommands.importPortCommand(this.commandContext)
    }
  },

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

      commandContext: {},

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

      // 删除相关
      deleteList: [],

      // 为修改传参数

      updateInitList: [],

      // loading窗口
      fullscreenLoading: false,

      radio: '',

      //        查询条件变量
      querySelectDeviceName: null, // 设备名称"
      querySelectPortName: '', // 设备名称"
      queryDeviceType: '',
      deviceTypeList: [],

      formLabelWidth: '120px',

      // 双向绑定弹出窗口ipput域
      form: {

        portKey: '',
        deviceKey: '',
        portName: '',
        businessDesc: '',
        delFlag: '',
        modifyTime: ''

      },
      deviceList: [],
      portList: [],
      currentRow: null,
      //        singleRow: null,
      multipleSelection: []

    }
  },

  methods: {
    /**
     * @Description  : getAllDeviceType
     * @author       : ls
     * @date         : 2021/2/20 23:02
     * @param        :
     * @return       :
     */
    getAllDeviceType: function () {
      let _this = this
      DeviceService.getAllDeviceTypeCollection().then(result => {
        _this.deviceTypeList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
       * @Description  :获取全部端口信息
       * @author       ::
       * @date         :
       */
    getAllPortInit: function () {
      let _this = this
      console.log('获取全部port信息：')
      PortService.getAllPortList().then(result => {
        // 成功
        _this.portList = Object.values(result)
        //          console.log(_this.portList)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    getAllPort: function (vue) {
      console.log('获取全部port信息：')
      PortService.getAllPortList().then(result => {
        // 成功
        vue.portList = Object.values(result)
      }).catch(err => {
        // 失败
        vue.InfoTip.errorTip(vue, err)
      })
    },

    /**
       * @Description  :获取全部网元信息
       * @author       ::
       * @date         :
       */
    getAllDeviceInit: function () {
      console.log('获取全部网元信息:')
      let _this = this
      DeviceService.getAllDeviceCollection().then(result => {
        // 成功
        _this.deviceList = Object.values(result)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },

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

    /**
       * @Description  导入文件，有待实现
       */
    importToExcelInit: function () {
      this.importPortCommand.execute()
    },

    /**
       * @Description  :导出文件
       */
    exportToExcelInit: function () {
      // 传参
      var selectList = new Array()
      if (this.querySelectDeviceName != '' && this.querySelectDeviceName != null) {
        selectList.push({
          quaryAttribute: 'deviceKey',
          compareSymbol: 'like',
          compareValue: this.querySelectDeviceName
        })
      }
      if (this.querySelectPortName != '') {
        selectList.push({
          quaryAttribute: 'portName',
          compareSymbol: 'like',
          compareValue: this.querySelectPortName
        })
      }
      if (this.queryDeviceType !== '' && this.queryDeviceType != null) {
        selectList.push({
          quaryAttribute: 'deviceTypeKey',
          compareSymbol: 'like',
          compareValue: this.queryDeviceType
        })
      }
      let _this = this
      // 打开loading
      let loadingInstance = _this.Loading.openLoading()
      PortService.downloadPortListFile(selectList).then(result => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.OTHERS_CODE))
      }).catch(err => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
       * @Description  :表格多选框改变时，将所选行进行保存
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    handleSelectionChange (val) {
      this.multipleSelection = val
    },

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

    /**
       * @Description  :创建端口信息初始化
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    creatPortInit: function () {
      this.createAndCopyTitle = this.$t('DeviceCreatPort.createPortInfo')
      this.createAndCopyInitList = {
        'portKey': '',
        'deviceKey': '',
        'portName': '',
        'businessDesc': '',
        'delFlag': '',
        'modifyTime': ''
      }
      this.createAndCopyCommand.execute()
    },

    /**
     * @description   : 复制
     * @author        : ls
     * @date          : 2020/7/3 18:43
     * @param         :
     * @return        :
     **/
    copyPortInit: function (row) {
      this.createAndCopyTitle = this.$t('DeviceCreatPort.copyPortInfo')
      this.createAndCopyInitList = row
      this.createAndCopyCommand.execute()
    },
    /**
     * @description   : 修改
     * @author        : ls
     * @date          : 2020/7/3 18:44
     * @param         :
     * @return        :
     **/
    updatePortInit: function (row) {
      this.updateInitList = row
      this.updatePortCommand.execute()
    },

    /**
       * @Description  :删除端口信息初始化
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    // 多选删除实现
    deletePortInit: function () {
      if (this.multipleSelection.length == 0) {
        // 请至少选择一条信息进行删除
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DELETE_SELECT_CODE))
      } else {
        this.deleteList = []
        // var delList = new Array()
        for (var i = 0; i < this.multipleSelection.length; i++) {
          // delList[i] = this.multipleSelection[i]['portKey']
          var obj = {'portKey': this.multipleSelection[i]['portKey']}
          this.deleteList.push(obj)
        }
        // this.deleteList = delList;
        this.deletePortCommand.execute()
      }
    },
    // 清空查询框
    clear: function () {
      this.querySelectDeviceName = null
      this.querySelectPortName = ''
    },
    /**
       * @Description  :条件查询
       * @author       :
       * @param        :
       * @date         :
       */
    queryPortByCondition: function () {
      let _this = this

      if ((this.querySelectDeviceName == '' || this.querySelectDeviceName == null) && this.querySelectPortName == '') { // &&this.querySelectPortName == '') {
        _this.$options.methods.getAllPort(_this)

        this.fullscreenLoading = false
        //          this.clear()
        return
      }
      var selectList = new Array()
      if (this.querySelectDeviceName != '' && this.querySelectDeviceName != null) {
        selectList.push({
          quaryAttribute: 'deviceKey',
          compareSymbol: '=',
          compareValue: this.querySelectDeviceName
        })
      }
      if (this.querySelectPortName != '') {
        selectList.push({
          quaryAttribute: 'portName',
          compareSymbol: 'like',
          compareValue: this.querySelectPortName
        })
      }
      // 打开loading
      let loadingInstance = _this.Loading.openLoading()
      PortService.conditionQueryPortList(selectList).then(result => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        // 成功
        _this.portList = Object.values(result)
        if (_this.portList.length == 0) {
          // 查询为空
          _this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
        } else {
          _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
        }
      }).catch(err => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    }
  },
  watch: {
    commandContext (newVal, oldVal) {
      if (JSON.stringify(newVal) === '{}') {
        this.clear()
        this.getAllPortInit()
        this.$refs.singleTable.clearSelection()
      }
      deep: true
    }
    //      portList(newVal, oldVal) {
    //       this.portList = newVal
    //
    //        deep: true
    //      },
  },
  // 初始化函数，加载数据
  created: function () {
    this.getAllDeviceInit()
    this.getAllPortInit()
    this.getAllDeviceType()
  },
  beforeCreate: function () {

  }

}
</script>
<style scoped>
</style>
