<template>
  <!--报警历史-->
  <div id="ruleAlarm" class="asideBgc tab">
    <div class='butClick'>
      <xf-buttons @changes="searChange" :btnAuthority='authority' @get='searchChange'
        :searchPlaceholder='searchPlaceholder'>
        <template #search>

          <span>项目：</span>
          <el-select @change='projectNoChange' v-model="projectName" placeholder="项目名称" class="projectNoStyle m-r-20">
            <el-option v-for='(item,index) in projectData' :key='index' :label="item.projectName"
              :value="item.projectNo">
            </el-option>
          </el-select>

          <span>站点：</span>
          <el-autocomplete @focus='handle' @select="handleSelect" class="inline-input m-r-20" v-model="siteNames"
            :fetch-suggestions="querySearch" placeholder="站点名称">
          </el-autocomplete>
          
        </template>
      </xf-buttons>
    </div>

    <xfTable ref="table" :btnAuthority='authority' @sizeSee='sizeChange' @selectionChange='selectionChange'
      @currentChange='currentChange'>
    </xfTable>

  </div>
</template>

<script>
  import project from '../../mixins/project'
  var moment = require('moment');
  import {
    notify
  } from '../../util/item'

  /*负责导出组件*/
  export default {
    name: 'ruleAlarm',
    data() {
      return {
        searchPlaceholder: '请输入规则名称',
        projectName: '',
        siteName: '',
        status: 1,
        siteNames: '',
        loadOption: {
          column: [{
            label: '项目名称',
            prop: 'projectName'
          }, {
            label: '站点名称',
            prop: 'siteName'
          }, {
            label: '规则名称',
            prop: 'ruleEngine',
            formatter: function (row, value, text, column) {
              return row['ruleEngine']['ruleName']
            }
          }, {
            label: '报警时间',
            prop: 'alarmTime',
            formatter: function (row, value, text, column) {
              if (value === null) {
                return ''
              }
              return moment(value).format('YYYY-MM-DD HH:mm:ss')
            }
          }, {
            label: '通知方式',
            prop: 'creator',
            formatter: function (row, value, text, column) {
              return row['ruleEngine']['ruleDataProcess']['alarmType'] === 1 ? '邮件' : '邮件和短信';
            }
          }, {
            label: '通知对象',
            prop: 'status',
            formatter: function (row, value, text, column) {
              return row['ruleEngine']['ruleDataProcess']['notice'];
            }
          }]
        }
      }
    },
    mixins: [project],
    mounted() {
      this.getLists();
      this.projectDatas();
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.siteDataTc;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        if (results.length !== 0) {
          for (let item of results.values()) {
            item['value'] = item['siteName'];
          }
        }
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.siteName.indexOf(queryString) !== -1);
        };
      },
      handle() {
        // 处理加入字符引起的状态变化
        this.status = 1;
      },
      handleSelect(item) {
        // 搜索框中的内容
        this.status = 2;
        this.siteName = item['siteNo']
      },
      projectNoChange(val) {
        /**
         * 项目名称类型
         */
        this.siteNames = '';
        this.siteGet(val)
      },
      searchChange(val = '') {
        // 搜索数据
        if (val === '') {
          this.page.currentPage = 1;
          this.getLists();
        } else {
          this.getLists(val);
        }
      },
      async getLists(ruleName = '') {
        /**
         * 获取任务列表
         */
        if (this.status !== 2) {
          this.siteName = this.siteNames;
        }
        this.status = 1
        this.deleteList = [];
        let datas = {
          params: {
            "ruleName": ruleName,
            "projectNo": this.projectName,
            "siteNo": this.siteName,
            "pageNo": this.page.currentPage,
            "pageSize": this.page.pageSize
          }
        }
        // 获取数据返回状态 日志
        let response = await this.getTableData(datas, this.nozzle.alarmHistoryRule);
        this.rendering(response);

      },
    }
  }

</script>
<style>
  #ruleAlarm .formJcDoc {
    font-size: 20px;
    color: #333;
    margin: 15px 0;
  }

  #ruleAlarm .iconfont[class^=icon] {
    width: 17px;
  }

  #ruleAlarm .aboutType {
    color: rgb(102, 177, 255);
    cursor: pointer;
  }

  .deleteIcon {
    cursor: pointer;
    color: #f15353;
  }

  .conditiona {
    padding: 0px 0 10px 100px;
  }

  hr {
    opacity: 0.3;
  }

  #ruleAlarm .el-input__inner {
    height: 31px !important;
  }

  #ruleAlarm .el-input__icon {
    line-height: 31px !important;
  }


  #ruleAlarm .projectNoStyle {
    display: inline-block;
    width: 220px !important;
    /* margin-bottom: 22px; */
  }

</style>