<template>
  <div id="main" class="h-all">
    <el-container class="h-all">
      <el-header height="auto">
        <div class="header-search">
          <div class="search-input-box">
            <label>{{ $t('DeviceConfigurationManagement.nodeName')}}：</label>
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="querySelectNetworkName"
                      clearable>
            </el-input>
          </div>
          <div class="search-input-box">
            <label>{{ $t('DeviceConfigurationManagement.nodeType')}}：</label>
            <el-select clearable size='mini' v-model="querySelectNetworkType"
                       @change="deviceTypeChange"
                       @clear="deviceModelChange"
                       :placeholder="$t('common.placeholderSelect')" autocomplete="off">
              <el-option v-for="item in deviceTypeList"
                         :key="item.deviceTypeKey"
                         :label="item.deviceTypeName"
                         :value="item.deviceTypeKey"></el-option>
            </el-select>
          </div>
          <div class="search-input-box">
            <label>{{ $t('DeviceConfigurationManagement.nodeModel')}}：</label>
            <el-select clearable size="mini" v-model="querySelectModel"
                       :placeholder="$t('common.placeholderSelect')" autocomplete="off">
              <el-option
                v-for="item in deviceModelList1"
                :key="item.deviceModelKey"
                :label="item.deviceModel"
                :value="item.deviceModel">
              </el-option>
            </el-select>
          </div>
          <div class="search-input-box">
            <label>{{ $t('DeviceConfigurationManagement.brand')}}：</label>
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="querySelectBrand"
                      clearable>
            </el-input>
          </div>
          <div class="search-input-box">
            <label>{{ $t('DeviceConfigurationManagement.stationSite')}}：</label>
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="querySelectStationSite" clearable></el-input>
          </div>
          <div class="search-input-box">
            <label>{{ $t('DeviceConfigurationManagement.locationKey') }}：</label>
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="querySelectLocation"
                      clearable>
            </el-input>
          </div>
          <div class="search-input-box">
            <label>{{$t('DeviceConfigurationManagement.manager')}}：</label>
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="manager"
                      clearable>
            </el-input>
          </div>
          <div class="search-input-box">
            <el-button size='mini' icon="el-icon-search" type="primary" @click="queryDevice">
              {{ $t("common.queryBtn")}}
            </el-button>
            <el-button size='mini' icon="el-icon-download" type="success" @click="exportToExcelInit">
              {{$t("common.exportBtn")}}
            </el-button>
          </div>
        </div>
      </el-header>

      <el-main class="adapt-height-box table-box">
        <pl-table
          :empty-text="$t('common.noData')"
          border
          header-row-class-name="table-header"
          cell-class-name="table-cell"
          :height="height"
          use-virtual
          :pagination-show="true"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[pageSize]"
          :row-height="rowHeight"
          @handlePageSize="handleCurrentChange"
          :big-data-checkbox="true"
          ref="singleTable"
          :data="deviceList"
          highlight-current-row
          stripe
          tooltip-effect="dark"
          @selection-change="handleSelectionChange">
          <el-table-column
            prop="displayName"
            :label="$t('DeviceConfigurationManagement.nodeName')">
          </el-table-column>
          <el-table-column
            prop="uuid"
            :label="$t('DeviceConfigurationManagement.uuid')"
            style="font-size: 10px;">
          </el-table-column>
          <el-table-column
            prop="deviceTypeName"
            :label="$t('DeviceConfigurationManagement.nodeType')">
          </el-table-column>
          <el-table-column
            prop="deviceModel"
            :show-overflow-tooltip="true"
            :label="$t('DeviceConfigurationManagement.nodeModel')">
          </el-table-column>
          <el-table-column
            prop="locationName"
            :label="$t('DeviceConfigurationManagement.locationKey')">
          </el-table-column>
          <el-table-column
            prop="station"
            :label="$t('DeviceConfigurationManagement.stationSite')">
          </el-table-column>
          <el-table-column
            prop="manager"
            :label="$t('DeviceConfigurationManagement.manager')">
          </el-table-column>
          <el-table-column
            prop="managerPhone"
            :label="$t('DeviceConfigurationManagement.phone')">
          </el-table-column>
          <el-table-column
            prop="brand"
            :label="$t('DeviceConfigurationManagement.brand')">
          </el-table-column>
          <el-table-column
            prop="manufacturerLiaison"
            :label="$t('DeviceConfigurationManagement.brandManager')">
          </el-table-column>
          <el-table-column
            prop="manufacturerPhone"
            :label="$t('DeviceConfigurationManagement.brandPhone')">
          </el-table-column>
          <el-table-column
            prop="deviceDesc"
            :show-overflow-tooltip="true"
            :label="$t('DeviceConfigurationManagement.nodeDesc')">
          </el-table-column>
          <el-table-column
            width="55px"
            v-if="updateBookCommand.visible"
            :label="$t('common.operation')">
            <template slot-scope="scope">
              <el-button
                size="mini"
                style="background: #008000"
                :title="$t('common.updateBtn')"
                @click="updateDeviceInit(scope.row)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
              </el-button>
            </template>
          </el-table-column>
        </pl-table>
      </el-main>
    </el-container>
    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
  </div>
</template>

<script>
import DeviceService from '@/domain/services/DeviceService.js'
import SubnetService from '@/domain/services/SubnetService.js'
import ConfigFileService from '@/domain/services/ConfigFileService.js'
import CommandExecuteContext from '@/commands/CommandExecuteContext'
import DeviceCommands from '@/commands/DeviceCommands'
import HelperUtil from '../../utils/HelperUtil'
export default {

  components: {
    CommandExecuteContext
  },
  name: 'BookManagement',
  data: function () { // 存放 数据
    return {
      // 命令
      commandContext: {},
      deviceList: [],
      deviceModelList: [],
      deviceModelList1: [],
      subnetList: [],
      deviceTypeList: [],

      // 设备配置更新时传的devicekey
      updateConfigFileKey: null,
      deviceDetailInfo: {},
      selectList: [],
      //  查询条件变量
      querySelectNetworkName: '', // 网元名称"
      querySelectNetworkType: null, // 网元类型"
      querySelectModel: '', // 网元型号
      querySelectStationSite: '', // 所属站点
      querySelectBrand: '',
      querySelectLocation: '', // 所属子网"
      manager: '',

      // 存创建初始化信息和复制初始化信息，传给子组件用
      createAndCopyInitList: {},
      updateInitList: {},
      deleteList: [],
      multipleSelection: [],
      beginItem: 1,
      endItem: 100,
      total: 100,
      currentPage: 1,
      pageSize: 100,
      height: 300,
      rowHeight: 30
    }
  },

  methods: {
    /**
     * @Description  : deviceTypeChange
     * @author       : ls
     * @date         : 2020/11/11 12:23
     * @param        :
     * @return       :
     */
    deviceTypeChange: function () {
      var a = HelperUtil.deviceTypeChange(this.deviceModelList, this.querySelectNetworkType, this.querySelectModel)
      this.deviceModelList1 = a[0]
      this.querySelectModel = a[1]
    },
    /**
     * @Description  : deviceModelChange
     * @author       : ls
     * @date         : 2020/11/11 12:06
     * @param        :
     * @return       :
     */
    deviceModelChange: function () {
      this.deviceModelList1 = this.deviceModelList
    },
    /**
     * @Description  : 分页变化
     * @author       : ls
     * @date         : 2020/5/6 15:44
     * @param        :
     * @return       :
     */
    handleCurrentChange ({page, size}) {
      this.currentPage = page
      this.beginItem = ((page - 1) * size) + 1
      this.endItem = this.beginItem + size - 1
      if (this.endItem > this.total) {
        this.endItem = this.total
      }
      this.deviceByConditionCurrentPage()
    },
    /**
     * @Description  : 首次加载
     * @author       : ls
     * @date         : 2020/5/6 15:55
     * @param        :
     * @return       :
     */
    queryDevice: function () {
      this.beginItem = 1
      this.deviceList = []
      this.setSelectList()
      this.queryDeviceTotalNumber()
    },
    /**
     * @Description  : 查询总页数
     * @author       : ls
     * @date         : 2020/5/6 16:01
     * @param        :
     * @return       :
     */
    queryDeviceTotalNumber: function () {
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      DeviceService.queryDeviceTotalNumber(this.selectList).then(result => {
        _this.Loading.closeLoading(loadingInstance)
        _this.total = result
        if (_this.total === 0 || _this.total < 0) {
          _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.deviceByConditionCurrentPage()
        }
      }).catch(err => {
        _this.endItem = 100
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 分页查询
     * @author       : ls
     * @date         : 2020/5/6 15:46
     * @param        :
     * @return       :
     */
    deviceByConditionCurrentPage: function () {
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      DeviceService.queryDeviceDataSplitNumber(this.beginItem, this.endItem, this.selectList).then(result => {
        // 成功
        _this.deviceList = Object.values(result)
        _this.Loading.closeLoading(loadingInstance)
      }).catch(err => {
        // 失败
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
       * @Description  :获取全部网元信息
       * @author       ::
       * @date         :
       */
    getAllDeviceInit: function () {
      let _this = this
      DeviceService.getAllDeviceCollection().then(result => {
        // 成功
        _this.deviceList = Object.values(result)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },

    /**
       * @Description  :增删改后调用，重新加载table
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    getAllDevice: function (vue) {
      let _this = this
      DeviceService.getAllDeviceCollection().then(result => {
        // 成功
        vue.deviceList = Object.values(result)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取网元类型
     * @author       : ls
     * @date         : 2020/6/8 14:21
     * @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       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    /**
     * @Description  : 设置条件
     * @author       : ls
     * @date         : 2020/5/1 17:08
     * @param        :
     * @return       :
     */
    setSelectList: function () {
      this.selectList = []
      if (this.querySelectNetworkName !== '' && this.querySelectNetworkName !== null) {
        this.selectList.push({
          quaryAttribute: 'displayName',
          compareSymbol: 'like',
          compareValue: this.querySelectNetworkName
        })
      }
      if (this.querySelectNetworkType !== null && this.querySelectNetworkType !== '') {
        this.selectList.push({
          quaryAttribute: 'deviceTypeKey',
          compareSymbol: '=',
          compareValue: this.querySelectNetworkType
        })
      }
      if (this.querySelectModel !== '' && this.querySelectModel !== null) {
        this.selectList.push({
          quaryAttribute: 'deviceModel',
          compareSymbol: '=',
          compareValue: this.querySelectModel
        })
      }
      if (this.querySelectBrand !== '' && this.querySelectBrand !== null) {
        this.selectList.push({
          quaryAttribute: 'brand',
          compareSymbol: '=',
          compareValue: this.querySelectBrand
        })
      }
      if (this.querySelectStationSite !== '' && this.querySelectStationSite !== null) {
        this.selectList.push({
          quaryAttribute: 'station',
          compareSymbol: '=',
          compareValue: this.querySelectStationSite
        })
      }
      if (this.querySelectLocation !== null && this.querySelectLocation !== '') {
        this.selectList.push({
          quaryAttribute: 'locationName',
          compareSymbol: 'like',
          compareValue: this.querySelectLocation
        })
      }
      if (this.manager !== null && this.manager !== '') {
        this.selectList.push({
          quaryAttribute: 'manager',
          compareSymbol: '=',
          compareValue: this.manager
        })
      }
    },
    /**
     * @Description  : 导出
     * @author       : ls
     * @date         : 2020/4/24 16:46
     * @param        :
     * @return       :
     */
    exportToExcelInit: function () {
      let _this = this
      _this.setSelectList()
      let loadingInstance = _this.Loading.openLoading()
      DeviceService.downloadDeviceBook(_this.selectList).then(result => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        // 成功
      }).catch(err => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : xiugai
     * @author       : ls
     * @date         : 2020/4/24 15:19
     * @param        :
     * @return       :
     */
    updateDeviceInit (row) {
      this.updateInitList = row
      this.updateBookCommand.execute()
    },
    /**
     * @Description  : 条件查询
     * @author       : ls
     * @date         : 16:41
     * @param        :
     * @return       :
     */
    queryDeviceByCondition: function () {
      let _this = this
      _this.setSelectList()
      let loadingInstance = _this.Loading.openLoading()
      DeviceService.conditionQueryDevice(_this.selectList).then(result => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        // 成功
        _this.deviceList = Object.values(result)
        if (_this.deviceList.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)
      })

      // }
    },
    /**
       * @Description  :获取全部子网信息，
       * @author       :
       * @date         : 2018/12/13
       */
    getAllSubnet () {
      let _this = this
      SubnetService.getAllSubnetCollection().then(result => {
        // 成功
        _this.subnetList = Object.values(result)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取网元型号
     * @author       : ls
     * @date         : 2020/5/20 9:15
     * @param        :
     * @return       :
     */
    getAllDeviceModel: function () {
      let _this = this
      DeviceService.getAllDeviceModelCollection().then(result => {
        _this.deviceModelList = Object.values(result)
        _this.deviceModelList1 = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * 获取样式值
     */
    getStyle (dom, attr){
      return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];
    }
  },
  // 初始化函数，加载数据
  created: function () {
    this.queryDevice()
    this.getAllSubnet()
    this.getAllDeviceModel()
    this.getAllDeviceType()
  },
  mounted() {
    // 计算表格高度
    setTimeout(() => {
      let table_box = document.getElementsByClassName('table-box')[0]
      var clientHeight = table_box.clientHeight;
      var paddingTop = Number(this.getStyle(table_box, 'paddingTop').replace(/\s+|px/gi, ''))
      var paddingBottom = Number(this.getStyle(table_box, 'paddingBottom').replace(/\s+|px/gi, ''))
      this.height = clientHeight - paddingTop - paddingBottom - 1
    })
  },
  computed: {
    updateBookCommand () {
      return DeviceCommands.updateBookCommand(this.updateInitList, this.commandContext)
    }
  },
  watch: {
    commandContext (newVal, oldVal) {
      if (JSON.stringify(newVal) === '{}') {
        this.queryDevice()
        this.$refs.singleTable.clearSelection()
      }
      deep: true
    }
  }

}
</script>

<style scoped>
  /*!* 外层布局容器样式 *!*/

  .el-table .warning-row {
    background: oldlace;
  }

  body .el-table colgroup.gutter {
    display: table-cell !important;
  }

  .el-table .current-row {
    background: #FF8040;
  }

</style>
