<template>
  <div id="AlarmLog">
    <div id="ALTop">
      <el-select
        v-model="ProjectNo"
        filterable
        clearable
        placeholder="请选择所属项目"
        @change="selectV()"
      >
        <el-option
          v-for="(item, index) in allProject"
          :key="index"
          :label="item.key"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        placeholder="请输入站点名称"
        v-model="ALValue"
        clearable
      ></el-input>
      <el-date-picker
        v-model="TimeBoxValue"
        :picker-options="pickerOptions"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        id="IndexTime"
        value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="loadGridData()"
        v-has="'Search'"
        >搜索</el-button
      >
    </div>
    <div
      id="ALCentent"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.3)"
    >
      <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)">
        <el-table-column prop="siteNo" label="站点编号"></el-table-column>
        <el-table-column prop="name" label="所属项目"></el-table-column>
        <el-table-column prop="siteName" label="站点名称"></el-table-column>
        <el-table-column prop="factorsName" label="因子名"></el-table-column>
        <el-table-column prop="warnType" label="报警级别">
          <template slot-scope="scope">
            <span v-if="scope.row.warnType == 2" style="color:red">{{
              scope.row.warnTypeDesc
            }}</span>
            <span v-else class="yellow">{{ scope.row.warnTypeDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="warnValue" label="监测值"></el-table-column>
        <el-table-column
          prop="ttTime"
          label="观测时间"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="ALSizeChange"
        @current-change="ALCurrentChange"
        :current-page="ALPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="ALSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ALDatagridDataLength"
        style="margin-top:10px;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { message } from "./../../util/item";
import { mapGetters } from "vuex";
export default {
  name: "AlarmLog",
  data: function() {
    return {
      ProjectNo: "", //所选择的项目的项目编号
      ALValue: "", //顶部模糊搜索
      TableData: [], //表格数据
      ALPage: 1, //分页默认显示页
      ALDatagridDataLength: 0, //分页上显示的数据总条数
      ALSize: 10, //分页上显示的每页的条数
      TimeBoxValue: [
        this.moment()
          .subtract("days", 3)
          .format("YYYY-MM-DD HH:mm:ss"),
        this.moment().format("YYYY-MM-DD HH:mm:ss")
      ], //起止日期
      pickerOptions: {
        shortcuts: [
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }, //时间框的快捷选项
      loading: false
    };
  },
  computed: {
    ...mapGetters(["allProject"])
  },
  methods: {
    selectV() {
      this.loadGridData();
    },
    ALSizeChange(val) {
      // 改变每页的条数
      this.ALSize = val;
      this.loadGridData();
    },
    ALCurrentChange(val) {
      //改变页数
      this.ALPage = val;
      this.loadGridData();
    },
    //获取数据
    loadGridData() {
      this.loading = true;
      this.TableData = [];
      this.$http
        .post(this.nozzle.warnLogListWarnLog, {
          current: this.ALPage,
          size: this.ALSize,
          data: {
            platForm: this.ProjectNo, //平台编号(可填)
            startTime: this.TimeBoxValue[0], //起始时间
            endTime: this.TimeBoxValue[1], //截止时间
            siteName: this.ALValue //模糊搜索
          }
        })
        .then(response => {
          this.loading = false;
          if (response.data.code === 200) {
            this.TableData = response.data.data.records;
            this.ALDatagridDataLength = response.data.data.total;
          } else {
            message(response);
          }
        })
        .catch(response => {
          this.loading = false;
          message(response);
        });
    }
  },
  mounted: function() {
    this.loadGridData();
  }
};
</script>

<style scoped>
#AlarmLog {
  width: 100%;
  height: 100%;
}
/* 顶部搜索 */
#ALTop {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: left;
}
#ALTop .el-input {
  width: 250px;
  margin: 0 10px;
} /* 表格 */
#ALCentent {
  width: 100%;
  height: calc(100% - 70px);
  margin-top: 10px;
  /* background: rgba(53, 53, 53, 0.5); */
}

.yellow {
  color: var(--yellow);
}
</style>