<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"
                     v-if="importCommand.visible"
                     @click="importToExcelInit">
            {{$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" v-if="createAndCopyCommand.visible" type="primary" @click="createTemplateInit">{{$t('common.createBtn')}}</el-button>
          <el-button size = 'mini' icon="el-icon-delete" type="danger" v-if="deleteTemplateCommand.visible" @click="deleteTemplateInit">{{$t('common.deleteBtn')}}</el-button>
        </div>
          <div class="header-search">
            <div class="search-input-box">
              <label>{{$t('AlarmMangExp.deviceType')}}：</label>
              <el-select v-model="queryDeviceTypeKey"
                         @change="deviceTypeChange"
                         @clear="deviceModelChange"
                         size="mini" :placeholder="$t('common.selectOption')" :clearable="true">
                <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('AlarmMangExp.deviceModel')}}：</label>
              <el-select v-model="queryDeviceModel" size="mini" :placeholder="$t('common.selectOption')" :clearable="true">
                <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('AlarmMangExp.alarmCause')}}：</label>
              <el-select v-model="queryAlarmCause" size="mini" :placeholder="$t('common.selectOption')" :clearable="true">
                <el-option
                  v-for="item in alarmCauseList"
                  :key="item.alarmCode"
                  :label="item.alarmName"
                  :value="item.alarmCode">
                </el-option>
              </el-select>
            </div>
            <div class="search-input-box">
              <label>{{$t('AlarmMangExp.mangExp')}}：</label>
              <el-input size='mini' style="width: 173px" :placeholder="$t('common.placeholder')" v-model="queryMangExp"
                        clearable>
              </el-input>
            </div>
            <div class="search-input-box">
              <el-button icon="el-icon-search" type="primary" size = 'mini' @click="queryAlarmMangExpList">{{$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="alarmMangExpList"
          highlight-current-row
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="28">
          </el-table-column>
          <el-table-column
            prop="deviceTypeName"
            :label="$t('AlarmMangExp.deviceType')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="deviceModel"
            :label="$t('AlarmMangExp.deviceModel')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="alarmName"
            :label="$t('AlarmMangExp.alarmCause')">
          </el-table-column>
          <el-table-column
            prop="mangExp"
            :label="$t('AlarmMangExp.mangExp')">
          </el-table-column>
          <el-table-column
            prop="modifyUser"
            :label="$t('AlarmMangExp.modifyUser')">
          </el-table-column>
          <el-table-column
            prop="modifyTime"
            :formatter="formatterTimer"
            :label="$t('AlarmMangExp.modifyTime')">
          </el-table-column>
          <el-table-column
            width="105px"
            v-if="updateTemplateCommand.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="handleUpdate(scope.row)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
              </el-button>
            </template>
          </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 CommandExecuteContext from '@/commands/CommandExecuteContext'
import AlarmMangExpCommands from '@/commands/AlarmMangExpCommands'
import HelperUtil from '@/utils/HelperUtil'
import DeviceService from "../../domain/services/DeviceService";
import AlarmManagerService from "../../domain/services/AlarmManagerService";
import AlarmMangExpService from "../../domain/services/AlarmMangExpService";

export default {
  name: 'AlarmMangExp',
  components: {
    CommandExecuteContext
  },

  data: function () { // 存放数据
    return {
      alarmMangExpList: [],
      queryDeviceTypeKey: '',
      queryDeviceModel: '',
      queryAlarmCause: '',
      queryMangExp: '',
      deviceTypeList: [],
      deviceModelList: [],
      deviceModelList1: [],
      alarmCauseList: [],
      // 命令
      commandContext: {},
      // 为了创建复制初始化传参
      createAndCopyInitList: [],
      copyInitList: [],
      createAndCopyTitle: '',
      // 删除相关
      deleteList: [],
      // 为修改传参数
      updateInitList: [],
      fullscreenLoading: false,
      formLabelWidth: '120px',
      value: '',
      selectList: [],
      beginItem: 1,
      endItem: 100,
      total: 100,
      currentPage: 1,
      pageSize: 100,
      // 保存多选行数据
      multipleSelection: []
    }
  },
  // vue加载初始化函数，加载数据
  created: function () {
    this.getAlarmTypeList()
    if (this.$route.query.alarmMangExp !== undefined) {
      this.queryDeviceTypeKey = this.$route.query.alarmMangExp.deviceTypeKey
      this.queryDeviceModel = this.$route.query.alarmMangExp.deviceModel
      this.queryAlarmCause = this.$route.query.alarmMangExp.alarmCode
      // this.TurnFromCollectTask(this.$route.query.performTemplateName)
      this.queryInit()
    }
    if (this.$route.query.alarmMangExp === undefined) {
      this.queryInit()
    }
    this.getAllDeviceModel()
    this.getAllDeviceType()
  },
  computed: {
    // 命令
    importCommand () {
      return AlarmMangExpCommands.importAlarmMangExpCommand(this.commandContext)
    },
    createAndCopyCommand () {
      return AlarmMangExpCommands.createAndCopyAlarmMangExpCommand(this.createAndCopyTitle, this.createAndCopyInitList, this.commandContext)
    },
    deleteTemplateCommand () {
      return AlarmMangExpCommands.deleteAlarmMangExpCommand(this.deleteList, this.commandContext)
    },
    updateTemplateCommand () {
      return AlarmMangExpCommands.updateAlarmMangExpCommand(this.updateInitList, this.commandContext)
    }
  },
  methods: {
    /**
     * @Description  : deviceTypeChange
     * @author       : ls
     * @date         : 2020/11/11 12:32
     * @param        :
     * @return       :
     */
    deviceTypeChange: function () {
      var a = HelperUtil.deviceTypeChange(this.deviceModelList, this.queryDeviceTypeKey, this.queryDeviceModel)
      this.deviceModelList1 = a[0]
      this.queryDeviceModel = 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/7/4 15:28
     * @param         :
     * @return        :
     **/
    importToExcelInit: function () {
      this.importCommand.execute()
    },
    /**
     * @Description  : 导出
     * @author       : ls
     * @date         : 2020/7/7 15:55
     * @param        :
     * @return       :
     */
    exportToExcelInit: function () {
      let _this = this
      _this.setSelectList()
      let loadingInstance = _this.Loading.openLoading()
      AlarmMangExpService.downloadAlarmMangExpFile(_this.selectList).then(result => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        // 成功
      }).catch(err => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 创建报表模板
     * @author       : ls
     * @date         : 2020/5/2 14:37
     * @param        :
     * @return       :
     */
    createTemplateInit: function () {
      this.createAndCopyTitle = this.$t('AlarmMangExp.createAlarmMangExp')
      this.createAndCopyInitList = {
        deviceTypeKey: '',
        deviceModel: '',
        alarmCode: '',
        mangExp: ''
      }
      this.createAndCopyCommand.execute()
    },
    /**
     * @Description  : 复制
     * @author       : ls
     * @date         : 2020/7/7 15:14
     * @param        :
     * @return       :
     */
    handleCopy: function (row) {
      this.createAndCopyTitle = this.$t('AlarmMangExp.copyAlarmMangExp')
      this.createAndCopyInitList = row
      this.createAndCopyCommand.execute()
    },
    /**
     * @Description  : 修改
     * @author       : ls
     * @date         : 2020/5/2 14:39
     * @param        :
     * @return       :
     */
    handleUpdate: function (row) {
      this.updateInitList = row
      this.updateTemplateCommand.execute()
    },
    /**
     * @Description  : shanchu
     * @author       : ls
     * @date         : 2020/4/23 19:40
     * @param        :
     * @return       :
     */
    deleteTemplateInit: 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++) {
          this.deleteList.push(this.multipleSelection[i])
        }
        this.deleteTemplateCommand.execute()
      }
    },
    /**
     * @Description  : 格式化时间
     * @author       : ls
     * @date         : 2020/7/7 15:48
     * @param        :
     * @return       :
     */
    formatterTimer: function (val) {
      if (val.modifyTime === '') {
        return ''
      } else {
        return HelperUtil.timeTran(val.modifyTime)
      }
    },
    /**
     * @Description  : 取值
     * @author       : ls
     * @date         : 2020/5/2 14:39
     * @param        :
     * @return       :
     */
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    /**
     * @Description  : 分页变化
     * @author       : ls
     * @date         : 2020/5/6 15:44
     * @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.alarmMangExpListByConditionCurrentPage()
    },
    /**
     * @Description  : 查询
     * @author       : ls
     * @date         : 2020/6/10 15:15
     * @param        :
     * @return       :
     */
    queryInit: function () {
      this.beginItem = 1
      this.setSelectList()
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      AlarmMangExpService.queryAlarmMangExpTotalNumber(this.selectList).then(result => {
        _this.Loading.closeLoading(loadingInstance)
        _this.total = result
        if (_this.total === 0 || _this.total < 0) {
          _this.alarmMangExpList = []
        } else {
          if (_this.total < 100 && _this.total > 0) {
            _this.endItem = _this.total
          } else {
            _this.endItem = 100
          }
        }
        _this.alarmMangExpListByConditionCurrentPage()
      }).catch(err => {
        _this.endItem = 100
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 首次加载
     * @author       : ls
     * @date         : 2020/5/6 15:55
     * @param        :
     * @return       :
     */
    queryAlarmMangExpList: function () {
      this.beginItem = 1
      this.setSelectList()
      this.queryAlarmMangExpListTotalNumber()
    },
    /**
     * @Description  : 查询总页数
     * @author       : ls
     * @date         : 2020/5/6 16:01
     * @param        :
     * @return       :
     */
    queryAlarmMangExpListTotalNumber: function () {
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      AlarmMangExpService.queryAlarmMangExpTotalNumber(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))
          _this.alarmMangExpList = []
        } 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.alarmMangExpListByConditionCurrentPage()
      }).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       :
     */
    alarmMangExpListByConditionCurrentPage: function () {
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      AlarmMangExpService.queryAlarmMangExpDataSplitNumber(this.beginItem, this.endItem, this.selectList).then(result => {
        // 成功
        _this.alarmMangExpList = Object.values(result)
        _this.Loading.closeLoading(loadingInstance)
      }).catch(err => {
        // 失败
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @description   : 获取网元型号
     * @author        : ls
     * @date          : 2020/7/4 14:47
     * @param         :
     * @return        :
     **/
    getAllDeviceModel: function () {
      let _this = this
      DeviceService.getAllDeviceModelCollection().then(result => {
        _this.deviceModelList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @description   : 获取网元类型
     * @author        : ls
     * @date          : 2020/7/4 14:48
     * @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        : ls
     * @date          : 2020/7/4 15:02
     * @param         :
     * @return        :
     **/
    getAlarmTypeList: function () {
      let _this = this
      AlarmManagerService.getAlarmTypeList().then(result => {
        _this.alarmCauseList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 设置条件
     * @author       : ls
     * @date         : 2020/5/26 16:46
     * @param        :
     * @return       :
     */
    setSelectList: function () {
      this.selectList = []
      if (this.queryDeviceTypeKey !== '' && this.queryDeviceTypeKey !== null) {
        this.selectList.push({
          quaryAttribute: 'deviceTypeKey',
          compareSymbol: '=',
          compareValue: this.queryDeviceTypeKey
        })
      }
      if (this.queryDeviceModel !== '' && this.queryDeviceModel !== null) {
        this.selectList.push({
          quaryAttribute: 'deviceModel',
          compareSymbol: '=',
          compareValue: this.queryDeviceModel
        })
      }
      if (this.queryAlarmCause !== '' && this.queryAlarmCause !== null) {
        this.selectList.push({
          quaryAttribute: 'alarmCode',
          compareSymbol: '=',
          compareValue: this.queryAlarmCause
        })
      }
      if (this.queryMangExp !== '' && this.queryMangExp !== null) {
        this.selectList.push({
          quaryAttribute: 'mangExp',
          compareSymbol: 'like',
          compareValue: this.queryMangExp
        })
      }
    }
  },
  watch: {
    '$route' (to) {
      if (to.name === '告警经验维护' && to.query.alarmMangExp !== undefined) {
        this.queryDeviceTypeKey = this.$route.query.alarmMangExp.deviceTypeKey
        this.queryDeviceModel = this.$route.query.alarmMangExp.deviceModel
        this.queryAlarmCause = this.$route.query.alarmMangExp.alarmCode
        // this.TurnFromCollectTask(this.$route.query.performTemplateName)
        this.queryInit()
      }
    },
    commandContext (newVal, oldVal) {
      if (JSON.stringify(newVal) === '{}') {
        this.queryInit()
        this.$refs.singleTable.clearSelection()
      }
      deep: true
    }
  }
}
</script>

<style scoped>
</style>
