<template>
    <div id="main">
      <div class="header-search" align="left">
        <div class="search-input-box">
          <label>{{ $t("AlarmQuery.AlarmLevel") }}</label>
          <el-select clearable size='mini' v-model="alarmLevel" :placeholder="$t('common.placeholder')" autocomplete="off">
            <el-option
            v-for="item in optionsAlarmLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-input-box">
          <label>{{ $t("AlarmQuery.DeviceType") }}</label>
          <el-select clearable size='mini' v-model="queryAlarmDeviceType" :placeholder="$t('common.placeholder')" autocomplete="off" @change="deviceTypeChange">
            <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("AlarmQuery.DeviceName") }}</label>
          <el-select clearable size='mini' v-model="queryDeviceName" :placeholder="$t('common.placeholder')" autocomplete="off">
            <el-option
            v-for="item in deviceList1"
            :key="item.deviceKey"
            :label="item.displayName"
            :value="item.displayName">
            </el-option>
          </el-select>
        </div>
        <div class="search-input-box">
          <label>{{ $t("AlarmQuery.AlarmCause") }}</label>
          <el-select clearable size='mini' v-model="queryAlarmCause" :placeholder="$t('common.placeholder')" autocomplete="off">
            <el-option
            v-for="item in optionsAlarmCause"
            :key="item.alarmCode"
            :label="item.alarmName"
            :value="item.alarmCode">
            </el-option>
          </el-select>
        </div>
        <div class="search-input-box">
          <label>{{ $t('AlarmQuery.beginTimestamp') }}</label>
          <el-date-picker
            v-model="beginTimestamp"
            type="datetime"
            style="width: 175px"
            size="mini"
            format="yyyy-MM-dd HH:mm"
            align="center"
            :picker-options="startDatePicker"
            :placeholder="$t('AlarmQuery.chooseStartTime')">
          </el-date-picker>
        </div>
        <div class="search-input-box">
          <label>{{ $t("AlarmQuery.endTimestamp") }}</label>
          <el-date-picker
            v-model="endTimestamp"
            type="datetime"
            style="width: 175px"
            size="mini"
            format="yyyy-MM-dd HH:mm"
            align="center"
            :picker-options="endDatePicker"
            :placeholder="$t('AlarmQuery.chooseEndTime')">
          </el-date-picker>
        </div>
        <div class="search-input-box">
          <el-button size='mini' icon="el-icon-brush" type="primary" @click="filterData"
                     v-loading.fullscreen.lock="fullscreenLoading">
            {{$t('common.filterBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-remove" type="warning" @click="resetData"
                     v-loading.fullscreen.lock="fullscreenLoading">
            {{$t('common.clear')}}
          </el-button>
        </div>
        <hr style="margin-top: 1px;margin-bottom: 1px;">
      </div>
    </div>
</template>

<script>
import AlarmManagerService from '@/domain/services/AlarmManagerService.js'
import DeviceService from '@/domain/services/DeviceService.js'
export default {
  name: 'alarm-filter',
  // 存放 数据
  data: function () {
    return {
      fullscreenLoading: false,
      alarmLevel: '', // 告警等级
      queryAlarmDeviceType: '', //
      queryDeviceName: '',
      queryAlarmCause: '',
      beginTimestamp: '',
      endTimestamp: '',
      addTimestamp: '00.000', // 查询时间默认添加
      addTimestamp1: '59.999', // 查询时间默认添加
      beginTimestampTemp: '',
      endTimestampTemp: '',
      deviceList1: [],
      deviceTypeList: [],
      optionsAlarmCause: [],
      optionsAlarmLevel: [{
        value: '0',
        label: this.$t('AlarmQuery.MinorAlarm')
      }, {
        value: '1',
        label: this.$t('AlarmQuery.MajorAlarm')
      }, {
        value: '2',
        label: this.$t('AlarmQuery.CriticalAlarm')
      }
      ],
      startDatePicker: this.beginDate(),
      endDatePicker: this.endDate()
    }
  },
  // 存放 方法
  methods: {
    filterData: function () {
      var selectList = []
      var year
      var month
      var day
      var hours
      var minutes
      if (this.beginTimestamp !== '' && this.beginTimestamp !== null) {
        year = '' + this.beginTimestamp.getFullYear()
        month = '' + (this.beginTimestamp.getMonth() + 1)
        day = '' + this.beginTimestamp.getDate()
        hours = '' + this.beginTimestamp.getHours()
        minutes = '' + this.beginTimestamp.getMinutes()
        if (month.length === 1) {
          month = '0' + month
        }
        if (day.length === 1) {
          day = '0' + day
        }
        if (hours.length === 1) {
          hours = '0' + hours
        }
        if (minutes.length === 1) {
          minutes = '0' + minutes
        }
        var begin = '' + year + month + day + '.' + hours + minutes + this.addTimestamp
        console.log('开始时间')
        console.log(begin)
        selectList.push({
          quaryAttribute: 'firstTime',
          compareSymbol: '>=',
          compareValue: begin
        })
      }
      if (this.endTimestamp !== '' && this.endTimestamp !== null) {
        year = '' + this.endTimestamp.getFullYear()
        month = '' + (this.endTimestamp.getMonth() + 1)
        day = '' + this.endTimestamp.getDate()
        hours = '' + this.endTimestamp.getHours()
        minutes = '' + this.endTimestamp.getMinutes()
        if (month.length === 1) {
          month = '0' + month
        }
        if (day.length === 1) {
          day = '0' + day
        }
        if (hours.length === 1) {
          hours = '0' + hours
        }
        if (minutes.length === 1) {
          minutes = '0' + minutes
        }
        var end = '' + year + month + day + '.' + hours + minutes + this.addTimestamp1
        console.log('结束时间')
        console.log(end)
        selectList.push({
          quaryAttribute: 'firstTime',
          compareSymbol: '<=',
          compareValue: end
        })
      }
      if (this.queryDeviceName !== '' && this.queryDeviceName !== null) {
        selectList.push({
          quaryAttribute: 'displayName',
          compareSymbol: '=',
          compareValue: this.queryDeviceName
        })
      }
      if (this.queryAlarmDeviceType !== '' && this.queryAlarmDeviceType !== null) {
        selectList.push({
          quaryAttribute: 'deviceTypeKey',
          compareSymbol: '=',
          compareValue: this.queryAlarmDeviceType
        })
      }
      if (this.queryAlarmCause !== '' && this.queryAlarmCause !== null) {
        selectList.push({
          quaryAttribute: 'alarmCode',
          compareSymbol: '=',
          compareValue: this.queryAlarmCause
        })
      }
      if (this.alarmLevel !== '' && this.alarmLevel !== null) {
        selectList.push({
          quaryAttribute: 'alarmLevel',
          compareSymbol: '=',
          compareValue: parseInt(this.alarmLevel)
        })
      }
      this.transformDate2Father(selectList)
    },
    resetData: function () {
      this.alarmLevel = '' // 告警等级
      this.queryAlarmDeviceType = '' //
      this.queryDeviceName = ''
      this.queryAlarmCause = ''
      this.beginTimestamp = ''
      this.endTimestamp = ''
      this.transformDate2Father()
    },

    // 传递参数给父组件
    transformDate2Father: function (selectList = []) {
      this.$emit('queryCondition', this.clickTab, selectList)
    },
    /***
           * @Description  : 获取告警列表
           * @author       :
           * @date         :
           */
    getAlarmTypeList: function () {
      let _this = this
      AlarmManagerService.getAlarmTypeList().then(result => {
        // 成功
        _this.optionsAlarmCause = Object.values(result)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },

    /**
           * @Description  :获取全部网元类型
           * @author       :
           * @date         :
           */
    getAllDeviceType: function () {
      let _this = this
      DeviceService.getAllDeviceTypeCollection().then(result => {
        _this.deviceTypeList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },

    /***
           * @Description  : 网元类型的触发事件
           * @author       :
           * @date         :
           */
    deviceTypeChange: function () {
      this.queryDeviceName = ''
      // this.queryAlarmCause = "";
      this.deviceList1 = []
      let deviceArr = Object.values(this.deviceCollection)
      for (var i = 0; i < deviceArr.length; i++) {
        if (this.queryAlarmDeviceType === null || this.queryAlarmDeviceType === '') {
          this.deviceList1.push(deviceArr[i])
        }
        if (this.queryAlarmDeviceType === deviceArr[i]['deviceTypeKey']) {
          this.deviceList1.push(deviceArr[i])
        }
      }
    },

    /***
           * @Description  : 获取默认时间
           * @author       : zf
           * @date         : 2019/1/4 11:32
           */
    setDefaultDateTime: function () {
      const start = new Date()
      const end = new Date()
      start.setTime(start.getTime() - 3600 * 1000)
      this.beginTimestampTemp = start
      this.endTimestampTemp = end
    },
    // 设置禁止选择当前日期之后的时间，且开始时间小于结束时间
    beginDate: function () {
      let self = this
      return {
        disabledDate (time) {
          if (self.endTimestamp !== null && self.endTimestamp !== '') {
            return time.getTime() > self.endTimestamp.getTime() || time.getTime() > Date.now()
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    },
    // 结束时间必须大于开始时间
    endDate: function () {
      let self = this
      return {
        disabledDate (time) {
          if (self.beginTimestamp !== null && self.beginTimestamp !== '') {
            return time.getTime() < self.beginTimestamp.getTime() || time.getTime() > Date.now()
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    }
  },
  props: [
    'deviceCollection',
    'clickTab'
  ], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
  computed: {
    queryNodeTypeChange () {
      this.optionsAlarmLevel[0].label = this.$t('AlarmQuery.MinorAlarm')
      this.optionsAlarmLevel[1].label = this.$t('AlarmQuery.MajorAlarm')
      this.optionsAlarmLevel[2].label = this.$t('AlarmQuery.CriticalAlarm')
    }
  },
  watch: {
    '$i18n.locale' () {
      this.queryNodeTypeChange()
    }
  },
  created () {
    this.setDefaultDateTime()
    this.getAlarmTypeList()
    this.getAllDeviceType()
    this.deviceList1 = Object.values(this.deviceCollection)
  }

}
</script>

<style scoped>
  #main >>> .header-search .search-input-box .el-input{
    width: 146px;
  }
</style>
