<template>
  <section class="app-container">
    <el-row>
      <!-- 地区 -->
      <el-col :span="4">
        <region @selectdRegionCode="selectdRegionCode" :currentNodeKey.sync="queryParams.provinceCode"></region>
      </el-col>
      <!-- form表单 -->
      <el-col :span="20">
        <el-form size="mini" :model="queryParams" :inline="true" ref="queryForm" v-show="showSearch" label-width="68px">
          <!-- 第一行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="告警名称">
                <el-input v-model="queryParams.warningName" placeholder="请输入告警名称" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="告警等级">
                <el-select v-model="queryParams.warningLevel" clearable placeholder="请输入告警等级">
                  <el-option v-for="item in signalLevelList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品名称">
                <el-select v-model="queryParams.deviceType" clearable placeholder="请选择">
                  <el-option v-for="item in signalLevelList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属客户">
                <el-select v-model="queryParams.deviceType" clearable placeholder="请选择">
                  <el-option v-for="item in signalLevelList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="所属项目">
                <el-select v-model="queryParams.deviceType" clearable placeholder="请选择">
                  <el-option v-for="item in signalLevelList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="站址名称">
                <el-input v-model="queryParams.deviceName" placeholder="请输入站址名称" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备SN">
                <el-input v-model="queryParams.deviceSn" placeholder="请输入设备SN" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="信号量ID">
                <el-input v-model="queryParams.productId" placeholder="请输入信号量ID" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="告警次数">
                <el-input v-model="queryParams.deviceName" placeholder="请输入告警次数" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="时间范围">
                <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                  start-placeholder="告警发生时间" end-placeholder="结束时间"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">
                  查询
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <!-- 表格区域 -->
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column prop="proName" align="center" label="省份" min-width="80">
          </el-table-column>
          <el-table-column prop="cityName" align="center" label="市" min-width="80">
          </el-table-column>
          <el-table-column prop="disName" align="center" label="区" min-width="80">
          </el-table-column>
          <el-table-column prop="productName" label="产品名称" align="center" min-width="100">
          </el-table-column>
          <el-table-column prop="nikeName" align="center" label="所属客户"></el-table-column>
          <el-table-column prop="projectName" align="center" label="所属项目"></el-table-column>
          <el-table-column prop="warningName" align="center" label="告警名称" min-width="150"></el-table-column>
          <el-table-column prop="warningLevel" align="center" label="告警等级" min-width="150"></el-table-column>
          <el-table-column prop="workOrderId" align="center" label="工单编号" min-width="150"></el-table-column>
          <el-table-column prop="signalCode" align="center" label="信号量ID" min-width="150"></el-table-column>
          <el-table-column align="center" label="告警发生时间" min-width="150">
            <template slot-scope="scope">
              {{ scope.row.warningTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="warningDetails" align="center" label="告警详情" min-width="150"></el-table-column>
          <el-table-column align="center" label="站址名称" min-width="150"></el-table-column>
          <el-table-column prop="deviceName" align="center" label="设备名称" min-width="150"></el-table-column>
          <el-table-column prop="deviceSn" align="center" label="设备SN" min-width="150"></el-table-column>
          <el-table-column prop="status" label="运营状态" align="center" min-width="250"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>
  </section>
</template>
<script>
import Region from '@/components/Region';
import { list } from '@/api/fault/warning';
export default {
  name: 'activeAdmin',
  components: {
    Region
  },
  data () {
    return {
      dateRange: [],
      signalLevelList: [
        { label: '一级', value: '1' },
        { label: '二级', value: '2' },
        { label: '三级', value: '3' },
        { label: '四级', value: '4' }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      // 显示搜索条件
      showSearch: true
    };
  },
  methods: {
    selectdRegionCode ({ code }) {
      this.queryParams.provinceCode = code;
      this.handleQuery();
    },
    // 获取告警工单列表
    getList () {
      this.loading = true;
      list(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 搜索按钮操作
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 重置按钮操作
    resetQuery () {
      this.queryParams = {};
      this.resetForm('queryForm');
      this.dateRange = [];
      this.handleQuery();
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getList();
  }
};
</script>
<style lang="scss" scoped></style>
